L'authentification dans React Router 7

dans ce module complet, tu apprendras à gérer l’inscription, la connexion, la déconnexion et la réinitialisation de mot de passe de manière sécurisée. Tu découvriras comment intégrer Prisma, bcrypt, les cookies de session signés, Conform, Zod et les emails transactionnels avec Nodemailer. Crée une expérience fluide et protégée pour tes utilisateurs, avec un typage strict et une UX irréprochable.

15 juin 2025

3 min read

Code du cours

Jusqu’ici tu as appris à créer des formulaires performants avec React Router 7, à manipuler les données côté serveur et à conteneuriser ton application.

Mais une application moderne n’est jamais complète sans une authentification sécurisée.

Ce module t’apprend à mettre en place toute la logique d’authentification complète et professionnelle :

✅ Connexion & déconnexion sécurisée
✅ Inscription avec email + mot de passe
✅ Hachage avec bcryptjs et vérification serveur
✅ Cookies de session HTTP-only
✅ Routes protégées avec redirection automatique
✅ Réinitialisation de mot de passe avec token temporaire
✅ Envoi d’e-mails avec Nodemailer
✅ Validation complète avec Zod + Conform
✅ Variables d’environnement typées avec Zod

Important

À la fin de ce module, tu seras capable de sécuriser n’importe quelle application React Router 7 de A à Z.

Fonctionnalité	Contenu couvert dans le module
🔐 Connexion & mot de passe	Formulaires React Router + validation serveur
🧂 Hashage	Hachage sécurisé avec bcryptjs + comparaison
🍪 Cookies	Création de session HTTP-only + redirection
🛑 Protection des routes	Helpers `requireUser()` et `getOptionalUser()`
🔁 Réinitialisation	Token sécurisé + expiration + formulaire + vérification
📧 Envoi d’e-mails	Nodemailer + SMTP + template HTML
🔍 Sécurité UX	Pas de fuites sur l’existence d’un compte (anti-enum)
🌐 Redirection intelligente	Retour à la page demandée après login (`redirectTo`)
🧪 Validation unifiée	Schéma Zod partagé entre client et serveur (avec Conform)
⚙️ Variables `.env`	Validation typée au boot avec Zod (`serverEnv`)

L’authentification est la porte d’entrée de ton application.

Une mauvaise implémentation met en péril toute la sécurité de ta base de données. Une UX mal conçue pousse les utilisateurs à abandonner. Un oubli de redirection casse la navigation.

Ce module va plus loin que le simple formulaire de login : il t’enseigne des patterns réutilisables, des bonnes pratiques de production et une stack prête à être déployée.

Ce module suppose que tu as suivi au moins les bases de la formation :

Modules Formulaires et Routing
Avoir configuré Prisma avec PostgreSQL
Avoir utilisé les loader / action dans React Router 7

Tip

Tu peux reprendre à ce module même si tu n’as pas suivi toute la formation, tant que tu maîtrises les formulaires et Prisma.

Prisma pour la base de données PostgreSQL
bcryptjs pour le hachage sécurisé
Conform pour la gestion avancée des formulaires
Zod pour la validation et le typage des données
React Router 7 (anciennement Remix) pour le routing et le cycle loader/action
Nodemailer pour l’envoi des e-mails
Docker (en module suivant) pour le déploiement

À la fin du module, tu auras mis en place :

1+ Création de compte avec email unique
2+ Authentification complète avec cookies sécurisés
3+ Connexion/déconnexion typée
4+ Protection des pages privées
5+ Réinitialisation de mot de passe via e-mail sécurisé
6+ Infrastructure prête à être déployée

Note

Tu peux suivre ce module indépendamment pour sécuriser n’importe quelle app React Router. Il pose les bases d’un backend solide et typé – réutilisable dans tous tes futurs projets.

Leçons de ce module

Configurer une base de données Prisma avec React Router 7

Sauvegarder la session utilisateur dans un cookie avec React Router 7

Récupérer l'utilisateur connecté depuis les cookies

Comment créer une route protégée

Créer un hook réutilisable pour récupérer l'utilisateur connecté

Comment rediriger l'utilisateur après une-connexion réussie

Comment détruire le cookie avec une déconnexion

Comment intégrer l'authentification par mot de passe

Comment ajouter la réinitialisation de mot de passe

Ajout de l'inscription

Comment envoyer un email en Javascript