Szybkie budowanie własnych przepływów logowania z Bolt.New i Logto
Dowiedz się, jak użyć Bolt.new do stworzenia aplikacji full-stack z uwierzytelnianiem Logto. Od konfiguracji przepływów logowania, przez tworzenie pływającego panelu logowania, po włączanie logowania społecznościowego – ten poradnik obejmuje zarówno konfigurację, jak i personalizację.
Product & Design
Czym jest Bolt.New
Bolt.new to narzędzie przeglądarkowe umożliwiające natychmiastowe generowanie i uruchamianie aplikacji webowych full-stack. Zbudowane na bazie technologii WebContainer od StackBlitz, oferuje deweloperom czysty, skonfigurowany stos, który zawiera Next.js (App Router), Tailwind CSS, Supabase, Prisma oraz ShadCN UI. Całe środowisko działa lokalnie w przeglądarce – bez instalacji, bez zadań w chmurze i bez konieczności rejestracji.
W przeciwieństwie do narzędzi skupiających się na kodowaniu wspieranym przez AI wewnątrz istniejącego projektu, Bolt.new koncentruje się na początku procesu tworzenia oprogramowania. Usuwa konieczność konfigurowania struktury projektu, zależności i lokalnych serwerów, pozwalając przejść od pomysłu do działającego prototypu w kilka sekund.
Czym Bolt.new różni się od Cursor lub Lovable?
Podczas gdy narzędzia takie jak Cursor i Lovable pełnią rolę AI-copilotów w Twoim edytorze kodu, Bolt.new skupia się na czymś zupełnie innym: natychmiastowym generowaniu i uruchamianiu projektu full-stack.
- Cursor wzbogaca przepływ pracy w VS Code dzięki AI, pomagając edytować lub generować kod w Twoim obecnym środowisku.
- Bolt.new tworzy działającą aplikację od zera na podstawie prompta lub szablonu i uruchamia ją natychmiast w przeglądarce przy użyciu WebContainers.
Nie wymaga lokalnych narzędzi ani zdalnych maszyn wirtualnych – wszystko działa w przeglądarce z natywnym wsparciem dla Node.js, zarządzania paczkami i rozwoju pełnostackowego. Sprawdza się szczególnie dobrze w szybkich prototypach i eksperymentach lokalnych, zwłaszcza w kontekście projektów AI lub SaaS.
Dla kogo jest Bolt.new?
Bolt.new został zaprojektowany dla deweloperów, którzy często zaczynają od zera, takich jak:
- Indie hackers weryfikujący pomysły na produkty
- Twórcy AI testujący przepływy lub integrujący modele
- Założyciele prototypujący MVP
- Inżynierowie budujący narzędzia wewnętrzne lub dema
Użytkownicy ci zwykle dobrze czują się w nowoczesnym stacku webowym i wolą narzędzia szybkie, przejrzyste i niesugerujące rozwiązań. Bolt.new nie jest wizualnym kreatorem stron ani platformą opartą na samouczkach. Zakłada znajomość Reacta i rozwoju full-stack, ale eliminuje bariery startu.
Historia i ewolucja Bolt.new
Bolt.new został stworzony przez zespół odpowiedzialny za StackBlitz – firmę założoną w 2017 roku przez Erica Simonsa i Alberta Pai. StackBlitz zrewolucjonizował prace nad WebContainers – natywnym środowiskiem WebAssembly, mogącym uruchamiać środowiska Node.js bezpośrednio w przeglądarce. To wyeliminowało konieczność korzystania z serwerów w chmurze lub instalacji lokalnej przy tworzeniu nowoczesnych aplikacji JavaScriptowych.
W 2023 roku StackBlitz stanął na rozdrożu. Wzrost zwolnił, więc zespół postanowił obrać odważniejszy kierunek: połączenie WebContainers z AI do generowania w pełni funkcjonalnych aplikacji z promptów w języku naturalnym.
Tak powstał eksperyment o nazwie Bolt.new, który wystartował publicznie w październiku 2024 roku. W kilka tygodni zdobył popularność wśród deweloperów dzięki prostocie i prędkości działania. Narzędzie połączyło to, co przez lata zbudowano w StackBlitz – izolację runtime, szybkie instalacje zależności i współdzielone środowiska – z AI rozumiejącym typowe cele deweloperskie.
Bolt.new oznaczał zmianę w narzędziach dla programistów: już nie tylko szybsze pisanie kodu, lecz zaczynanie z działającym kodem, dopasowanym do intencji twórcy.
Przewodnik: Dodaj własne doświadczenie logowania z Logto i Bolt.New
Zarejestruj aplikację w konsoli Logto
W tym przykładzie użyłem Bolt.new do stworzenia aplikacji CMS. Pominąłem etap prompta i przeszedłem od razu do rzeczy: poprosiłem agenta o zbudowanie CMS z Logto jako dostawcą uwierzytelniania.
Zgodnie z instrukcją musiałem dostarczyć dwa kluczowe dane:
Logto endpointApp ID
Ponieważ aplikacja to jednostronicowa aplikacja React, nie jest potrzebny app secret. Agent zajął się resztą: zainstalował najnowszy Logto React SDK, skonfigurował komponenty logowania i połączył całość.
Aby dokończyć konfigurację, wszedłem do Logto Cloud Console, utworzyłem nową aplikację SPA i wkleiłem Logto endpoint oraz App ID w Bolt.new.
Następnie skonfiguruj Redirect URIs oraz Post sign-out redirect URIs.
Ważny szczegół: jako że Bolt.new działa w przeglądarce, a nie lokalnym IDE, nie możesz używać http://localhost:3000/ jako redirect URI. Użyj adresu podglądu widocznego w zakładce Bolt.new zamiast tego.
Dostosuj gotowy ekran logowania Logto
Logto oferuje konfigurowalny, gotowy przepływ logowania, który możesz spersonalizować w Konsoli. Aby zacząć, przejdź do Doświadczenie logowania > Logowanie & Rejestracja, a następnie wybierz preferowane metody logowania (np. email, nazwa użytkownika, numer telefonu lub logowanie społecznościowe).
Po zapisaniu, uruchomienie logowania przekieruje użytkownika na hostowaną stronę logowania Logto z Twoimi opcjami. Cały proces uwierzytelniania obsługuje Logto, a użytkownik wraca do Twojej aplikacji po zalogowaniu.
Stwórz pływający panel logowania nad swoim produktem
Chcę pójść o krok dalej i zbudować bardziej spersonalizowany przepływ logowania, podobny do tego co oferuje Perplexity. Zamiast przekierowywać na osobną stronę, umieszczam pływający panel logowania bezpośrednio na interfejsie produktu. Użytkownik pozostaje w kontekście, nadal korzystając z Logto do obsługi logowania pod spodem.
Użyłem następującego prompta:
Chcę, by strona logowania wyglądała lepiej – po prostu pływający panel w prawym dolnym rogu. Dwa przyciski: jeden do "Zaloguj się", drugi do "Utwórz konto". Każdy przycisk powinien przekierowywać na inny ekran, obsługiwany przez Logto. Użyj "first-screen experience" opisanej w Logto https://docs.logto.io/end-user-flows/authentication-parameters/first-screen
Fajne jest to, że klikając Zaloguj się trafiasz od razu na stronę logowania, a klikając Utwórz konto od razu otwiera się ekran rejestracji.
Dodaj przepływy social logowania
Możesz podać agentowi dokumentację bezpośredniego logowania Logto wraz z promptem typu „dodaj social sign-in flows”. Dzięki temu możesz pominąć domyślne okno startowe Logto. Na przykład kliknięcie przycisku Google Sign-In od razu uruchamia flow autoryzacyjny Google, dając użytkownikowi szybsze i przystępniejsze logowanie.
Nadchodząca aktualizacja Logto: wsparcie dla integracji auth z AI
To tylko podstawowy przykład. Logto pracuje obecnie nad serwerami MCP działającymi bezpośrednio w Twoim IDE, pozwalającymi na pracę z Logto Console i Management API bez opuszczania środowiska programistycznego.
Dzięki temu będziesz mógł:
- Tworzyć i zarządzać użytkownikami
- Przeglądać i filtrować logi
- Konfigurować przepływy logowania i rejestracji
- Definiować zasoby API, uprawnienia i role
- Zarządzać aplikacjami i ustawieniami dostępu
- I więcej
Łącząc narzędzia lokalne z AI oraz infrastrukturą Logto, uwierzytelnianie przestaje być bolesnym krokiem integracyjnym i staje się naturalną częścią procesu tworzenia oprogramowania.