Schnelle Erstellung individueller Login-Flows mit Bolt.New und Logto
Lerne, wie du mit Bolt.new eine Full-Stack-App mit Logto-Authentifizierung erstellst. Vom Einrichten der Anmeldeprozesse über das Erstellen eines schwebenden Login-Panels bis hin zur Aktivierung sozialer Logins – dieser Leitfaden deckt sowohl die Einrichtung als auch die Anpassung ab.
GuamianProduct & Design
Verschwenden Sie keine Wochen mit Benutzerauthentifizierung
Bringen Sie sichere Apps schneller mit Logto auf den Markt. Integrieren Sie Benutzerauthentifizierung in Minuten und konzentrieren Sie sich auf Ihr Kernprodukt.
Bolt.new ist ein browserbasiertes Tool zum sofortigen Generieren und Ausführen von Full-Stack-Webanwendungen. Aufbauend auf der WebContainer-Technologie von StackBlitz bietet es Entwicklern einen sauberen, vor-konfigurierten Stack, der Next.js (App Router), Tailwind CSS, Supabase, Prisma und ShadCN UI umfasst. Die gesamte Umgebung läuft lokal im Browser, ohne Installationen, ohne Cloud-Build-Schritte und ohne Registrierung.
Im Gegensatz zu Tools, die auf KI-gestütztes Programmieren im bestehenden Projekt fokussieren, setzt Bolt.new am Anfang des Entwicklungsprozesses an. Es entfernt den Overhead beim Einrichten der Projektstruktur, Abhängigkeiten und lokalen Server und lässt dich in Sekunden von der Idee zum funktionierenden Prototyp gelangen.
Wie unterscheidet sich Bolt.new von Cursor oder Lovable?#
Während Tools wie Cursor und Lovable als KI-Copiloten im Code-Editor dienen, setzt Bolt.new woanders an: Sofortige Full-Stack-Projekterstellung und -ausführung.
Cursor verbessert Arbeitsabläufe in VS Code mit KI und hilft dir, Code in deiner bestehenden Umgebung zu bearbeiten oder zu generieren.
Bolt.new erstellt auf Basis eines Prompts oder Templates eine funktionierende App von Grund auf – und führt sie sofort im Browser mit WebContainers aus.
Es gibt keine Abhängigkeit von lokalen Tools oder entfernten Cloud-VMs. Alles läuft im Browser, mit nativer Unterstützung für Node.js, Paketverwaltung und Full-Stack-Entwicklung. Das macht es besonders geeignet für schnelles Prototyping und lokale Experimente, vor allem im Bereich KI oder SaaS.
Bolt.new ist für Entwickler konzipiert, die oft bei null anfangen, wie zum Beispiel:
Indie Hacker, die Produktideen validieren
KI-Builder, die Workflows oder Modelle testen
Gründer, die MVPs prototypisieren
Entwickler, die interne Tools oder Demos erstellen
Diese Nutzer sind in der Regel mit dem modernen Web-Stack vertraut und bevorzugen schnelle, schlanke und wenig meinungsbehaftete Tools. Bolt.new ist kein visueller Site-Builder und keine Tutorial-Plattform. Es setzt Grundkenntnisse in React und Full-Stack-Entwicklung voraus, beseitigt aber die Einstiegshürden beim Setup.
Bolt.new wurde vom Team hinter StackBlitz entwickelt, einer Firma, die 2017 von Eric Simons und Albert Pai gegründet wurde. StackBlitz war Vorreiter der WebContainers: eine browser-native WebAssembly-Laufzeitumgebung, mit der Node.js direkt im Browser ausgeführt werden kann. Dadurch entfiel die Notwendigkeit von Cloud-Servern oder lokalen Installationen für die Entwicklung moderner JavaScript-Anwendungen.
2023 stand StackBlitz an einem Wendepunkt. Das Wachstum hatte sich verlangsamt, und das Team verfolgte einen radikaleren Ansatz: Die Kombination von WebContainers mit KI, um voll funktionsfähige Anwendungen aus natürsprachigen Prompts zu generieren.
Aus diesem Experiment entstand Bolt.new, das im Oktober 2024 öffentlich gestartet wurde. Innerhalb weniger Wochen gewann es erheblich an Zuspruch von Entwicklern für seine Einfachheit und Geschwindigkeit. Das Tool kombinierte alles, was StackBlitz über Jahre aufgebaut hatte – Laufzeitisolierung, schnelle Abhängigkeitsinstallation und teilbare Umgebungen – mit einer KI-Oberfläche, die gängige Entwicklungsziele verstand.
Bolt.new markiert einen Wandel im Entwickler-Tooling: Anstatt nur schneller Code zu schreiben, konnten Entwickler jetzt mit bereits laufendem Code starten, der auf ihr Ziel zugeschnitten ist.
Anleitung: Eigene Login-Erfahrung mit Logto und Bolt.New hinzufügen#
In diesem Beispiel habe ich Bolt.new verwendet, um eine CMS-App zu erstellen. Ich habe die Prompt-Phase übersprungen und direkt die Aufgabe gestellt: Baue ein CMS mit Logto als Authentifizierungsanbieter.
Den Anweisungen zufolge musste ich zwei wichtige Informationen bereitstellen:
Logto-Endpunkt
App-ID
Da die App eine Single-Page-React-Anwendung ist, wird kein App-Secret benötigt. Der Agent erledigte den Rest: Er installierte das neueste Logto React SDK, setzte Authentifizierungskomponenten auf und verband alles.
Zum Abschluss ging ich zur Logto Cloud Console, erstellte eine neue Single-Page-Anwendung und kopierte den Logto-Endpunkt und die App-ID in Bolt.new.
Dann konfigurierte ich die Redirect-URIs sowie die Post-Sign-out-Redirect-URIs.
Wichtiger Hinweis: Da Bolt.new browserbasiert ist und nicht in einer lokalen IDE läuft, kannst du nicht http://localhost:3000/ als Redirect-URI verwenden. Stattdessen musst du unbedingt die Vorschau-URL im Bolt.new-Browsertab verwenden.
Logto bietet einen konfigurierbaren, vorgefertigten Anmeldeflow, den du in der Konsole anpassen kannst. Gehe zu Sign-in Experience > Sign-in & Sign-up und wähle dann deine bevorzugten Anmeldemethoden (E-Mail, Nutzername, Telefonnummer oder Social Login).
Sobald konfiguriert, werden Nutzer beim Starten des Anmeldeflows auf Logtos gehostete Anmeldeseite mit deinen ausgewählten Optionen umgeleitet. Der gesamte Authentifizierungsprozess wird von Logto verwaltet und die Nutzer nach der Anmeldung zurück zu deiner App geleitet.
Ich wollte noch einen Schritt weiter gehen und ein individuelleres Anmeldeerlebnis bieten, ähnlich wie es Perplexity macht. Anstatt auf eine separate Seite umzuleiten, platziere ich ein schwebendes Login-Panel direkt über der Produkt-Oberfläche. Das hält die Nutzer im Kontext, während im Hintergrund trotzdem Logto-Authentifizierung genutzt wird.
Ich habe einfach diesen Prompt verwendet:
Ich möchte die Anmeldeseite schöner gestalten, einfach ein schwebendes Panel in der rechten unteren Ecke. Mit zwei Buttons: einer für „Anmelden“ und einer für „Konto erstellen“. Jeder Button soll auf einen anderen Bildschirm weiterleiten, verwaltet von Logto. Nutzung des First-Screen-Experience aus der Logto-Doku https://docs.logto.io/end-user-flows/authentication-parameters/first-screen
Das Schöne: Beim Klick auf „Anmelden“ gelangt man direkt auf die Anmeldeseite, beim Klick auf „Konto erstellen“ öffnet sich sofort die Account-Anlage.
Du kannst dem Agenten Logtos Dokumentation zum direkten Anmelden zusammen mit einer Anweisung wie „soziale Anmeldungen hinzufügen“ geben. So kannst du den Standard-Logto-Landing-Screen überspringen. Bei einem Klick auf den Google-Anmelden-Button startet sofort der Google-Authentifizierungsprozess, was ein schnelleres und angenehmeres Login-Erlebnis ermöglicht.
Dies ist nur ein einfaches Beispiel. Logto arbeitet derzeit an MCP-Servern, die direkt in deiner IDE laufen, damit du mit der Logto-Konsole und der Management API interagieren kannst, ohne deine Entwicklungsumgebung zu verlassen.
Mit dieser Lösung kannst du:
Nutzer erstellen und verwalten
Logs einsehen und filtern
Login- und Registrierungsflows konfigurieren
API-Ressourcen, Berechtigungen und Rollen definieren
Anwendungen und Zugriffseinstellungen verwalten
Und mehr
Durch die Kombination von lokalen Tools mit KI und Logtos Infrastruktur wird Authentifizierung zu einem selbstverständlichen Bestandteil deines Entwicklungsprozesses, anstatt eines mühsamen Integrationsschritts.
