Authentification des utilisateurs

  • Créez un flux de connexion et d'inscription à l'aide de Supabase Auth et de la connexion Google pour contrôler qui peut accéder à votre application.
  • Ajoutez un middleware d'authentification à votre backend Express.js pour protéger vos routes API contre les requêtes non autorisées.
  • Testez la sécurité du front-end et du back-end pour vérifier que seuls les utilisateurs connectés peuvent déclencher vos fonctionnalités d'IA.
  • Pages d'inscription et de connexion qui créent des comptes utilisateurs et maintiennent les utilisateurs connectés
  • Routes API protégées avec un middleware backend qui vérifie les jetons d'authentification avant de traiter les requêtes.

Les étudiants ont créé un MVP débogué dans un référentiel GitHub qui comprend une interface utilisateur React et un backend Express.js. L'interface utilisateur et le backend peuvent fonctionner comme deux processus distincts dans Codespaces.

Sécurisation de votre application grâce à l'authentification

À l'heure actuelle, toute personne disposant de votre lien Codespace peut utiliser votre application. Il n'y a pas d'écran de connexion, et votre backend Express.js traite toutes les requêtes qu'il reçoit, sans poser de questions. Si quelqu'un découvre votre URL, il peut déclencher des appels IA qui vous coûteront de l'argent. Comme vous l'avez découvert lors de l'élaboration de votre plan financier, chaque appel API a un coût. La protection de ces appels n'est pas seulement une décision technique, c'est aussi une décision commerciale.

Tout au long de cette unité, nous utilisons TutorMatch comme exemple guidé. Vous suivrez les exemples de TutorMatch, puis adapterez chaque étape à votre propre MVP.

Cet appareil ajoute deux niveaux de protection.

  1. Authentification utilisateur — un écran de connexion afin que seuls les utilisateurs enregistrés puissent voir votre application. 
  2. Contrôle de sécurité dans votre backend qui vérifie que chaque requête API provient bien d'un utilisateur connecté.

Considérez cela ainsi : la page de connexion protège la porte d'entrée. Le contrôle de sécurité backend protège les fenêtres. Ensemble, ils garantissent la protection de votre application des deux côtés.

Pourquoi ne pas stocker vous-même vos mots de passe ?

L'approche la plus intuitive en matière de comptes utilisateurs est également la plus dangereuse : créer un tableau des utilisateurs, enregistrer l'adresse e-mail et le mot de passe de chaque personne lors de son inscription, puis vérifier le mot de passe lors de sa connexion.

Le problème est que cela stocke les mots de passe sous forme de texte brut, lisible par toute personne qui accède à votre base de données. Si votre base de données venait à être exposée, tous les mots de passe des utilisateurs seraient compromis. Les applications professionnelles ne procèdent jamais ainsi.

 Une authentification sécurisée nécessite la combinaison de plusieurs éléments :

  • Hachage des mots de passe – conversion des mots de passe en chaînes illisibles avant leur stockage
  • jetons de session – identifiants temporaires qui permettent aux utilisateurs de rester connectés sans avoir à saisir leur mot de passe sur chaque page
  • stockage sécurisé – traitement crypté des identifiants afin qu'ils ne soient jamais exposés pendant leur transfert ou leur stockage.

Construire tout cela à partir de zéro est complexe et source d'erreurs. C'est pourquoi les services d'authentification existent : ils gèrent la sécurité afin que vous puissiez vous concentrer sur votre application.

user authentication login screen

Il existe plusieurs options pour choisir un service d'authentification utilisateur :

Option

Comment ça marche

Niveau gratuit

Complexité

Verdict

Stockez vous-même vos mots de passe

Créer un tableau des utilisateurs, hacher les mots de passe, gérer les sessions manuellement

Gratuit

Élevé — les erreurs de sécurité sont faciles à commettre et dangereuses

Non recommandé pour les MVP

Connexion Google (OAuth)

Les utilisateurs cliquent sur « Se connecter avec Google ». Google gère toute la sécurité.

Gratuit

Moyen — nécessite la configuration de Google Cloud Console

Excellente option, mais ajoute des étapes de configuration

Auth0 / Commis

Services d'authentification tiers avec pages de connexion prédéfinies

Niveau gratuit disponible

Moyen — nouveau compte et SDK requis

C'est bien, mais cela ajoute un service supplémentaire à gérer.

Authentification Supabase

Intégré à Supabase. Gère automatiquement le hachage, les sessions et le stockage.

Gratuit (inclus)

Faible — vous avez déjà un compte Supabase

Une excellente option pour le MVP

Dans cette leçon, nous utiliserons Supabase Auth pour authentifier les utilisateurs. Nous ajouterons également la connexion Google, car il s'agit d'une option de connexion standard pour les applications professionnelles, et elle n'est pas trop difficile à configurer. Supabase Auth est le choix principal pour trois raisons :

  1. Vous disposez déjà d'un compte Supabase grâce à votre kit de démarrage.
  2. Supabase gère d'emblée toutes les complexités liées à la sécurité mentionnées ci-dessus.
  3. Le niveau gratuit couvre tout ce dont vous avez besoin pour votre MVP.

Autre élément à prendre en compte : Supabase Auth prend en charge la sécurité au niveau des lignes (RLS), des règles de base de données que vous configurez pour filtrer les données afin que chaque utilisateur ne puisse voir que ses propres enregistrements. Nous en avons parlé lorsque nous avons ajouté Supabase à notre boîte à outils du fondateur. Cependant, la RLS ne protège pas vos routes IA. C'est pourquoi nous devons ajouter des protections supplémentaires.

RLS n'est pas nécessaire à ce stade, car nous ne créons pas de tables personnalisées. Supabase gère le stockage des utilisateurs en interne. RLS devient pertinent si vous stockez des données spécifiques à l'utilisateur dans votre MVP, comme l'historique, les préférences ou les transactions d'un utilisateur.

Authentification Supabase

Lorsque vous créez un projet Supabase, l'authentification est automatiquement activée. Vous n'avez pas besoin d'effectuer de configuration particulière dans les paramètres Supabase. Nous avons défini certaines politiques de sécurité RLS spécifiques dans le Founder's Toolkit pour les utilisateurs anonymes par rapport aux membres de l'équipe, mais pour cette base de données, nous utiliserons l'authentification intégrée par défaut de Supabase.

Ce que Supabase configure automatiquement :

  •  Authentification par e-mail/mot de passe activée
  • Tableau des utilisateurs (auth.users) créé
  • Jetons Web JSON (JWT) émis
  • Gestion des sessions prise en charge

Dans la première activité, vous ajouterez une procédure de connexion et d'inscription à votre MVP afin que seuls les utilisateurs enregistrés puissent accéder à votre application. Nous suivrons une série d'instructions, en effectuant des tests après chacune d'elles pour nous assurer que tout fonctionne correctement avant de passer à la suivante. 

Chaque instruction dans les activités de cette leçon utilise le structure Rôle + Tâche . Il s'agit d'un modèle d'ingénierie des invites qui mérite d'être mis en pratique :

  • Rôle indique à l'IA quel type d'expert elle doit être
  • La tâche lui indique exactement ce qu'il doit faire.

Séparer ces deux éléments rend vos invites plus claires et produit de meilleurs résultats, en particulier avec les modèles d'IA plus petits.

ACTIVITÉ 1

Ajouter l'authentification utilisateur avec Supabase

Durée estimée : 30 minutes

Vous mettrez à jour votre application afin qu'elle nécessite une connexion pour être utilisée. Les nouveaux utilisateurs pourront s'inscrire, les utilisateurs existants pourront se connecter et toute personne ne disposant pas d'un compte sera redirigée vers la page de connexion.

  1. Allez sur GitHub et ouvrez votre référentiel MVP. 
  2. Créez une nouvelle branche appelée, par exemple, add-auth. 
  3. Ouvrez votre espace de code sur la nouvelle branche.

Vous êtes sur le point d'apporter des modifications importantes — la branche de fonctionnalité protège la branche principale. Vous ne fusionnerez avec la branche principale qu'après avoir effectué des tests.

  1. Accédez à Supabase. Vous devriez disposer d'un compte et d'un projet depuis votre kit de démarrage.
  2. Créez un nouveau projet. Donnez-lui un nom approprié pour votre MVP.
  3. Vous devrez créer un mot de passe pour la base de données. Créez-en un et conservez-le en lieu sûr, car vous ne pourrez plus le voir une fois qu'il aura été enregistré.
  4. Configurer les paramètres d'authentification :
    1. Accédez à votre tableau de bord Supabase → Authentification → Paramètres
    2. Faites défiler vers le bas jusqu'à la section Connexion/Fournisseurs.
    3. Activer les confirmations par e-mail
    4. Désactivez -le (pour le tester)
    5. N'oubliez pas de le réactiver lorsque vous passez en production !
supabase user authentications screen
  1. Obtenez l'URL de votre projet et vos clés API
    1. Dans la barre latérale gauche, cliquez sur Paramètres du projet (icône en forme d'engrenage en bas).
    2. Cliquez sur API de données.
    3. Vous verrez l'URL de l'API. Copiez-la et enregistrez-la quelque part sur votre ordinateur. Vous en aurez besoin pour votre application.
    4. Retournez au menu Paramètres du projet et cliquez sur Clés API.
    5. Vous verrez deux clés, une clé publique et une clé privée.
    6. Copiez la clé publiable. Vous en aurez également besoin pour votre application.

L'URL publique et la clé publiable sont ouvertes et peuvent être utilisées dans l'interface utilisateur de votre application. Supabase utilise le RLS (Row Level Security, ou sécurité au niveau des lignes) pour protéger les données. Les utilisateurs peuvent s'inscrire et se connecter, mais ils ne peuvent voir que leurs propres données et ne disposent pas d'un accès administrateur.

Nous n'utiliserons pas la clé secrète ici. Elle ne doit jamais être utilisée dans l'interface utilisateur. Nous l'utiliserons plus tard, lorsque nous aborderons le traitement des paiements.

  1. Dans votre projet, ajoutez un nouveau fichier .env dans votre dossier racine. Vous disposerez déjà d'un fichier .env dans le dossier serveur , mais comme l'intégration Supabase se fait dans le frontend, il doit se trouver dans le répertoire racine du projet.
  2. Ajoutez 2 lignes à votre fichier racine .env
    VITE_SUPABASE_URL=votre_URL_publique
    VITE_SUPABASE_KEY=votre_clé_publiable
  3. Ajoutez votre URL Supabase réelle et votre clé de publication à ces lignes dans le fichier.

REMARQUE : nous utilisons React, donc VITE_ est nécessaire pour préfixer et mettre en avant les variables d'environnement. Votre framework peut être différent.

Dans votre terminal Codespace, tapez
npm install @supabase/supabase-js

Demandez à Copilot (ou à un autre LLM) de vous aider à générer le code de connexion/inscription pour votre application. Voici un exemple de demande.

Rôle : Vous êtes un développeur web qui m'aide à intégrer l'authentification des utilisateurs dans mon application React.

Tâche : Ajouter un formulaire d'inscription et de connexion Supabase et interagir avec l'URL Supabase. L'écran d'accueil est celui de connexion. Une fois que l'utilisateur s'est connecté, les autres onglets apparaissent et l'utilisateur peut accéder à ces deux onglets. Le formulaire de connexion doit être ajouté sous forme de fichier Authform.jsx dans le dossier Pages. Ajoutez un bouton de déconnexion à l'écran une fois que l'utilisateur s'est connecté, à côté des autres boutons d'onglet, afin que l'utilisateur puisse se déconnecter et revenir à l'écran principal.

Utilisez le même formatage pour AuthForm que celui utilisé pour les onglets FindTutor et GetAdvice. 

J'ai ajouté l'URL du projet Supabase et la clé API publiable à mon fichier .env sous les noms VITE_SUPABASE_URL et VITE_SUPABASE_URL. 

Testez le flux complet :

  1. Inscription :
    • Aller à /inscription
    • Entrez votre adresse e-mail et votre mot de passe (minimum 6 caractères)
    • Cliquez sur « S'inscrire ».
    • Devrait rediriger vers la page d'accueil
  2. Vérifier dans Supabase :
    • Ouvrez le tableau de bord Supabase → Authentification → Utilisateurs
    • Vous devriez voir votre nouvel utilisateur apparaître dans la liste.
  3. Déconnexion :
    • Cliquez sur le bouton « Déconnexion ».
    • Devrait rediriger vers la page de connexion
  4. Connexion :
    • Entrez le même e-mail/mot de passe
    • Devrait rediriger vers la page d'accueil
  5. Persistance de session :
    • Actualiser la page
    • Vous devriez toujours être connecté.

Si une étape échoue, utilisez le modèle « Teach Me » (Apprenez-moi) avec Copilot : décrivez ce que vous attendiez, ce qui s'est passé à la place, et demandez à Copilot de vous expliquer avant de vous proposer une solution.

Gardez l'espace de code et la branche ouverts pour la prochaine activité.

Bien que l'ajout d'une option de connexion Google soit facultatif, vous pouvez le faire gratuitement, et cela ajoute une touche de professionnalisme à votre application.

ACTIVITÉ 2

(Facultatif) Ajouter la connexion Google

Durée estimée : 30 minutes

  1. Accédez à votre tableau de bord Supabase → Authentification → Fournisseurs.
  2. Recherchez Google dans la liste et activez-le. 
  3. Recherchez l'URL de rappel et copiez-la. Elle ressemble généralement à ceci : https://[VOTRE-ID-DE-PROJET].supabase.co/auth/v1/callback.

IMPORTANT : IGNOREZ les grandes bannières « Essayer gratuitement » ou « Activer un crédit de 300 $ » en haut de l'écran. Si vous cliquez sur ces boutons, Google vous demandera une carte de crédit pour vérifier votre identité.

Vous n'avez pas besoin du crédit de 300 $ ni d'un « compte de facturation » pour utiliser les API d'identité/d'authentification.

  1. Accédez à la console Google Cloud. Vous devriez disposer d'un compte grâce à l'utilisation de Google AI Studio.

  2. Créez un nouveau projet et donnez-lui un nom approprié. Google autorise plusieurs projets gratuits par compte sans facturation ni utilisation d'une carte de crédit.

  3. Accédez à API et services → Écran de consentement OAuth.

    • Cliquez sur « Commencer ».
    • Indiquez le nom de votre application et l'adresse e-mail du service d'assistance aux utilisateurs.
    • Cliquez Externe pour le public.

      IMPORTANT : indiquez uniquement le « nom de l'application » et l'« adresse e-mail d'assistance ». Si vous ajoutez un logo ou des « champs d'application » sensibles (comme la lecture de l'intégralité du Drive d'un utilisateur), Google pourrait vous demander de vérifier votre identité à l'aide d'une carte de crédit.

      Conseil de pro pour les MVP :       vous n'avez pas besoin de soumettre votre application à la vérification tant que vous restez en mode « Test » ou que vous avez peu d'utilisateurs.

  1. Accédez à API et services → Identifiants.
  2. Cliquez sur + Créer des informations d'identification → ID client OAuth.
  3. Type d'application : sélectionnez Application Web.
  4. URI de redirection autorisés : collez l'URL de rappel que vous avez copiée depuis Supabase ci-dessus.
  5. Cliquez sur Créer. Vous recevrez un identifiant client et une clé secrète client.
  6. Veillez à les copier, car vous ne pourrez plus y accéder une fois la fenêtre fermée. Vous pouvez les télécharger au format JSON et les conserver toutes les deux à votre disposition.
  1. Retournez dans le tableau de bord Supabase → Authentification → Fournisseurs → Google.
  2. Collez votre identifiant client et votre clé secrète.
  3. Activez l'option « Activer le fournisseur Google » et cliquez sur « Enregistrer ».

Lorsqu'un utilisateur se connecte avec Google, il doit savoir où revenir après l'authentification. La valeur par défaut est http://localhost:3000/, mais notre interface utilisateur fonctionne sur http://localhost:5173.

  1. Pour vous assurer que cela fonctionne, copiez l'URL Github lorsque votre application est en cours d'exécution (elle ressemblera à quelque chose comme https://codespace_name.app.github.dev/
  2. Dans Supabase, rendez-vous dans Authentification → Configuration URL. 
  3. Ajoutez votre URL Github comme URL de redirection.
  1. Ajoutez l'URL Github Codespace dans votre fichier .env en tant que variable, VITE_DEVELOPMENT_URL (VITE n'est nécessaire que si votre application est React).

Vous demanderez à Copilot d'ajouter la fonctionnalité de connexion Google. Notez que nous ajoutons l'instruction d'inclure l'URL de redirection. 

  1. Demandez à Copilot d'ajouter la connexion Google comme option dans votre écran de connexion.

Rôle : Vous êtes un développeur web qui m'aide à intégrer l'authentification des utilisateurs dans mon application React.

Tâche : Ajouter la connexion Google comme option à ma page de connexion. Utiliser la méthode signInWithOAuth de Supabase avec le fournisseur « Google ». Rediriger vers la variable d'environnement VITE_DEVELOPMENT_URL.

Remarque : si vous changez d'espace de code, vous devrez créer un nouveau fichier .env avec votre redirection (ainsi que votre URL Supabase et votre clé API pour votre interface utilisateur).

Lorsque vous déployez votre application, vous devez ajouter l'URL de votre application de production en tant que redirection dans Supabase, ainsi que dans votre code.

  1. Validez vos modifications dans votre branche.

Gardez la branche et l'espace de code ouverts pour la prochaine activité.

Sécurisation de vos routes API

Votre application dispose désormais d'une page de connexion, les utilisateurs doivent donc se connecter pour accéder à votre application. Mais votre backend Express.js continue de traiter toutes les requêtes qu'il reçoit, même si la personne ne s'est pas connectée via votre frontend. Quelqu'un pourrait ouvrir une console de navigateur et appeler directement votre API, contournant ainsi complètement la page de connexion.

C'est le problème des « fenêtres ». Vous avez verrouillé la porte d'entrée avec une page de connexion, mais les fenêtres (vos routes API) sont toujours ouvertes. Pour résoudre ce problème, vous allez ajouter un contrôle de sécurité (appelé middleware) à votre backend qui vérifie que chaque requête API provient bien d'un utilisateur connecté.

Vous devez :

Protéger les itinéraires qui :

  • Coût financier (appels IA, utilisation de l'API)
  • Modifier les données (créer, mettre à jour, supprimer)
  • Afficher les informations spécifiques à l'utilisateur

Rester public :

  • Bilans de santé
  • Actifs statiques
  • Page d'accueil (si elle est accessible au public)

Lorsque votre backend reçoit une requête :

  1. Vérifier : « Cette demande était-elle accompagnée d'une preuve que l'utilisateur est connecté ? »
  2. Si oui → traiter la demande normalement
  3. Si non → rejeter la demande avec une erreur « 401 Non autorisé ».

La « preuve » est un JWT (JSON Web Token), une longue chaîne de caractères que Supabase attribue à chaque utilisateur connecté. Votre frontend inclut ce jeton dans chaque requête qu'il envoie au backend. Le backend vérifie le jeton auprès de Supabase afin de confirmer qu'il est authentique et qu'il n'a pas expiré.

Ce qu'il contient :

  • Qui est l'utilisateur (son identifiant utilisateur, son adresse e-mail)
  • Quand il a été publié
  • Quand il expire
  • Une signature cryptographique prouvant que Supabase l'a émise et qu'elle n'a pas été altérée.
ACTIVITÉ 3

Sécurisez vos routes API

Durée estimée : 25 minutes

Si vous n'êtes pas déjà dans Codespace, ouvrez-le, avec la même branche que celle utilisée pour les activités 1 et 2.

  1. Dans votre serveur dossier (où se trouve votre backend Express), installez Supabase :
    • Dans la fenêtre du terminal,
      cd server
      npm install @supabase/supabase-js
  1. Retournez à votre projet Supabase et récupérez le Clé API secrète (et non la clé publiable).
    • Accédez à Paramètres du projet → Clés API.
    • Faites défiler vers le bas jusqu'à la ou les clés secrètes.
    • Copiez-le et enregistrez-le dans un endroit sûr sur votre ordinateur.
  2. Mettre à jour le fichier fichier .env dans votre serveur (pas le fichier .env racine – le fichier server/.env est un fichier distinct pour le backend).
  3. Ajoutez ces lignes en collant votre URL Supabase et votre clé secrète :
    SUPABASE_URL=votre_URL_publique
    SUPABASE_SERVICE_ROLE_KEY=votre_clé_secrète

Important :

  • Utilisez la MÊME URL SUPABASE que votre interface utilisateur.
  • Utilisez la CLÉ SECRÈTE (clé non publiable) pour SUPABASE_SERVICE_ROLE_KEY.
  • La clé secrète dispose de privilèges d'administrateur – NE LA DIVULGUEZ JAMAIS dans le code frontend.
  1. Utilisez cette invite pour demander à Copilot d'ajouter du code au code backend afin de garantir la sécurité des appels API.

Rôle : Vous êtes un développeur backend qui m'aide à sécuriser mon API Express.js.

Tâche : 

  1. Importez la bibliothèque cliente Supabase (@supabase/supabase-js)
  2. Initialisez un client Supabase à l'aide de SUPABASE_URL et SUPABASE_SERVICE_ROLE_KEY à partir des variables d'environnement.
  3. Ajouter une fonction middleware d'authentification à mon backend Express.js.
    • Extraire le jeton
    • Demandez à Supabase de valider le jeton
    • Si oui → laisser la demande se poursuivre
    • Si non → renvoyer une erreur 401

  4. Appliquez ce middleware UNIQUEMENT aux routes qui appellent des API externes.

  5. NE PAS l'appliquer aux chemins publics tels que la page d'accueil ou le contrôle de santé.

  1. Vérifiez le code généré.

    Vous devriez voir une fonction appelée requireAuth (ou un nom similaire) qui vérifie l'en-tête d'autorisation, extrait le jeton et le vérifie avec Supabase. Vous devriez également voir cette fonction appliquée à votre route API, mais pas aux routes publiques.

    Les parties clés devraient ressembler à ce code :
				
					async function requireAuth(req, res, next) {
  const authHeader = req.headers.authorization;

  if (!authHeader || !authHeader.startsWith('Bearer ')) {
    return res.status(401).json({ error: 'Unauthorized' });
  }

  const token = authHeader.split(' ')[1];
  const { data, error } = await supabase.auth.getUser(token);

  if (error || !data.user) {
    return res.status(401).json({ error: 'Unauthorized' });
  }

  req.user = data.user;
  next();
}

// Protected route — security check runs first
app.post('/api/ai-query', requireAuth, async (req, res) => {
  // This code only runs if the user is logged in
});

// Public route — no security check needed
app.get('/health', (req, res) => {
  res.json({ status: 'ok' });
});

Pour TutorMatch, la route protégée est app.post(‘/api/ai-query’, requireAuth, …). Votre application aura des noms de route différents, mais le principe est le même : protéger les routes dont l'exécution coûte de l'argent.

Votre backend attend désormais une preuve de connexion à chaque requête, mais votre frontend ne l'envoie pas encore.

  1. Demandez à Copilot de mettre à jour votre code frontend. Voici un exemple de commande.

Rôle : Vous êtes un développeur front-end qui m'aide à connecter mon application React à mon backend Express.js sécurisé.

Tâche : mettre à jour tous mes appels API frontend vers des routes protégées afin d'inclure le jeton de session Supabase dans l'en-tête d'autorisation.

  1. Regardez le code mis à jour par Copilot.

    Vous devriez voir que vos appels fetch incluent désormais un en-tête Authorization. Voici à quoi ressemble la modification :
				
					const { data: { session } } = await supabase.auth.getSession();

if (!session) {
  window.location.href = '/login';
  return;
}

const response = await fetch('/api/ai-query', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${session.access_token}`
  },
  body: JSON.stringify({ prompt: userInput })
});

C'est ici que tout se connecte :

  1. Supabase Auth attribue un jeton à votre interface utilisateur lorsque l'utilisateur se connecte.
  2. Votre interface envoie ce jeton avec chaque requête.
  3. Votre backend le vérifie.
    • Si elle est valide, la demande est acceptée.
    • Sinon, il est bloqué.
  1. Exécutez votre application dans Codespaces et testez deux scénarios :

Test 1 — Utilisateur connecté (devrait fonctionner) :

    1. Ouvrez votre application et connectez-vous avec vos identifiants de test.
    2. Utilisez votre fonctionnalité IA comme d'habitude.
    3. Cela devrait fonctionner exactement comme avant.

Si cela fonctionne, votre interface utilisateur envoie le jeton et votre infrastructure le reçoit.

Test 2 — Pas de connexion (devrait être bloqué) :

    1. Déconnectez-vous de l'application afin que l'utilisateur ne soit plus connecté.
    2. Ouvrez DevTools (F12 ou clic droit sur Inspecter), puis cliquez sur l'onglet Console.
    3. Essayez d'appeler votre API directement en collant ce qui suit dans la console (remarque : notre commande fetch est /api/ai-query – modifiez votre commande fetch pour utiliser la même que celle de votre code frontend).
				
					fetch('/api/ai-query', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ prompt: 'test' })
}).then(r => r.json()).then(console.log);

You should see { error: “Unauthorized” } — NOT an AI response.

Si les deux tests sont réussis, votre application est sécurisée. La page de connexion protège la porte d'entrée. Le middleware protège les fenêtres.

  1. Vérifiez une dernière fois que votre authentification utilisateur fonctionne :

    • Déconnectez-vous complètement et actualisez la page — vous devriez voir la page de connexion.
    • Connectez-vous et vérifiez que votre fonctionnalité IA fonctionne.
    • Ouvrez la console DevTools et essayez d'appeler votre API sans le jeton (comme dans le test 2) — vérifiez que vous obtenez une erreur 401.

  2. Enregistrez et validez vos modifications dans le contrôle de source, avec un message tel que « Ajouter une protection de route API avec un middleware d'authentification », puis transférez-les vers votre branche.

  3. Rendez-vous sur Github, créez une Pull Request à partir de votre branche add-auth , vérifiez les modifications et fusionnez-les avec la branche principale. 

Dépannage

Voici quelques problèmes qui pourraient se poser, ainsi que des solutions possibles.

Ouvrez DevTools, puis l'onglet Réseau, cliquez sur la requête API et consultez les en-têtes de requête. Vous devriez voir Authorization: Bearer eyJ…. Si l'en-tête est manquant, vérifiez que votre appel getSession() fonctionne.

Vérifiez que vous avez appliqué requireAuth à la bonne route.

Assurez-vous d'utiliser SUPABASE_SERVICE_ROLE_KEY (et non SUPABASE_ANON_KEY) sur le backend. La clé de rôle de service dispose des autorisations nécessaires pour vérifier les jetons de n'importe quel utilisateur.

Vérifiez que la bibliothèque cliente Supabase est installée (npm install @supabase/supabase-js) et importez-la en haut de votre fichier serveur.

Réflexion

L'ajout d'une authentification utilisateur est une étape importante pour rendre votre application professionnelle et sécurisée. Posez-vous les questions suivantes :

Sunset and reflection over lake
01 Sécurité

Que pourrait-il se passer si vous n'aviez qu'une page de connexion sans contrôle de sécurité backend ?
02

Vos routes API
Dans votre propre MVP, quelles routes nécessitent un middleware d'authentification et lesquelles peuvent rester publiques ? Comment avez-vous pris cette décision ?
03 Invitation à l'

Comment la structure Rôle + Tâche a-t-elle influencé la qualité du code généré par l'IA ? Est-elle différente (meilleure/moins bonne) des résultats obtenus précédemment ?

Termes clés

  • Authentification : vérification de l'identité d'un utilisateur, c'est-à-dire confirmation qu'il est bien celui qu'il prétend être (inscription et connexion). Différente de l'autorisation, qui contrôle ce à quoi un utilisateur peut accéder.
  • Autorisation : contrôle des actions autorisées à un utilisateur authentifié. La sécurité au niveau des lignes (RLS) est un moyen de mettre cela en œuvre au niveau de la base de données.
  • Hachage des mots de passe : conversion d'un mot de passe en une chaîne illisible avant son stockage. Supabase Auth effectue cette opération automatiquement. Le stockage des mots de passe en texte clair représente un risque sérieux pour la sécurité.
  • Jeton de session : identifiant temporaire qui permet à un utilisateur de rester connecté après s'être authentifié. Supabase Auth gère automatiquement ces jetons.
  • Middleware d'authentification : code qui s'exécute avant votre gestionnaire de route afin de vérifier que la requête provient d'un utilisateur connecté. Si l'utilisateur n'est pas authentifié, le middleware bloque la requête.
  • En-tête d'autorisation : en-tête HTTP qui transmet les informations d'authentification (généralement un jeton) du front-end au back-end à chaque requête.
  • Bearer Token: A type of authentication token sent in the Authorization header. The format is Bearer <token>. “Bearer” means “whoever carries this token is authorized.”
  • JSON Web Token (JWT) : format standard pour les jetons d'authentification. Contient des informations encodées sur l'utilisateur et une date d'expiration. Supabase utilise les JWT pour la gestion des sessions.
  • OAuth : norme d'authentification qui permet aux utilisateurs de se connecter à l'aide d'un compte existant (comme Google) au lieu de créer un nouveau mot de passe. Abréviation de « Open Authorization » (autorisation ouverte).

Ressources complémentaires

Contenu de la leçon
Quiz précédent
Retour au cours
Quiz suivant