Coder avec Vibe en utilisant Cursor et Logto pour construire rapidement ton application et gérer les flux de connexion
Apprends comment coder sur un coup de tête une application de galerie photo avec Cursor et ajouter la connexion avec Logto en quelques minutes. De l’interface utilisateur à l’authentification, c’est rapide, simple et boosté par l’IA.
Product & Design
Le vibe coding devient de plus en plus populaire grâce à des outils puissants comme Cursor et Windsurf. Même avec peu d'expérience, tu peux rapidement créer ta propre application.
Pour beaucoup de développeurs et de créateurs, mettre en place des flux de connexion peut être compliqué. Mais avec MCP et les fonctionnalités contextuelles intégrées dans les IDE modernes, ajouter l’authentification à ton application n’est plus une tâche complexe, même si tu n’es pas développeur.
Dans ce tutoriel, je vais te montrer :
- Comment construire une application web en vibe coding avec Cursor.
- Comment ajouter l’authentification (flux de connexion) avec Logto pour protéger ton contenu.
Construis une application de galerie photo dans Cursor
D'abord, j’ouvre simplement un chat dans Cursor et je tape la commande :
“Crée une application page unique avec Next.js Page Router.” Cursor s’occupe du reste et la génère pour moi.
Faisons-en une galerie photo. Il m’aide à récupérer plusieurs photos depuis Unsplash et les organiser.
Ajoute l’authentification à ton application de galerie photo
Traditionnellement, tu aurais dû lire la doc et parcourir le SDK à la main pour compléter l’intégration. Mais avec Cursor, tu peux profiter pleinement de l’IA pour rendre le processus beaucoup plus fluide et rapide.
Ajoute la doc Logto comme contexte
Tu peux ajouter un flux de connexion pour protéger ton application. Cursor prend en charge les commandes avec du contexte, donc tu peux ajouter la documentation Logto comme référence. Cela te permet d’intégrer facilement l’authentification en utilisant le SDK Logto pour Next.js (Page Router).
Finalise l’intégration
Comme tu peux le voir, il s’appuie sur le guide Quick Start pour te dire quoi faire ensuite. À la deuxième étape, il me demande de configurer des paramètres comme appId, endpoint, etc. Pour les récupérer, je dois aller sur Logto Cloud et enregistrer une nouvelle app.
Il me demande aussi de saisir http://localhost:3000/api/auth/callback/logto comme URI de redirection.
Saisis l’URI de redirection dans la console Logto Cloud
Récupère ces valeurs et enregistre-les dans ton fichier de configuration.
Donc je fournis simplement l’ID de l’app, le Secret de l’app et le endpoint Logto à Cursor, et il met à jour le code pour moi.
Maintenant, je lance le serveur et j’obtiens une page d’accueil simple Se connecter. Quand je clique sur Se connecter, ça me redirige vers la page de connexion Logto.
Oh oui ! La redirection vers la page de connexion Logto a réussi !
Améliore l’interface et teste tout le flux
L’écran initial était trop basique, alors j’ai demandé à Cursor d’améliorer le design.
Voici ce qu’il m’a proposé :
Il est temps de tester tout le flux complet.
Au passage, Logto inclut un service email intégré, donc tu peux suivre tout le processus de vérification email nativement.
Une fois le flux terminé, tu es bien connecté et tu peux voir ton identifiant utilisateur affiché à l’écran.
Vérifions maintenant si cet utilisateur a bien été ajouté à la Console Logto… Youpi ! Il y est ! 🎉
Grâce à la documentation de Logto, aux bonnes pratiques et à la programmation assistée façon Copilot, l’intégration devient simple même pour ceux qui ont peu d’expérience technique. Mettre en place un flux de connexion n’est plus une tâche lourde ou fastidieuse.
Prochaine itération
Ceci n’est qu’un petit exemple pratique. Logto développe activement 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 ça, tu pourras :
- Créer et gérer les utilisateurs
- Récupérer les logs
- Configurer et gérer tes flux de connexion
- Concevoir et gérer l’autorisation (ex. : ressources API, permissions et rôles)
- Gérer les applications et ressources
- Et bien plus encore
Reste à l’écoute : avec la puissance de l’IA et l’infrastructure robuste de Logto, l’intégration de l’auth n’est plus un défi !