Bolt.New en Logto gebruiken om snel je eigen login flows te bouwen
Leer hoe je Bolt.new gebruikt om een full-stack app te bouwen met Logto-authenticatie. Van het configureren van inlogflows tot het creëren van een zwevend loginpaneel en het inschakelen van sociale logins; deze gids behandelt zowel setup als maatwerk.
Product & Design
Wat is Bolt.New
Bolt.new is een browser-gebaseerde tool waarmee je direct full-stack webapplicaties kunt genereren en draaien. Gebouwd bovenop StackBlitz’s WebContainer-technologie biedt het ontwikkelaars een schone, vooraf geconfigureerde stack met Next.js (App Router), Tailwind CSS, Supabase, Prisma en ShadCN UI. De hele omgeving draait lokaal in de browser – geen installaties, geen cloud-buildstappen en geen registratie vereist.
In tegenstelling tot tools die AI-assistentie bieden binnen een bestaand project, richt Bolt.new zich op het begin van het ontwikkelproces. Het haalt alle rompslomp weg van het opzetten van een projectstructuur, dependencies en lokale servers, waardoor je in seconden van idee naar werkend prototype kunt gaan.
Hoe verschilt Bolt.new van Cursor of Lovable?
Waar tools als Cursor en Lovable AI-copilots zijn binnen je code-editor, doet Bolt.new iets heel anders: directe, full-stack projectgeneratie en -uitvoering.
- Cursor verbetert VS Code-workflows met AI, waarmee je code kunt bewerken of genereren in je bestaande omgeving.
- Bolt.new maakt direct vanuit een prompt of template een werkende app en draait deze onmiddellijk in de browser met behulp van WebContainers.
Je bent dus niet afhankelijk van lokale tools of cloud-VM’s; alles draait in de browser met native support voor Node.js, package management en full-stack development. Dit maakt het ideaal voor snel prototypen en lokaal experimenteren, vooral in AI- of SaaS-contexten.
Voor wie is Bolt.new bedoeld?
Bolt.new is ontworpen voor ontwikkelaars die vaak vanaf nul beginnen zoals:
- Indie hackers die productideeën valideren
- AI-bouwers die workflows testen of modellen integreren
- Founders die MVP’s prototypen
- Engineers die interne tools of demo’s maken
Deze gebruikers zijn meestal vertrouwd met de moderne webstack en geven de voorkeur aan snelle, schone, niet-opdringerige tools. Bolt.new is geen visuele sitebouwer of tutorial-gedreven platform. Het veronderstelt kennis van React en full-stack development, maar haalt wel alle set-up rompslomp weg.
De geschiedenis en evolutie van Bolt.new
Bolt.new is gemaakt door het team achter StackBlitz, een bedrijf opgericht in 2017 door Eric Simons en Albert Pai. StackBlitz heeft WebContainers ontwikkeld – een browser-native WebAssembly-runtime waarmee je Node.js-omgevingen direct in de browser kunt draaien. Daardoor waren cloud servers of lokale installaties niet meer nodig bij het ontwikkelen van moderne JavaScript-applicaties.
In 2023 kwam StackBlitz op een kruispunt. De groei stagneerde en het team besloot tot een radicalere richting: WebContainers combineren met AI om vanuit natuurlijke taalprompts volledig functionele applicaties te genereren.
Dit experiment werd Bolt.new en werd publiek gelanceerd in oktober 2024. Binnen enkele weken kreeg het veel tractie onder developers vanwege de eenvoud en snelheid. De tool combineerde alles wat StackBlitz had gebouwd – runtime-isolatie, snelle dependency-installatie en deelbare omgevingen – met een AI-interface die gangbare ontwikkeldoelen begreep.
Bolt.new betekende een verschuiving in developer tooling: in plaats van alleen maar sneller code te schrijven, kun je nu starten met code die al draait, afgestemd op jouw intentie.
Gids: Gebruik Logto en Bolt.New om een aangepaste login-ervaring toe te voegen
Registreer een app in de Logto-console
In dit voorbeeld heb ik Bolt.new gebruikt om een CMS-app te maken. Ik sloeg de promptfase over en ging direct naar de kern: ik heb het agent gevraagd om een CMS te bouwen met Logto als authenticatieprovider.
Volgens de instructies moest ik twee belangrijke dingen opgeven:
Logto endpointApp ID
Omdat de app een single-page React-applicatie is, is er geen app-secret nodig. De agent regelde de rest: installeerde de laatste Logto React SDK, zette authenticatiecomponenten op en koppelde alles aan elkaar.
Om de setup af te ronden ging ik naar de Logto Cloud Console, maakte een nieuwe single-page application aan en kopieerde de Logto-endpoint en App ID naar Bolt.new.
Configureer vervolgens de Redirect URI’s en Post sign-out redirect URI’s.
Let op: omdat Bolt.new browser-gebaseerd is en geen lokale IDE, kun je niet http://localhost:3000/ gebruiken als redirect URI. Gebruik in plaats daarvan altijd de preview URL uit het Bolt.new-browsertabblad.
Pas de Logto vooraf gebouwde inlogervaring aan
Logto biedt een configureerbare, vooraf gebouwde sign-in flow die je in de Console kunt aanpassen. Ga hiervoor naar Sign-in Experience > Sign-in & Sign-up en kies je gewenste inlogmethode(s) (zoals e-mail, gebruikersnaam, telefoonnummer of sociale login).
Zodra dit is ingesteld, zal het uitvoeren van de sign-in flow gebruikers automatisch doorsturen naar Logto’s gehoste loginpagina met de door jou gekozen opties. Het volledige authenticatieproces wordt verzorgd door Logto, en na het inloggen keren gebruikers terug naar je app.
Maak een zwevend login-paneel boven je product
Nu wil ik nog een stap verder gaan en een meer aangepaste loginervaring bouwen, vergelijkbaar met wat Perplexity biedt. In plaats van door te sturen naar een aparte pagina, plaats ik een zwevend aanmeldingspaneel direct bovenop de product-UI. Zo blijven gebruikers in context terwijl Logto-authenticatie verder op de achtergrond draait.
Dus gebruik ik gewoon deze prompt:
Ik wil de inlogpagina mooier maken, gewoon een zwevend paneel rechtsonder. Met twee knoppen: één voor “Inloggen” en één voor “Account aanmaken.” Elke knop zou moeten doorverwijzen naar een ander scherm, afgehandeld door Logto. Gebruik de first-screen experience zoals beschreven in Logto https://docs.logto.io/end-user-flows/authentication-parameters/first-screen
Het mooie is: als je op Inloggen drukt, ga je direct naar de loginpagina. Klik je op Account aanmaken, dan ga je meteen naar het account-aanmaakscherm.
Voeg sociale inlogflows toe
Je kunt de agent voorzien van Logto’s directe inlogdocumentatie samen met een prompt als “voeg sociale inlogflows toe”. Hiermee kun je het standaard Logto-welkomstscherm overslaan. Bijvoorbeeld: als je op de Google Sign-In-knop klikt, start direct het Google-authenticatieproces, waardoor gebruikers sneller en prettiger kunnen inloggen.
Logto’s aanstaande update ondersteunt AI-gedreven auth-integratie
Dit is slechts een basisvoorbeeld. Logto bouwt momenteel aan MCP-servers die direct in je IDE draaien. Zo kun je werken met de Logto Console en Management API zonder je ontwikkelomgeving te verlaten.
Met deze setup kun je straks:
- Gebruikers aanmaken en beheren
- Logs bekijken en filteren
- Inlog- en registratieflows configureren
- API-resources, permissions en rollen definiëren
- Applicaties en toegangsinstellingen beheren
- En meer
Door lokale tooling te combineren met AI en de infrastructuur van Logto, wordt authenticatie geen lastige integratie meer, maar juist een natuurlijk onderdeel van je ontwikkelproces.