Använd Bolt.New och Logto för att snabbt bygga dina egna inloggningsflöden
Lär dig hur du använder Bolt.new för att bygga en fullstack-app med Logto-autentisering. Guiden täcker allt från att konfigurera inloggningsflöden till att skapa ett svävande inloggningspanel och aktivera sociala inloggningar, hela vägen från grundläggande uppsättning till anpassning.
GuamianProduct & Design
Sluta slösa veckor på användarautentisering
Lansera säkra appar snabbare med Logto. Integrera användarautentisering på några minuter och fokusera på din kärnprodukt.
Bolt.new är ett webbläsarbaserat verktyg för att snabbt generera och köra fullstack-webbapplikationer. Byggd ovanpå StackBlitz: WebContainer-teknologi ger den utvecklare en ren, förkonfigurerad stack som inkluderar Next.js (App Router), Tailwind CSS, Supabase, Prisma och ShadCN UI. Hela miljön körs lokalt i webbläsaren — inga installationer, inga moln-byggsteg, inget konto behövs.
Till skillnad från verktyg som fokuserar på AI-assisterad kodning i ett befintligt projekt, fokuserar Bolt.new på början av utvecklingsprocessen. Den tar bort överflödet med att sätta upp projektstruktur, beroenden och lokala servrar, och låter dig gå från idé till fungerande prototyp på några sekunder.
Hur skiljer sig Bolt.new från Cursor eller Lovable?#
Medan verktyg som Cursor och Lovable fungerar som AI-copiloter i din kodredigerare, fokuserar Bolt.new på något helt annat: direkt, fullstack-generering och körning av projekt.
Cursor förbättrar VSCode-arbetsflöden med AI och hjälper dig redigera eller generera kod i din befintliga miljö.
Bolt.new skapar en fungerande app från noll baserat på en prompt eller mall och kör den direkt i webbläsaren med hjälp av WebContainers.
Det finns inget beroende av lokala verktyg eller fjärrstyrda moln-VM:er. Allt körs direkt i webbläsaren med inbyggt stöd för Node.js, pakethantering och fullstackutveckling. Det här gör det särskilt väl lämpat för snabb prototypframställning och lokal-först-experimentering, speciellt i AI- eller SaaS-projekt.
Bolt.new är till för utvecklare som ofta startar från början, som till exempel:
Indiehackers som vill validera produktidéer
AI-byggare som testar arbetsflöden eller integrerar modeller
Grundare som prototypar MVP:er
Ingenjörer som skapar interna verktyg eller demos
Dessa användare är vanligtvis bekväma med modern webbstack och föredrar verktyg som är snabba, rena och inte föreskriver ett visst arbetssätt. Bolt.new är inte en visuell webbplatsbyggare eller en tutorial-plattform. Funktionen förutsätter att du har grundläggande kunskap om React och fullstackutveckling, men tar bort friktionen i setupen.
Bolt.new skapades av teamet bakom StackBlitz, ett företag som grundades 2017 av Eric Simons och Albert Pai. StackBlitz pionjärade WebContainers, en webbläsar-native WebAssembly-miljö som kan köra Node.js direkt i webbläsaren. Detta tog bort behovet av molnservrar eller lokala installationer för att utveckla moderna JavaScript-applikationer.
År 2023 stod StackBlitz inför ett vägskäl. Tillväxten hade saktat in och teamet utforskade en radikal riktning: att kombinera WebContainers med AI för att generera fullt fungerande applikationer utifrån naturliga språk-promptar.
Detta experiment blev Bolt.new, som lanserades offentligt i oktober 2024. Inom några veckor fick tjänsten mycket uppmärksamhet bland utvecklare tack vare dess enkelhet och snabbhet. Verktyget kombinerade allt som StackBlitz hade byggt under flera år — runtime-isolering, snabb installation av beroenden och delningsbara miljöer — med ett AI-gränssnitt som förstod vanliga mål inom utveckling.
Bolt.new markerade ett skifte för utvecklarverktyg: istället för att bara skriva kod snabbare, kunde utvecklare nu börja med kod som redan kördes, anpassad efter deras intentioner.
Guide: Använd Logto och Bolt.New för att lägga till en egen inloggningsupplevelse#
I det här exemplet använde jag Bolt.new för att skapa en CMS-app. Jag hoppade över prompt-fasen och gick rakt på sak: jag bad agenten bygga ett CMS med Logto som autentiseringsleverantör.
Enligt instruktionerna behövde jag ange två viktiga saker:
Logto-endpoint
App ID
Eftersom appen är en enkel-sida React-applikation behövs ingen app-hemlighet. Agenten tog hand om resten: den installerade den senaste Logto React SDK, satte upp autentiseringskomponenter och kopplade ihop allt.
För att slutföra konfigurationen gick jag till Logto Cloud Console, skapade en ny single-page-applikation och kopierade Logto-endpoint och App ID till Bolt.new.
Konfigurera sedan Redirect URIs och redirect URIs efter utloggning.
En viktig detalj: eftersom Bolt.new är webbläsarbaserad och inte en lokal IDE, kan du inte använda http://localhost:3000/ som redirect URI. Använd istället förhandsgranskningsadressen som visas i Bolt.news webbläsarflik.
Logto erbjuder ett förkonfigurerbart, färdigt inloggningsflöde som du kan anpassa i Konsolen. För att börja, gå till Sign-in Experience > Sign-in & Sign-up och välj dina föredragna metoder (t.ex. e-post, användarnamn, telefonnummer eller social inloggning).
När det är konfigurerat kommer aktivering av inloggningsflödet att omdirigera användarna till Logtos värdade inloggningssida med dina valda alternativ. Hela autentiseringsprocessen hanteras av Logto, och användarna skickas tillbaka till din app efter inloggning.
Skapa en svävande inloggningspanel ovanför produkten#
Nu vill jag gå ett steg längre och bygga en ännu mer anpassad inloggningsupplevelse, liknande det Perplexity erbjuder. Istället för att skicka användaren vidare till en separat sida placerar jag en svävande inloggningspanel direkt ovanpå produktens gränssnitt. Det gör att användarna stannar i kontexten samtidigt som Logtos autentiseringsflöde används i bakgrunden.
Så jag använde bara denna prompt:
Jag vill göra inloggningssidan snyggare, bara en svävande panel nere i högra hörnet. Med två knappar: en för “Logga in” och en för “Skapa konto”. Varje knapp ska gå till en egen skärm, hanterad av Logto. Med first-screen experience enligt dokumentationen för Logto https://docs.logto.io/end-user-flows/authentication-parameters/first-screen
Det fina är att när du klickar på Logga in hamnar du direkt på inloggningssidan. Om du klickar på Skapa konto kommer du direkt till kontoskapningsvyn.
Du kan ge agenten Logtos direkta inloggningsdokumentation tillsammans med en prompt som “lägg till sociala inloggningsflöden”. På så sätt kan du hoppa över Logtos standardsida. Till exempel, när du klickar på Google-inloggning aktiveras Google-autentiseringen direkt, vilket ger användarna en snabbare och smidigare inloggningsupplevelse.
Logtos kommande uppdatering kommer att stödja AI-driven auth-integration#
Det här är bara ett grundexempel. Logto bygger just nu MCP-servrar som körs direkt i din IDE, så att du kan arbeta med Logto Console och Management API utan att lämna din utvecklingsmiljö.
Med denna uppsättning kan du:
Skapa och hantera användare
Visa och filtrera loggar
Konfigurera login- och registreringsflöden
Definiera API-resurser, behörigheter och roller
Hantera applikationer och åtkomstinställningar
Och mer
Genom att kombinera lokala verktyg med AI och Logtos infrastruktur blir autentisering inte längre ett smärtsamt integrationssteg, utan en naturlig del av din utvecklingsprocess.
