Ajouter l'inscription, la connexion et les rôles utilisateur

Permettre aux utilisateurs de créer des comptes et de se connecter, et protéger les pages appropriées.

Durée: ~20 minutes Difficulté: Intermediate Fonctionne avec: Base44 / Lovable / v0

Quand l'utiliser

Lorsque votre application nécessite des comptes, un espace membre ou une section réservée aux administrateurs.

Avant de commencer

  • Une application qui existe déjà (exécutez d'abord l'invite MVP si ce n'est pas le cas).
  • Décidez avant de commencer : qui peut s'inscrire (tout le monde, ou seulement les personnes que vous invitez ?) et ce que les différents rôles devraient pouvoir voir. Notez-le : l'invite vous le demandera.
  • Base44 et Lovable incluent des systèmes de connexion ; sur v0, vous devrez connecter un service externe, ce qui prend plus de temps.

Le prompt

Ces prompts fonctionnent mieux en anglais — collez-les tels quels, même sur les pages traduites.

Add secure user accounts to my app.
Outcome: visitors can sign up and log in, and the right pages are protected.
Requirements:
- Email + password sign-up and login, plus "Sign in with Google".
- A "forgot password" reset flow by email.
- Two roles — [regular user] and [admin] — where only admins can open [the admin area / these pages].
- A profile page where a user can edit [name, email, photo].
- Require login to view these pages: [list the private pages].
Must-haves (don't skip): validate all inputs, store passwords hashed, never expose secret keys in the frontend, and show clear messages for a wrong password, an email that already exists, and expired reset links. Add basic rate limiting on login and password reset.
Build it end to end, then tell me what changed and exactly how to test each flow.

Vous construisez déjà ? Collez ceci dans votre projet. Vous partez de zéro ? Ouvrez un compte gratuit sur un outil compatible ci-dessous.

Créez-le sur

Comment nous gagnons de l’argent

Ce que cela crée

  • Écrans d'inscription, de connexion et de réinitialisation de mot de passe
  • Une liste stockée de vos utilisateurs que vous pouvez consulter
  • Séparation des rôles, afin que différentes personnes voient différentes choses
  • Pages protégées qui redirigent toute personne non autorisée

Vérifiez que ça a marché

Collez le prompt, attendez la fin de la construction, puis vérifiez ceci — en langage simple, sans contrôle technique :

  • Vous pouvez créer un compte de test et vous connecter avec
  • La déconnexion et la reconnexion fonctionnent, et l'e-mail de réinitialisation de mot de passe arrive bien
  • Un visiteur déconnecté qui ouvre une page protégée est envoyé vers l'écran de connexion au lieu de voir le contenu
  • Votre utilisateur de test apparaît dans la liste des utilisateurs de votre application
  • Si vous avez demandé un rôle administrateur, votre compte administrateur voit les éléments d'administration tandis qu'un compte de test normal ne les voit pas

Il manque quelque chose ? C'est normal — demandez-le dans un court message de suivi plutôt que de relancer tout le prompt.

Étapes suivantes

Vérifier que les verrous sont bien effectifs

Immédiatement après que la connexion fonctionne

Review every page and every piece of data in the app and list which of them a logged-out visitor, a normal logged-in user, and an admin can each reach. Then fix anything a normal user or logged-out visitor can reach that they should not — the restriction must be enforced by the access rules, not by hiding links.

Vous saurez que ça a marché quand : Vous obtenez une liste claire de qui peut voir quoi, et les tests avec un compte normal le confirment.

Ajouter une page de profil

Une fois que les utilisateurs existent et que vous souhaitez qu'ils se sentent chez eux

Add a profile page where a logged-in user can see and edit their own details: [NAME, PHOTO, PHONE, WHATEVER APPLIES]. They can only ever see and edit their own profile. Add a link to it in the account menu.

Vous saurez que ça a marché quand : Un utilisateur connecté peut mettre à jour ses propres détails et ne peut pas ouvrir le profil de quelqu'un d'autre.

Inscription sur invitation uniquement

Pour les outils internes ou les clients privés

Turn off public sign-up. Instead, let an admin invite people by email from an admin screen; invited people get a link to set their password and join. Everyone else who tries to sign up sees a short message explaining the app is invite-only.

Vous saurez que ça a marché quand : Un étranger ne peut pas créer de compte, mais une adresse e-mail invitée peut le faire.

Attention à

  • Testez avec un second compte, pas seulement le vôtre. Tout semble autorisé lorsque vous êtes l'administrateur. Créez un utilisateur simple et essayez d'accéder aux pages d'administration : c'est le vrai test.
  • Ne construisez jamais votre propre système de mot de passe. Utilisez la connexion intégrée de la plateforme ; l'invite demande exactement cela. L'authentification artisanale est l'erreur grave la plus courante dans les applications créées par IA.
  • « Caché » n'est pas « protégé ». Supprimer un lien du menu n'empêche personne de taper l'adresse. L'invite demande de vraies règles d'accès ; confirmez qu'elles tiennent en testant avec le compte déconnecté.

Notes par plateforme

Base44 dispose d'une authentification et d'une gestion des utilisateurs intégrées. Lovable peut utiliser l'authentification native de Lovable Cloud ou Supabase Auth en option. v0 construit la logique de connexion et de permissions autour d'un fournisseur d'authentification sélectionné, souvent connecté via Vercel ou le SDK du fournisseur. Sur toutes les plateformes, protégez les données stockées ainsi que les pages, et testez chaque rôle avec un compte utilisateur classique.

Dépensez moins de crédits

Chaque plateforme vous facture le travail que fait son IA — la habitude la moins chère est donc de réfléchir avant de construire. Ces six règles éliminent l'essentiel du gaspillage, quelle que soit la plateforme.

  1. Planifiez d'abord dans un chat gratuit. Esquissez le tout dans ChatGPT, Claude ou Gemini — pages, fonctionnalités, ce que chaque formulaire collecte, l'apparence voulue. Réfléchir là-bas est gratuit ; réfléchir dans un builder est facturé.
  2. Partez d'un prompt écrit, pas d'une phrase. « Fais-moi un site » est la phrase la plus chère de la construction avec l'IA. Un premier prompt complet — comme ceux de ce site — évite des dizaines de corrections.
  3. Ne soyez pas paresseux sur les détails. Chaque détail omis revient en correction payante. Nom de l'entreprise, couleurs, chaque page, chaque champ de formulaire, ce qui se passe après l'envoi — mettez tout dans le premier prompt.
  4. Ensuite, un changement par message. « Corrige l'en-tête, et le formulaire, et les couleurs » crée un enchevêtrement plus coûteux à démêler que ce qu'il a économisé.
  5. Bloqué ? Arrêtez de rustiner. Si la même correction échoue environ trois fois, n'en envoyez pas une quatrième — décrivez plutôt l'état final souhaité de toute la section dans un nouveau message.
  6. Commencez gratuitement. Passez au payant quand il vous en faut plus. Utilisez le quota gratuit pour créer et explorer votre première version. Passez au payant quand vous avez besoin de plus d’utilisation ou de fonctionnalités payantes, et vérifiez le coût des services connectés avant le lancement.

Les prompts de cette page sont écrits pour faire l'essentiel de ce travail à votre place — c'est tout leur intérêt.

Lire le guide complet
authentication login users roles security

Dernière vérification: 2026-08-27

FAQ

Nous utilisons des cookies pour analyser le trafic et suivre les clics d'affiliation. En continuant, vous acceptez notre Politique de Confidentialité.