Utiliser Bolt.New et Logto pour créer rapidement vos propres flux de connexion

Qu'est-ce que Bolt.New#

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.

À qui s'adresse Bolt.new ?#

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.

Histoire et évolution de Bolt.new#

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#

Enregistrer une app dans la console Logto#

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 :

1. Endpoint Logto
2. 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.

Ajouter des flux sociaux#

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 :

1. Créer et gérer des utilisateurs
2. Voir et filtrer les logs
3. Configurer les flux de connexion et d'inscription
4. Définir des ressources d'API, des permissions et des rôles
5. Gérer les applications et les paramètres d'accès
6. 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.