Créer une page de profil utilisateur avec authentification protégée dans Next.js (App Router + Middleware + API Route)

Créer une page de profil utilisateur avec authentification protégée dans Next.js (App Router + Middleware + API Route)

L'authentification et la protection des routes sont des aspects fondamentaux pour toute application moderne. Dans cet article, nous allons explorer comment créer une page de profil utilisateur entièrement protégée dans une application Next.js en utilisant l'App Router, les Middleware et les API Routes.

Comprendre les bases de l'authentification dans Next.js

Avant de commencer, clarifions quelques concepts essentiels :

• App Router : Le nouveau système de routage introduit dans Next.js 13+ qui permet une organisation des routes basée sur les dossiers.
• Middleware : Un moyen d'intercepter les requêtes avant qu'elles n'atteignent la page.
• API Routes : Des points d'entrée serveur pour gérer les opérations liées à la base de données.

Configuration du projet

Commençons par mettre en place notre projet Next.js :

Structure des fichiers

Voici la structure de fichiers que nous allons créer :

app/
  api/
    auth/
      [...nextauth]/
        route.ts
    user/
      profile/
        route.ts
      register/
        route.ts
  profile/
    page.tsx
  auth/
    signin/
      page.tsx
    register/
      page.tsx
middleware.ts
lib/
  auth.ts
  db.ts
components/
  ProfileForm.tsx
  AuthForm.tsx
  ProtectedRoute.tsx

Configuration de la base de données

Pour cet exemple, nous utiliserons Prisma avec une base de données PostgreSQL :

Modèle utilisateur

Créons un modèle utilisateur simple avec Prisma :

Configuration de NextAuth.js

Création du Middleware d'authentification

Le middleware est essentiel pour vérifier l'authentification avant d'accéder à des routes protégées :

Création de la page de profil protégée

API pour récupérer et mettre à jour le profil

Composant de formulaire de profil

Formulaire d'authentification

Pages d'authentification

API d'inscription utilisateur

Conclusion

Dans cet article, nous avons créé une application Next.js complète avec une page de profil utilisateur protégée par authentification. Nous avons utilisé:

• Next.js App Router pour organiser nos routes
• NextAuth.js pour l'authentification
• Middleware pour protéger nos routes
• API Routes pour gérer les données utilisateur
• Prisma pour interagir avec la base de données

Cette architecture est robuste, sécurisée et évolutive. Vous pouvez la personnaliser davantage en ajoutant d'autres fonctionnalités comme la vérification d'email, la réinitialisation de mot de passe, ou l'authentification à deux facteurs.

Le code complet est disponible sur GitHub pour référence.