Utiliser Bolt.New et Logto pour créer rapidement vos propres flux de connexion
Apprenez à utiliser Bolt.new pour créer une application full-stack avec l'authentification Logto. De la configuration des flux de connexion à la création d'un panneau de connexion flottant et à l'activation des connexions sociales, ce guide couvre à la fois la mise en place et la personnalisation.
GuamianProduct & Design
Arrêtez de perdre des semaines sur l'authentification des utilisateurs
Lancez des applications sécurisées plus rapidement avec Logto. Intégrez l'authentification des utilisateurs en quelques minutes et concentrez-vous sur votre produit principal.
Bolt.new est un outil basé sur le navigateur pour générer et exécuter instantanément des applications web full-stack. Basé sur la technologie WebContainer de StackBlitz, il offre aux développeurs une stack propre et pré-configurée qui inclut Next.js (App Router), Tailwind CSS, Supabase, Prisma et ShadCN UI. L'ensemble de l'environnement s'exécute localement dans le navigateur, sans installation, sans étapes de build cloud et sans inscription nécessaire.
Contrairement aux outils axés sur l'assistance IA dans un projet existant, Bolt.new se concentre sur le tout début du processus de développement. Il supprime la charge liée à la mise en place de la structure du projet, des dépendances et des serveurs locaux, permettant de passer de l'idée au prototype fonctionnel en quelques secondes.
En quoi Bolt.new est-il différent de Cursor ou Lovable ?#
Alors que des outils comme Cursor et Lovable servent de copilotes IA dans votre éditeur de code, Bolt.new mise sur autre chose : la génération et l'exécution instantanée de projets full-stack.
Cursor améliore les workflows de VS Code avec de l'IA, vous aidant à éditer ou générer du code dans votre environnement existant.
Bolt.new crée une application fonctionnelle à partir de zéro, basée sur une demande ou un modèle, et l'exécute instantanément dans le navigateur grâce aux WebContainers.
Aucune dépendance sur des outils locaux ou des VM cloud distantes. Tout fonctionne dans le navigateur avec un support natif pour Node.js, la gestion de packages et le développement full-stack. Cela rend l'outil particulièrement adapté pour prototyper rapidement et expérimenter localement, notamment dans des contextes IA ou SaaS.
Bolt.new est destiné aux développeurs qui démarrent souvent de zéro, tels que :
Les indie hackers testant des idées de produits
Les créateurs en IA qui expérimentent des workflows ou intègrent des modèles
Les fondateurs prototypant des MVP
Les ingénieurs réalisant des outils internes ou des démos
Ces utilisateurs maîtrisent généralement la stack web moderne et privilégient des outils rapides, propres et non prescriptifs. Bolt.new n'est ni un builder de site visuel ni une plateforme guidée par tutoriels. Il suppose que vous connaissez React et le développement full-stack mais supprime les frictions d'installation.
Bolt.new a été créé par l'équipe derrière StackBlitz, une société fondée en 2017 par Eric Simons et Albert Pai. StackBlitz a inventé les WebContainers, un runtime WebAssembly natif au navigateur, capable d'exécuter des environnements Node.js directement dans le navigateur. Cela a supprimé le besoin de serveurs cloud ou d'installations locales pour développer des applis JavaScript modernes.
En 2023, StackBlitz est confronté à un tournant. La croissance ralentit et l'équipe explore une voie plus radicale : combiner les WebContainers à l'IA pour générer des applications complètes à partir de prompts en langage naturel.
Cette expérimentation a donné naissance à Bolt.new, lancé publiquement en octobre 2024. En quelques semaines, l'outil gagne en traction auprès des développeurs grâce à sa simplicité et sa rapidité. L'outil combinait tout ce que StackBlitz avait construit au fil des années — isolation du runtime, installation rapide des dépendances, environnements partageables —, avec une interface IA comprise des besoins classiques du développement.
Bolt.new a marqué un tournant dans l'outillage des développeurs : au lieu de simplement écrire du code plus vite, ils pouvaient désormais démarrer avec du code déjà en fonctionnement, aligné sur leur intention.
Guide : utiliser Logto et Bolt.New pour ajouter une expérience de connexion personnalisée#
Dans cet exemple, j'ai utilisé Bolt.new pour créer une application CMS. J'ai sauté l'étape du prompt et suis allé droit au but : j'ai demandé à l'agent de bâtir un CMS en utilisant Logto comme fournisseur d'authentification.
Selon les instructions, je devais fournir deux informations clés :
Endpoint Logto
ID d'application
Comme l'application est une app React monopage, pas besoin de secret d'application. L'agent s'est chargé du reste : il a installé la dernière Logto React SDK, mis en place les composants d'authentification et tout relié.
Pour finir la configuration, je suis allé sur la console Logto Cloud, j'ai créé une application monopage, puis copié l'endpoint Logto ainsi que l'ID de l'app dans Bolt.new.
Configurez ensuite les URI de redirection et les URI de redirection post-déconnexion.
Un détail important : puisque Bolt.new fonctionne dans le navigateur et non dans un IDE local, tu ne peux pas utiliser http://localhost:3000/ comme URI de redirection. Utilise à la place l'URL de prévisualisation affichée dans l'onglet du navigateur Bolt.new.
Personnaliser l'expérience de connexion pré-construite de Logto#
Logto propose un flux de connexion pré-construit et configurable que tu peux personnaliser dans la console. Pour commencer, va dans Sign-in Experience > Sign-in & Sign-up, puis sélectionne les méthodes de connexion souhaitées (email, nom d'utilisateur, numéro de téléphone ou connexion sociale, par exemple).
Une fois configuré, déclencher le flux de connexion redirigera l'utilisateur vers la page de connexion hébergée par Logto avec les options sélectionnées. Tout le processus d'authentification est géré par Logto, et les utilisateurs sont renvoyés vers votre app après s'être connectés.
Créer un panneau de connexion flottant au-dessus de ton produit#
Maintenant, je veux aller plus loin et créer une expérience de connexion plus personnalisée, comme chez Perplexity. Au lieu de rediriger vers une page séparée, je vais placer un panneau de connexion flottant juste au-dessus de l'interface de l'application. Cela permet de garder l'utilisateur dans le contexte tout en profitant du flux d'authentification Logto en arrière-plan.
J'utilise donc ce prompt :
Je veux améliorer la page de connexion, juste un panneau flottant en bas à droite. Avec deux boutons : un pour "Connexion" et un pour "Créer un compte". Chaque bouton doit rediriger vers un écran différent, géré par Logto. En utilisant l'expérience first-screen documentée dans Logto https://docs.logto.io/end-user-flows/authentication-parameters/first-screen
Le bon côté, c'est que lorsque tu cliques sur Connexion, tu vas directement sur la page de connexion. Si tu cliques sur Créer un compte, ça ouvre directement l'écran de création de compte.
Tu peux fournir à l'agent la documentation Logto pour la connexion directe ainsi qu'un prompt du type "ajouter des flux de connexion sociale". Cela permet de passer l'écran d'accueil Logto par défaut. Par exemple, cliquer sur le bouton Connexion Google lancera directement le flux d'authentification Google, offrant une expérience de connexion plus rapide et fluide.
La prochaine mise à jour de Logto prendra en charge l'intégration de l'auth par IA#
Ceci n'est qu'un exemple de base. Logto développe actuellement des serveurs MCP qui tournent directement dans ton IDE, te permettant d'interagir avec la console Logto et l'API de gestion sans quitter ton environnement de développement.
Avec cette configuration, tu pourras :
Créer et gérer des utilisateurs
Voir et filtrer les logs
Configurer les flux de connexion et d'inscription
Définir des ressources d'API, des permissions et des rôles
Gérer les applications et les paramètres d'accès
Et plus encore
En combinant des outils locaux, l'IA et l'infrastructure Logto, l'authentification ne sera plus une étape pénible d'intégration, elle fera partie de ton flux de développement naturel.
