Ajouter l’inscription, la connexion et des comptes utilisateur à une app ne signifie pas nécessairement devoir configurer manuellement l’authentification, les sessions, les routes protégées et les autorisations. Avec Coderblock, vous pouvez décrire dans le chat le comportement souhaité et laisser l’agent s’occuper de la configuration technique.

Dans ce tutoriel, vous apprendrez à :

• ajouter l’inscription et la connexion ;
• créer un espace personnel protégé ;
• gérer les sessions et les routes protégées ;
• associer les données à l’utilisateur authentifié ;
• configurer des rôles comme client et administrateur ;
• protéger les données avec Row Level Security ;
• ajouter, si nécessaire, la connexion via les réseaux sociaux ;
• tester le fonctionnement de l’authentification avant de publier l’app.

Avant de commencer

Ouvrez le projet Coderblock auquel vous souhaitez ajouter l’authentification. Vous pouvez partir d’une app existante ou créer un nouveau projet en décrivant en langage naturel ce que vous souhaitez réaliser.

Par exemple :

Crée une plateforme pour coachs sportifs sur laquelle chaque client peut créer un compte, consulter ses programmes d’entraînement et suivre ses progrès. Les coachs doivent disposer d’un espace d’administration pour gérer leurs clients.

Si l’app existe déjà, vous pouvez demander directement l’ajout de comptes :

Ajoute l’inscription et la connexion pour les utilisateurs. Chaque utilisateur doit disposer d’un espace personnel protégé après s’être connecté.

Coderblock utilise Supabase Auth pour gérer l’authentification et configure les éléments nécessaires du projet, notamment les sessions, les routes protégées et les politiques d’accès à la base de données.

---

1. Ajoutez l’inscription et la connexion

Le moyen le plus simple de commencer consiste à décrire à l’agent le parcours que vous souhaitez proposer aux utilisateurs. Par exemple :

Ajoute une page d’inscription et une page de connexion. Les utilisateurs doivent pouvoir créer un compte avec leur adresse e-mail et un mot de passe, puis accéder à leur espace personnel après s’être connectés.

L’agent configure les pages nécessaires et relie le parcours à Supabase Auth. Vous n’avez pas besoin de créer manuellement une table pour les mots de passe ni d’implémenter vous-même les JWT ou le hachage des mots de passe. Une fois la modification terminée, consultez l’aperçu en direct et essayez de :

1. créer un nouveau compte ;
2. vous connecter ;
3. vous déconnecter ;
4. vous reconnecter avec le même compte.

Si vous souhaitez personnaliser le parcours, vous pouvez continuer à travailler depuis le chat. Par exemple :

Simplifie le formulaire d’inscription et affiche des messages d’erreur clairs lorsque l’adresse e-mail est déjà enregistrée ou que le mot de passe n’est pas valide.

2. Créez un espace personnel protégé

Une fois la connexion configurée, vous pouvez définir ce qu’un utilisateur authentifié doit voir. Par exemple :

Crée une page Compte accessible uniquement aux utilisateurs authentifiés. Affiche le nom, l’adresse e-mail, la date d’inscription et un résumé de l’activité de l’utilisateur.

Coderblock peut créer cette page et la protéger afin qu’elle ne soit pas accessible aux utilisateurs qui ne sont pas connectés. Vous pouvez également demander à protéger plusieurs pages :

Protège les pages /account, /orders et /settings. Si un utilisateur non authentifié tente d’y accéder, redirige-le vers la page de connexion.

Essayez ensuite d’ouvrir directement les URL protégées sans vous être connecté. Un utilisateur non authentifié ne doit pas pouvoir consulter le contenu réservé.

3. Associez les données à l’utilisateur authentifié

L’authentification devient vraiment utile lorsque les utilisateurs peuvent disposer de données personnelles associées à leur compte. Par exemple, pour une plateforme de réservation, vous pouvez demander :

Ajoute une table pour les réservations. Chaque réservation doit être associée à l’utilisateur authentifié et contenir la date, l’heure, le service et le statut.

L’agent peut concevoir la structure de la base de données et relier les enregistrements à l’utilisateur authentifié. Vous pouvez ensuite demander :

Sur la page Compte, affiche uniquement les réservations de l’utilisateur actuellement connecté.

Ce principe peut s’appliquer à tout type de données personnelles : commandes, rendez-vous, documents, préférences, messages ou contenus créés par l’utilisateur.

4. Protégez les données avec Row Level Security

Protéger une page ne suffit pas. Si une app contient des données privées, vous devez également vous assurer que la base de données empêche les utilisateurs de lire ou de modifier les informations appartenant à d’autres comptes. Coderblock utilise la fonctionnalité Row Level Security (RLS) de Postgres à cette fin. Vous pouvez demander, par exemple :

Assure-toi que chaque utilisateur peut uniquement consulter et modifier ses propres réservations. Les utilisateurs ne doivent pas pouvoir accéder aux données des autres comptes.

L’agent configure les politiques nécessaires en fonction de l’utilisateur authentifié. Vous pouvez vérifier le résultat dans l’onglet Backend de l’éditeur, qui donne accès aux tables, aux utilisateurs authentifiés, au stockage et aux fonctions du projet.

Un test important

Créez au moins deux comptes de test. Avec le premier compte :

• créez quelques données ;
• vérifiez qu’elles s’affichent correctement.

Connectez-vous ensuite avec le second compte et vérifiez que ces données ne sont pas accessibles. Ce test est particulièrement important pour les applications qui gèrent des informations personnelles, des commandes, des documents ou d’autres données confidentielles.

5. Ajoutez des rôles et des administrateurs

De nombreuses applications comportent plusieurs types d’utilisateurs. Vous pourriez avoir, par exemple :

• des clients ;
• des administrateurs ;
• des membres de l’équipe ;
• des modérateurs ;
• des enseignants ;
• des professionnels.

Vous pouvez décrire ces rôles directement dans le chat. Par exemple :

Ajoute les rôles client et administrateur. Les clients peuvent uniquement consulter et modifier leurs propres données, tandis que les administrateurs peuvent accéder à un tableau de bord protégé et gérer les utilisateurs et les contenus.

Coderblock comprend déjà une structure de base pour les profils et les rôles, que l’agent peut utiliser pour configurer les autorisations de l’app. Vous pouvez ensuite demander :

Crée un tableau de bord d’administration accessible exclusivement aux utilisateurs ayant le rôle d’administrateur.

Vérifiez ensuite le comportement avec des comptes ayant des rôles différents. Un client ne doit pas pouvoir accéder au tableau de bord simplement parce qu’il en connaît l’URL.

6. Personnalisez le profil utilisateur

Une fois l’authentification configurée, vous pouvez ajouter des informations au profil. Par exemple :

Ajoute à la page Compte un formulaire permettant aux utilisateurs de modifier leur nom, leur numéro de téléphone et leur photo de profil.

Ou encore :

Permets aux utilisateurs d’importer une photo de profil et enregistre-la dans le stockage de l’app.

Si votre produit nécessite des informations particulières, vous pouvez les décrire de la même manière. L’agent peut mettre à jour le modèle de données, l’interface et la logique nécessaires pour relier ces informations au bon compte.

7. Ajoutez la connexion via les réseaux sociaux

Si vous souhaitez permettre aux utilisateurs de s’inscrire ou de se connecter avec un fournisseur d’identité externe, vous pouvez le demander directement dans le chat. Par exemple :

Ajoute la connexion avec Google en complément de l’authentification par adresse e-mail et mot de passe.

Coderblock peut intégrer la connexion via les réseaux sociaux au parcours d’authentification de l’app. Une fois la configuration terminée, testez les deux parcours :

• inscription et connexion par adresse e-mail et mot de passe ;
• connexion via le fournisseur d’identité externe.

Vérifiez également que les deux méthodes donnent accès au même type d’espace personnel et que les données sont correctement associées à l’utilisateur.

8. Gérez la déconnexion et les sessions

La gestion d’un compte ne doit pas se limiter à la connexion. Demandez également à l’agent de configurer le comportement de la session :

Ajoute un bouton Déconnexion dans l’espace personnel et assure-toi que les pages protégées ne sont plus accessibles après la déconnexion.

Vérifiez ensuite que :

1. la connexion ouvre correctement l’espace personnel ;
2. l’actualisation de la page conserve la session lorsque cela est prévu ;
3. la déconnexion met fin à la session ;
4. les pages protégées ne sont plus accessibles après la déconnexion.

Si vous souhaitez modifier ce comportement, décrivez simplement le résultat attendu dans le chat.

9. Testez l’ensemble du parcours

Avant de publier l’app, testez l’authentification du début à la fin.

Compte utilisateur

1. Créez un nouveau compte.
2. Connectez-vous.
3. Complétez le profil, si cette étape est prévue.
4. Créez quelques données personnelles.
5. Déconnectez-vous du compte.
6. Reconnectez-vous.
7. Vérifiez que les données sont toujours présentes.

Sécurité

Créez ensuite un second compte et vérifiez qu’il :

• ne peut pas consulter les données du premier utilisateur ;
• ne peut pas modifier les données du premier utilisateur ;
• ne peut pas accéder aux pages réservées au premier utilisateur ;
• ne peut pas accéder aux pages d’administration.

Administration

Si vous avez configuré un rôle d’administrateur :

1. connectez-vous avec un compte administrateur ;
2. ouvrez le tableau de bord ;
3. vérifiez les fonctionnalités disponibles ;
4. revenez à un compte client ;
5. essayez de nouveau d’accéder au tableau de bord.

L’objectif n’est pas seulement de vérifier que la connexion fonctionne, mais aussi que chaque utilisateur peut uniquement effectuer les actions autorisées par son rôle.

10. Publiez l’app

Après avoir vérifié l’authentification, les comptes, les rôles et les autorisations, vous pouvez publier l’app. Cliquez sur Publier pour la déployer sur <app>.coderblock.app, avec SSL inclus.

Si vous souhaitez utiliser un domaine personnalisé, accédez à Paramètres → Domaines et connectez un domaine existant en suivant la procédure DNS guidée, ou achetez-en un directement dans Coderblock.

Après la publication, répétez au moins les principaux tests dans l’environnement de production :

• inscription ;
• connexion ;
• déconnexion ;
• accès aux pages protégées ;
• affichage des données personnelles ;
• autorisations d’administration ;
• accès aux données avec différents comptes utilisateur.

Checklist finale

Avant de considérer l’authentification comme terminée, vérifiez que :

• l’inscription fonctionne correctement ;
• la connexion et la déconnexion fonctionnent ;
• les sessions sont correctement gérées ;
• les pages privées sont réellement protégées ;
• chaque utilisateur peut uniquement accéder à ses propres données ;
• Row Level Security est correctement configurée ;
• les rôles et les autorisations associées fonctionnent ;
• les utilisateurs ne peuvent pas accéder aux espaces d’administration sans autorisation ;
• les éventuelles connexions via les réseaux sociaux fonctionnent correctement ;
• les données du profil sont associées au bon compte.

Une authentification prête à l’emploi

Avec Coderblock, vous pouvez transformer une app simple sans compte en un produit doté de l’inscription, de la connexion, de profils, de rôles, de pages protégées et de données personnelles, en utilisant la conversation comme interface principale. La vérification reste toutefois essentielle : l’IA peut configurer une grande partie de l’infrastructure, mais c’est à vous de vous assurer que chaque compte et chaque rôle disposent exactement des autorisations prévues.