Authentification sécurisée : inscription, connexion, JWT

Dans ce module, nous allons mettre en place une authentification robuste pour votre application de chat temps réel construite avec Remix et NestJS. Vous découvrirez comment gérer l’inscription, la connexion, la validation des formulaires, la remontée de feedback utilisateur et la sécurisation de vos API grâce aux JSON Web Tokens (JWT).

Objectifs du module

• Valider les données d’inscription et de connexion avec Zod.
• Afficher des messages d’erreur clairs via un composant de feedback (AlertFeedback).
• Communiquer entre Remix et votre API NestJS en sécurisant chaque requête grâce au token JWT.
• Gérer la persistance du token côté client et le router vers les pages protégées.

Pourquoi c’est important

Une authentification bien conçue est la base de toute application web.

• Elle protège vos ressources sensibles.
• Elle améliore l’expérience utilisateur avec des retours instantanés sur les erreurs de saisie.
• Elle garantit une communication chiffrée et authentifiée entre le front-end et le back-end.

Aperçu des principales étapes

1. Validation côté client

   app/routes/auth/register.tsx

   1
   import { z } from 'zod'
   2
   
   3
   export const registerSchema = z.object({
   4
     email: z.string().email({ message: 'Adresse email invalide.' }),
   5
     password: z.string().min(6, {
   6
       message: 'Le mot de passe doit contenir ≥ 6 caractères.',
   7
     }),
   8
     firstName: z.string().min(2, {
   9
       message: 'Le prénom doit contenir ≥ 2 caractères.',
   10
     }),
   11
   })

2. Création des routes Remix

   • loader : redirige un utilisateur déjà connecté vers la page d’accueil.
   • action : réceptionne les données, effectue la validation, appelle l’API NestJS et gère le token JWT.

3. Mise en place de l’API NestJS

   api/auth/auth.controller.ts

   1
   @Controller('auth')
   2
   export class AuthController {
   3
     @Post('register')
   4
     register(@Body() dto: CreateUserDto) {
   5
       return this.authService.register({ registerBody: dto })
   6
     }
   7
     @Post('login')
   8
     login(@Body() dto: LogUserDto) {
   9
       return this.authService.login({ authBody: dto })
   10
     }
   11
   }

4. Gestion du JWT

   • Création du token dans le service AuthService.
   • Protection des routes avec @UseGuards(JwtAuthGuard) et la stratégie JwtStrategy.
   • Stockage du token dans une session Remix et injection dans l’en-tête Authorization.

Prérequis

• Avoir suivi le module d’initiation à Remix et aux loaders/actions.
• Connaître les principes de base de NestJS.
• Installer les dépendances :
  Terminal

  1
  npm install zod @radix-ui/react-label

Dans la suite de ce module, nous détaillerons chaque étape, du schéma de validation aux gardes JWT, pour vous permettre de sécuriser votre application de chat.