Ajouter une base de données, l’authentification et le paiement à son app
Comptes utilisateurs, données protégées par des règles d’accès et paiement Stripe tenu côté serveur : faites construire chaque brique par un agent, puis vérifiez-la vous-même.
Faire passer une app web statique au stade de produit : des comptes utilisateurs, des données enregistrées sur un serveur et protégées par des règles d'accès, un paiement Stripe en mode test dont le statut est tenu côté serveur. Vous faites construire chaque brique par un agent de code IA, en lui donnant les bonnes consignes, puis vous vérifiez vous-même son travail : deux comptes de test, des cartes de test, des webhooks rejoués. Vous repartez avec votre app enrichie, un dossier de vérification et une checklist RGPD et de passage en mode live.
Ce que vous saurez faire
- Décider ce qui reste dans le navigateur et ce qui doit passer côté serveur, et choisir une plateforme back-end adaptée à son app, à son budget et à ses données.
- Gérer variables d'environnement et secrets (variables VITE_ publiques, clés secrètes uniquement côté serveur, fichiers .env hors de Git, rotation après une fuite).
- Faire concevoir par l'agent un modèle de données et ses migrations, puis vérifier que les données sont bien enregistrées et reliées au bon utilisateur.
- Écrire, faire écrire et tester des règles Row Level Security qui garantissent que chaque utilisateur n'accède qu'à ses données et que les limites d'offre s'appliquent en base.
- Ajouter inscription, connexion, déconnexion et réinitialisation du mot de passe, et vérifier les parcours, la confirmation d'e-mail et les URL de redirection.
- Intégrer Stripe Checkout en mode test (produit, prix, session créée côté serveur, cartes de test) sans exposer la clé secrète.
- Tenir le statut de paiement côté serveur grâce à des webhooks Stripe signés, dédoublonnés et testés avec la Stripe CLI ou le tableau de bord.
- Appliquer les bases du RGPD (information, suppression du compte, sous-traitants) et une checklist de passage en mode live avant d'encaisser de vrais paiements.
Prérequis
- Avoir une app React + Vite versionnée sur GitHub et déployée, comme celle construite dans le cours « Construire et mettre en ligne une app web avec un agent de code IA », ou toute petite app statique équivalente
- Savoir lancer un agent de code dans un dossier, lui faire proposer un plan, relire un diff et commiter
- Comptes gratuits : Supabase (plan Free), Stripe (mode test, sans activer le compte), Netlify et GitHub. Agent de code : Claude Code (plan payant) ou un agent équivalent
- Cours utiles, non bloquants : « Modéliser les données de son produit et les interroger en SQL » pour les tables et les jointures, « Concevoir et tester une intégration API en tant que PM » pour les webhooks et l'idempotence
- Ce cours ne fait pas de vous un développeur back-end : il vous apprend à faire construire, à vérifier et à savoir quand demander une relecture experte, en particulier avant d'encaisser de vrais paiements.
- Construire et mettre en ligne une app web avec un agent de code IA
Programme
Que vais-je ajouter à mon app dans ce cours, et dans quel ordre ?
- Présentation du cours2 étapes
Objectif · À la fin de cette présentation, vous saurez ce que vous serez capable de faire (ajouter à votre app des comptes, une base de données protégée et un paiement Stripe en mode test, puis vérifier le travail de l'agent), le livrable que vous produirez et par quels cinq modules le cours vous y conduit.
Qu'est-ce qui doit quitter le navigateur, sur quelle plateforme, et où ranger chaque clé ?
Objectif · À la fin de cette leçon, vous serez capable de classer les fonctions de votre app entre navigateur et serveur selon la frontière de confiance, et de choisir une plateforme back-end (Supabase, Firebase ou fonctions serveur avec une base séparée) adaptée à votre app, à votre budget et à vos données.
Objectif · À la fin de cette leçon, vous serez capable de dresser la carte des variables d'environnement de votre app, de distinguer les clés publiques des clés secrètes, de placer chaque secret au seul endroit où il doit vivre (fichier local ignoré par Git, réglages de l'hébergeur, secrets des fonctions serveur) et de réagir à une fuite.
Comment faire créer des tables par l'agent, et garantir que chacun ne voit que ses propres données ?
Objectif · À la fin de cette leçon, vous serez capable de faire concevoir par l'agent un modèle de données relié aux utilisateurs, de le faire écrire sous forme de migrations versionnées appliquées sur Supabase, puis de vérifier dans la base qu'une donnée saisie dans l'app est enregistrée et rattachée au bon compte.
Objectif · À la fin de cette leçon, vous serez capable de spécifier et faire écrire les règles Row Level Security de vos tables (lecture, création, modification, suppression), d'y appliquer une limite d'offre, puis de prouver avec deux comptes de test qu'un utilisateur ne peut ni lire ni modifier les données d'un autre, même en contournant l'interface.
Comment permettre à chacun de créer un compte et de se connecter, sans ouvrir de faille ?
Objectif · À la fin de cette leçon, vous serez capable de faire ajouter par l'agent l'inscription, la connexion, la déconnexion et la réinitialisation du mot de passe avec Supabase Auth, de configurer l'envoi des e-mails et les URL de redirection, puis de vérifier chaque parcours en local et sur l'URL publique.
Comment faire payer un abonnement, et savoir à coup sûr qui a payé ?
Objectif · À la fin de cette leçon, vous serez capable de créer produit et prix dans un environnement de test Stripe, de faire écrire par l'agent une fonction serveur qui crée une session Checkout pour l'utilisateur connecté, et de vérifier le parcours avec les cartes de test (paiement accepté, authentification forte, refus) sans que la clé Stripe quitte le serveur.
Objectif · À la fin de cette leçon, vous serez capable de faire construire une fonction serveur qui reçoit les webhooks Stripe, vérifie leur signature, ignore les doublons et tient à jour le statut d'abonnement en base, puis de la tester (paiement, doublon, résiliation par le portail client) avec le tableau de bord Stripe ou la Stripe CLI.
Que faut-il régler avant d'accueillir de vrais utilisateurs et d'encaisser de vrais paiements ?
- RGPD et passage en mode live5 étapes
Objectif · À la fin de cette leçon, vous serez capable d'appliquer les bases du RGPD à votre app (information des utilisateurs, suppression du compte et de ses données, sous-traitants, région d'hébergement, registre, violation de données) et de dérouler une checklist de passage en mode live, en distinguant ce qui bloque l'ouverture de ce qui peut attendre.
Objectif · À la fin de cet atelier, vous aurez livré votre propre app avec comptes utilisateurs, données persistées protégées par la RLS et paiement Stripe en mode test tenu par webhook, accompagnée d'un dossier de vérification qui prouve chaque brique et que vous pouvez faire relire.
Objectif · À la fin de cette leçon, vous disposerez des prompts, modèles et checklists du cours (carte des variables, matrice d'accès, tests, checklist live, RGPD) et vous aurez planifié leur application à votre app sur 7 et 30 jours.