Persistance et authentification avec Prisma

Dans ce module, nous allons plonger au cœur de la persistance des données et de l’authentification sécurisée avec Prisma, un ORM moderne et performant. Vous apprendrez à configurer votre base de données SQLite, à définir vos schémas de données et à mettre en place des flux d’inscription et de connexion robustes. Grâce aux React Server Components et aux Server Actions de Next.js 15, vous gérerez toute la logique métier côté serveur tout en conservant une expérience utilisateur fluide.

Objectifs du module

• Installer et configurer Prisma dans un projet Next.js 15
• Définir un schéma Prisma pour le modèle User
• Initialiser et migrer une base SQLite
• Mettre en place l’inscription (register) et la connexion (login) côté serveur
• Gérer la session utilisateur avec des cookies HTTPOnly
• Valider et hacher les mots de passe avec bcryptjs
• Protéger les pages et rediriger les utilisateurs non authentifiés

Plan de la leçon

1. Initialisation de Prisma
   • Installation de l’outil CLI
   • Configuration du fichier .env et de schema.prisma
2. Modélisation et migration
   • Définition du modèle User
   • Exécution de la migration avec SQLite
3. Seed de la base de données
   • Création d’un script de seed pour tester rapidement
4. Inscription et connexion
   • Création des Server Actions register et login
   • Validation des formulaires avec Zod
   • Hachage des mots de passe et comparaison sécurisée
5. Gestion de la session
   • Lecture et écriture de cookies HTTPOnly
   • Composants getOptionalUser et requireUser
6. Protection des routes
   • Redirections automatiques des utilisateurs connectés
   • Middleware minimaliste côté serveur

Mise en route

Pour commencer, on initialise Prisma dans le projet Next.js :

1
npx prisma init

Ce premier pas crée un dossier prisma/ et un fichier .env contenant la variable :

1
DATABASE_URL="file:./dev.db"

Ensuite, définissez votre modèle User dans prisma/schema.prisma :

1
model User {
2
  id       Int    @id @default(autoincrement())
3
  email    String @unique
4
  password String
5
}

Puis, lancez la migration :

1
npx prisma migrate dev --name add-user

Un fichier dev.db sera généré automatiquement. Vous êtes maintenant prêt à construire le flux d’inscription et de connexion, en tirant parti des Server Actions de Next.js et de la puissance de Prisma pour interagir avec votre base de données SQLite, le tout sans compromise sur la sécurité ni sur les performances.