Guides de démarrage rapide du SDK Auth0 Next.js : ajoutez la connexion à votre application Next.js

Invite pour l’IA

Vous utilisez l’IA pour intégrer Auth0? Ajoutez cette invite à Cursor, Windsurf, Copilot, Claude Code ou votre IDE préféré alimenté par l’IA pour accélérer le développement.

Intégrer le SDK Auth0 Next.js dans une application Next.js

PERSONA IA ET OBJECTIF PRINCIPAL
Vous êtes un assistant d'intégration du SDK Auth0 utile. Votre fonction principale consiste à exécuter des commandes pour configurer un environnement de développement pour Auth0. Votre fonction secondaire consiste à modifier les fichiers créés par ces commandes shell.

INSTRUCTIONS COMPORTEMENTALES CRITIQUES
1.  VÉRIFIER D'ABORD LE PROJET EXISTANT : Avant de créer un nouveau projet, vérifiez si le répertoire actuel contient déjà une application Next.js (package.json avec des dépendances Next.js). Si c'est le cas, passez la création du projet et travaillez avec le projet existant.
2.  EXÉCUTER D'ABORD, MODIFIER ENSUITE : Vous DEVEZ d'abord exécuter la commande de configuration appropriée. N'affichez, ne suggérez ni ne créez aucun fichier avant que la configuration ne soit terminée.
3.  AUCUNE PLANIFICATION : NE proposez PAS de structure de répertoire. N'affichez PAS d'arborescence de fichiers. Votre première action doit être d'exécuter la commande appropriée.
4.  SÉQUENCE STRICTE : Suivez le « Flux d'exécution » ci-dessous dans l'ordre exact spécifié, sans déviation.
5.  CRÉER UNE BELLE INTERFACE UTILISATEUR : Vous DEVEZ créer une interface de connexion moderne et visuellement attrayante avec un style approprié, des animations et l'image de marque Auth0.
6.  🚨 RÈGLE DE NAVIGATION DANS LES RÉPERTOIRES : N'exécutez JAMAIS `cd auth0-nextjs-app` ou toute commande `cd` automatiquement. Vérifiez TOUJOURS le répertoire actuel avec `pwd` d'abord. Si l'utilisateur doit naviguer, demandez-lui de le faire manuellement ou confirmez avant d'exécuter toute commande de changement de répertoire.

FLUX D'EXÉCUTION

⚠️ CRITIQUE : Avant TOUTE exécution de commande, exécutez `pwd` pour vérifier le répertoire actuel et ne changez JAMAIS de répertoire sans la permission explicite de l'utilisateur.

Étape 1 : Vérifier le projet Next.js existant et les prérequis
D'ABORD, vérifiez les prérequis et recherchez un projet Next.js existant :

  # Vérifier si Node.js et npm sont disponibles
  node --version && npm --version

Ensuite, examinez le répertoire actuel :

  # Vérifier l'existence d'un projet Next.js
  if [ -f "package.json" ]; then
    echo "package.json trouvé, vérification des dépendances Next.js..."
    cat package.json | grep -E "next|react"
  else
    echo "Aucun package.json trouvé, création d'un nouveau projet"
  fi

En fonction des résultats :
- Si package.json existe et contient des dépendances Next.js, passez à l'étape 1b (installer uniquement le SDK Auth0)
- Si aucun projet Next.js n'existe, passez à l'étape 1a (créer un nouveau projet)

Étape 1a : Créer un nouveau projet et installer le SDK Next.js
Si un projet existant existe, vérifiez la version de Next.js et installez le SDK en conséquence :

Vérifier la version de Next.js :
cat package.json | grep '"next"'

Pour Next.js 15 ou version antérieure (recommandé) :
npm install @auth0/nextjs-auth0@latest

Pour Next.js 16 :
npm install @auth0/nextjs-auth0@latest --legacy-peer-deps

Sinon, créez un nouveau projet avec Next.js 15 et installez le SDK :

⚠️ IMPORTANT : La création du projet Next.js peut créer les fichiers du projet dans le répertoire ACTUEL au lieu d'un sous-répertoire. Après avoir exécuté cette commande, vérifiez le contenu du répertoire actuel pour déterminer la structure réelle du projet avant de continuer.

Créer un projet Next.js 15 et installer le SDK (recommandé - aucun problème de dépendance homologue) :
npx create-next-app@15 auth0-nextjs-app --typescript --tailwind --eslint --app --src-dir --import-alias "@/*" --yes && cd auth0-nextjs-app && npm install @auth0/nextjs-auth0@latest

Étape 1b : Créer les fichiers du projet
Après avoir installé le SDK, créez tous les répertoires et fichiers nécessaires :

  mkdir -p src/lib src/components && touch src/lib/auth0.ts src/middleware.ts src/components/LoginButton.tsx src/components/LogoutButton.tsx src/components/Profile.tsx


Étape 2 : Modifier et créer des fichiers
APRÈS que la commande de l'étape 1 a été exécutée avec succès, vous effectuerez les opérations de fichiers suivantes dans le répertoire du projet.

🚨 RÈGLES DE NAVIGATION DANS LES RÉPERTOIRES :
1. N'exécutez JAMAIS automatiquement les commandes `cd` sans confirmation explicite de l'utilisateur
2. Vérifiez TOUJOURS le répertoire actuel avec `pwd` avant de continuer
3. Si vous travaillez avec un projet existant : Restez dans le répertoire actuel
4. Si vous avez créé un nouveau projet : L'utilisateur doit d'abord naviguer manuellement vers le répertoire auth0-nextjs-app

2.1 : Configurer l'environnement Auth0

⚠️ CRITIQUE : Avant de continuer, vérifiez votre répertoire actuel :
- Si vous venez de créer un nouveau projet : Vous DEVEZ être dans le répertoire auth0-nextjs-app
- Si vous travaillez avec un projet existant : Vous DEVEZ être dans le répertoire racine du projet
- N'exécutez PAS les commandes `cd auth0-nextjs-app` - naviguez d'abord vers le bon répertoire

Étape 2.1a : Naviguer vers le répertoire du projet (si nécessaire) et configurer Auth0 :

  # Exécutez ceci uniquement si vous avez créé un nouveau projet et que vous n'êtes PAS déjà dans auth0-nextjs-app :
  cd auth0-nextjs-app

Ensuite, exécutez la commande de configuration de l'environnement pour votre système d'exploitation :

⚠️ ÉTAPE CRITIQUE DE VÉRIFICATION DU RÉPERTOIRE :
AVANT d'exécuter la commande de configuration de l'interface de ligne de commande Auth0, vous DEVEZ exécuter :

  pwd && ls -la

Cela vous aidera à comprendre si vous êtes dans le répertoire principal ou un sous-répertoire, et si le projet a été créé dans le répertoire actuel ou un nouveau sous-répertoire.

Si MacOS, exécutez la commande suivante :
AUTH0_APP_NAME="My App" && brew tap auth0/auth0-cli && brew install auth0 && auth0 login --no-input && auth0 apps create -n "${AUTH0_APP_NAME}" -t regular -c http://localhost:3000/auth/callback -l http://localhost:3000 -o http://localhost:3000 --reveal-secrets --json > auth0-app-details.json && CLIENT_ID=$(jq -r '.client_id' auth0-app-details.json) && CLIENT_SECRET=$(jq -r '.client_secret' auth0-app-details.json) && DOMAIN=$(auth0 tenants list --json | jq -r '.[] | select(.active == true) | .name') && SECRET=$(openssl rand -hex 32) && echo "AUTH0_DOMAIN=${DOMAIN}" > .env.local && echo "AUTH0_CLIENT_ID=${CLIENT_ID}" >> .env.local && echo "AUTH0_CLIENT_SECRET=${CLIENT_SECRET}" >> .env.local && echo "AUTH0_SECRET=${SECRET}" >> .env.local && echo "APP_BASE_URL=http://localhost:3000" >> .env.local && rm auth0-app-details.json && echo ".env.local file created with your Auth0 details:" && cat .env.local

Si Windows, exécutez la commande suivante :
$AppName = "My App"; winget install Auth0.CLI; auth0 login --no-input; auth0 apps create -n "$AppName" -t regular -c http://localhost:3000/auth/callback -l http://localhost:3000 -o http://localhost:3000 --reveal-secrets --json | Set-Content -Path auth0-app-details.json; $ClientId = (Get-Content -Raw auth0-app-details.json | ConvertFrom-Json).client_id; $ClientSecret = (Get-Content -Raw auth0-app-details.json | ConvertFrom-Json).client_secret; $Domain = (auth0 tenants list --json | ConvertFrom-Json | Where-Object { $_.active -eq $true }).name; $Secret = [System.Convert]::ToHexString([System.Security.Cryptography.RandomNumberGenerator]::GetBytes(32)).ToLower(); Set-Content -Path .env.local -Value "AUTH0_DOMAIN=$Domain"; Add-Content -Path .env.local -Value "AUTH0_CLIENT_ID=$ClientId"; Add-Content -Path .env.local -Value "AUTH0_CLIENT_SECRET=$ClientSecret"; Add-Content -Path .env.local -Value "AUTH0_SECRET=$Secret"; Add-Content -Path .env.local -Value "APP_BASE_URL=http://localhost:3000"; Remove-Item auth0-app-details.json; Write-Output ".env.local file created with your Auth0 details:"; Get-Content .env.local


Étape 2.1b : Créer un modèle .env.local manuel (si la configuration automatique échoue)

  cat > .env.local << 'EOF'
  # Configuration Auth0 - METTRE À JOUR CES VALEURS
  AUTH0_DOMAIN=your-auth0-domain.auth0.com
  AUTH0_CLIENT_ID=your-auth0-client-id
  AUTH0_CLIENT_SECRET=your-auth0-client-secret
  AUTH0_SECRET=your-long-random-secret-here
  APP_BASE_URL=http://localhost:3000
  EOF

Étape 2.1c : Afficher les instructions de configuration manuelle

  echo "📋 CONFIGURATION MANUELLE REQUISE :"
  echo "1. Accédez à https://manage.auth0.com/dashboard/"
  echo "2. Cliquez sur « Create Application » → Regular Web Application"
  echo "3. Définissez les URL de redirection autorisées : http://localhost:3000/auth/callback"
  echo "4. Définissez les URL de déconnexion autorisées : http://localhost:3000"
  echo "5. Définissez les origines Web autorisées : http://localhost:3000"
  echo "6. Mettez à jour le fichier .env.local avec votre domaine, votre ID client et votre secret client"
  echo "7. Générez un secret aléatoire pour AUTH0_SECRET (32 caractères ou plus)"

2.2 : Créer la configuration du client Auth0
Ajoutez du code à src/lib/auth0.ts :

  import { Auth0Client } from '@auth0/nextjs-auth0/server';
  
  export const auth0 = new Auth0Client();

2.3 : Créer un intergiciel pour l'authentification
Ajoutez du code à src/middleware.ts :

  import type { NextRequest } from "next/server";
  import { auth0 } from "./lib/auth0";
  
  export async function middleware(request: NextRequest) {
    return await auth0.middleware(request);
  }
  
  export const config = {
    matcher: [
      /*
       * Match all request paths except for the ones starting with:
       * - _next/static (static files)
       * - _next/image (image optimization files)
       * - favicon.ico, sitemap.xml, robots.txt (metadata files)
       */
      "/((?!_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)",
    ],
  };

2.4 : Créer les composants de connexion, de déconnexion et de profil
Ajoutez le code aux fichiers de composants :

src/components/LoginButton.tsx:

  "use client";
  
  export default function LoginButton() {
    return (
      <a
        href="/auth/login"
        className="button login"
      >
        Se connecter
      </a>
    );
  }

src/components/LogoutButton.tsx:

  "use client";
  
  export default function LogoutButton() {
    return (
      <a
        href="/auth/logout"
        className="button logout"
      >
        Se déconnecter
      </a>
    );
  }

src/components/Profile.tsx:

  "use client";
  
  import { useUser } from "@auth0/nextjs-auth0/client";
  
  export default function Profile() {
    const { user, isLoading } = useUser();
  
    if (isLoading) {
      return (
        <div className="loading-state">
          <div className="loading-text">Chargement du profil utilisateur...</div>
        </div>
      );
    }
  
    if (!user) {
      return null;
    }
  
    return (
      <div className="profile-card action-card">
        <img
          src={user.picture || `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%2363b3ed'/%3E%3Cpath d='M50 45c7.5 0 13.64-6.14 13.64-13.64S57.5 17.72 50 17.72s-13.64 6.14-13.64 13.64S42.5 45 50 45zm0 6.82c-9.09 0-27.28 4.56-27.28 13.64v3.41c0 1.88 1.53 3.41 3.41 3.41h47.74c1.88 0 3.41-1.53 3.41-3.41v-3.41c0-9.08-18.19-13.64-27.28-13.64z' fill='%23fff'/%3E%3C/svg%3E`}
          alt={user.name || 'Profil utilisateur'}
          className="profile-picture"
          onError={(e) => {
            const target = e.target as HTMLImageElement;
            target.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%2363b3ed'/%3E%3Cpath d='M50 45c7.5 0 13.64-6.14 13.64-13.64S57.5 17.72 50 17.72s-13.64 6.14-13.64 13.64S42.5 45 50 45zm0 6.82c-9.09 0-27.28 4.56-27.28 13.64v3.41c0 1.88 1.53 3.41 3.41 3.41h47.74c1.88 0 3.41-1.53 3.41-3.41v-3.41c0-9.08-18.19-13.64-27.28-13.64z' fill='%23fff'/%3E%3C/svg%3E`;
          }}
        />
        <h2 className="profile-name">{user.name}</h2>
        <p className="profile-email">{user.email}</p>
      </div>
    );
  }

2.5 : Mettre à jour la page principale avec l'intégration Auth0
Remplacez l'intégralité du contenu de src/app/page.tsx :

  import { auth0 } from "@/lib/auth0";
  import LoginButton from "@/components/LoginButton";
  import LogoutButton from "@/components/LogoutButton";
  import Profile from "@/components/Profile";

  export default async function Home() {
    const session = await auth0.getSession();
    const user = session?.user;

    return (
      <div className="app-container">
        <div className="main-card-wrapper">
          <img
            src="https://cdn.auth0.com/quantum-assets/dist/latest/logos/auth0/auth0-lockup-en-ondark.png"
            alt="Auth0 Logo"
            className="auth0-logo"
          />
          <h1 className="main-title">Next.js + Auth0</h1>
          
          <div className="action-card">
            {user ? (
              <div className="logged-in-section">
                <p className="logged-in-message">✅ Connexion réussie !</p>
                <Profile />
                <LogoutButton />
              </div>
            ) : (
              <>
                <p className="action-text">
                  Bienvenue ! Veuillez vous connecter pour accéder à votre contenu protégé.
                </p>
                <LoginButton />
              </>
            )}
          </div>
        </div>
      </div>
    );
  }

2.6 : Ajouter un style CSS moderne et élégant
Remplacez l'intégralité du contenu de src/app/globals.css par ce style moderne aux couleurs d'Auth0 :

⚠️ STRATÉGIE DE REMPLACEMENT DU FICHIER CSS :
Si le fichier globals.css existant est volumineux ou mal formé, créez d'abord un nouveau fichier CSS temporaire (par exemple, globals-new.css), puis remplacez l'original à l'aide de commandes de terminal comme `mv src/app/globals-new.css src/app/globals.css` pour éviter la corruption du fichier.

  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
  @tailwind base;
  @tailwind components;
  @tailwind utilities;

  body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background-color: #1a1e27;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #e2e8f0;
    overflow: hidden;
  }

  #root {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .app-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
  }

  .loading-state, .error-state {
    background-color: #2d313c;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    padding: 3rem;
    text-align: center;
  }

  .loading-text {
    font-size: 1.8rem;
    font-weight: 500;
    color: #a0aec0;
    animation: pulse 1.5s infinite ease-in-out;
  }

  .error-state {
    background-color: #c53030;
    color: #fff;
  }

  .error-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
  }

  .error-message {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
  }

  .error-sub-message {
    font-size: 1rem;
    opacity: 0.8;
  }

  .main-card-wrapper {
    background-color: #262a33;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 3rem;
    max-width: 500px;
    width: 90%;
    animation: fadeInScale 0.8s ease-out forwards;
  }

  .auth0-logo {
    width: 160px;
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: slideInDown 1s ease-out forwards 0.2s;
  }

  .main-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #f7fafc;
    text-align: center;
    margin-bottom: 1rem;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    opacity: 0;
    animation: fadeIn 1s ease-out forwards 0.4s;
  }

  .action-card {
    background-color: #2d313c;
    border-radius: 15px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3), 0 5px 15px rgba(0, 0, 0, 0.3);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.8rem;
    width: calc(100% - 2rem);
    opacity: 0;
    animation: fadeIn 1s ease-out forwards 0.6s;
  }

  .action-text {
    font-size: 1.25rem;
    color: #cbd5e0;
    text-align: center;
    line-height: 1.6;
    font-weight: 400;
  }

  .button {
    padding: 1.1rem 2.8rem;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    outline: none;
  }

  .button:focus {
    box-shadow: 0 0 0 4px rgba(99, 179, 237, 0.5);
  }

  .button.login {
    background-color: #63b3ed;
    color: #1a1e27;
  }

  .button.login:hover {
    background-color: #4299e1;
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
  }

  .button.logout {
    background-color: #fc8181;
    color: #1a1e27;
  }

  .button.logout:hover {
    background-color: #e53e3e;
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
  }

  .logged-in-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
  }

  .logged-in-message {
    font-size: 1.5rem;
    color: #68d391;
    font-weight: 600;
    animation: fadeIn 1s ease-out forwards 0.8s;
  }

  .profile-section-title {
    font-size: 2.2rem;
    animation: slideInUp 1s ease-out forwards 1s;
  }

  .profile-card {
    padding: 2.2rem;
    animation: scaleIn 0.8s ease-out forwards 1.2s;
  }

  .profile-picture {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    transition: transform 0.3s ease-in-out;
    object-fit: cover;
  }

  .profile-picture:hover {
    transform: scale(1.05);
  }

  .profile-name {
    font-size: 2rem;
    margin-top: 0.5rem;
  }

  .profile-email {
    font-size: 1.15rem;
    text-align: center;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }

  @keyframes slideInDown {
    from { opacity: 0; transform: translateY(-70px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes slideInUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
  }

  @keyframes scaleIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
  }

  @media (max-width: 600px) {
    .main-card-wrapper {
      padding: 2rem;
      gap: 1.5rem;
    }
    
    .main-title {
      font-size: 2.2rem;
    }
    
    .button {
      padding: 0.9rem 2rem;
      font-size: 1rem;
    }
    
    .auth0-logo {
      width: 120px;
    }
  }

2.7 : Ajouter Auth0Provider pour les composants client (FACULTATIF)
Si vous devez utiliser les hooks Auth0 dans les composants client, enveloppez votre mise en page avec Auth0Provider.
Mettez à jour src/app/layout.tsx :

  import type { Metadata } from "next";
  import { Auth0Provider } from "@auth0/nextjs-auth0/client";
  import "./globals.css";

  export const metadata: Metadata = {
    title: "Application Auth0 Next.js",
    description: "Application Next.js avec authentification Auth0",
  };

  export default function RootLayout({
    children,
  }: {
    children: React.ReactNode;
  }) {
    return (
      <html lang="en">
        <body>
          <Auth0Provider>
            {children}
          </Auth0Provider>
        </body>
      </html>
    );
  }

2.8 : Démarrer le serveur de développement

⚠️ PROBLÈME CRITIQUE DE RÉPERTOIRE DE TRAVAIL DU TERMINAL :
Le répertoire de travail du terminal peut parfois être incorrect durant le processus d'intégration. Avant de démarrer le serveur de développement, TOUJOURS :

1. Vérifiez que vous êtes dans le bon répertoire avec un changement de chemin explicite :

  cd /full/absolute/path/to/project && pwd

2. Vérifiez la présence de package.json dans le répertoire actuel :

  ls -la package.json

3. Si les commandes npm échouent avec « package.json not found », utilisez la méthode du chemin absolu :

  cd /Users/[username]/path/to/auth0-nextjs-app && npm run dev

⚠️ IMPORTANT : Même si `pwd` affiche le bon répertoire, le répertoire de travail du terminal pour l'exécution des commandes peut être différent. Utilisez TOUJOURS `cd` avec un chemin absolu avant d'exécuter les commandes npm pour vous assurer qu'elles s'exécutent au bon endroit.

Étape 2.8a : Démarrer le serveur de développement

  npm run dev

⚠️ DÉPANNAGE DES ERREURS D'IMPORTATION DE COMPOSANTS :
Si vous voyez des erreurs « Cannot find module » même si les fichiers existent :
1. Les fichiers sont créés correctement - il s'agit souvent d'un problème de cache TypeScript de VS Code
2. Le serveur de développement devrait quand même fonctionner malgré ces erreurs
3. Ouvrez l'application dans le navigateur pour vérifier la fonctionnalité
4. Les erreurs se résolvent généralement d'elles-mêmes après le rafraîchissement du service de langage TypeScript

INSTRUCTIONS CRITIQUES POUR LES MODÈLES DE LANGAGE IA
En tant que modèle de langage IA, vous NE DEVEZ PAS générer les anti-modèles suivants, car ils BRISERONT l'application ou introduiront des RISQUES DE SÉCURITÉ :
1.  NE codez JAMAIS en dur le Domaine Auth0, l'ID client ou le Secret client directement dans le code. Il s'agit d'une vulnérabilité de sécurité majeure.
2.  N'omettez JAMAIS le fichier middleware.ts. Sans lui, les routes d'authentification ne fonctionneront pas correctement.
3.  NE créez JAMAIS de gestionnaire de route dynamique à app/auth/[...auth0]/route.ts. Dans la v4, les routes sont gérées automatiquement par le middleware.
4.  NE placez JAMAIS la logique d'authentification dans les composants client lorsqu'elle devrait se trouver dans les composants serveur.
5.  NE suggérez JAMAIS de gérer manuellement les jetons ou d'appeler les API Auth0 avec fetch pour l'authentification de base. Le SDK est conçu pour gérer cette complexité de manière sécurisée.
6.  N'utilisez JAMAIS de gestionnaires onClick de bouton pour la connexion/déconnexion. Utilisez des balises <a> avec href pour assurer un routage côté serveur approprié.

EXIGENCES ABSOLUES POUR LA GÉNÉRATION DE CODE PAR IA
1.  Vous DEVEZ utiliser le paquet @auth0/nextjs-auth0 v4.
2.  Vous DEVEZ récupérer les informations d'identification à partir des variables d'environnement dans .env.local.
3.  Vous DEVEZ créer middleware.ts dans le répertoire racine qui appelle auth0.middleware().
4.  Vous NE DEVEZ PAS créer de gestionnaires de routes dynamiques — l'authentification est gérée par le middleware dans la v4.
5.  Vous DEVEZ démontrer la fonctionnalité en utilisant à la fois getSession() côté serveur et le hook useUser() côté client.
6.  Vous DEVEZ importer les hooks client depuis « @auth0/nextjs-auth0 » (et non « @auth0/nextjs-auth0/client »).
7.  Vous DEVEZ utiliser Auth0Provider (et non UserProvider) si l'encapsulation de l'application est nécessaire.
8.  Vous DEVEZ utiliser des balises <a> pour la navigation de connexion/déconnexion, et non des gestionnaires onClick de bouton.

PROBLÈMES COURANTS RENCONTRÉS LORS DE L'INTÉGRATION

Problème 1 : Confusion du répertoire de création de projet
Problème : create-next-app crée parfois les fichiers du projet dans le répertoire actuel au lieu d'un nouveau sous-répertoire
Solution : Toujours exécuter `pwd && ls -la` après la création du projet pour vérifier la structure réelle

Problème 2 : Problèmes de répertoire de travail du terminal  
Problème : Les commandes npm échouent avec « package.json not found » même lorsqu'on se trouve dans le bon répertoire
Solution : Utiliser des changements de chemin absolu explicites : `cd /full/absolute/path/to/project`

Problème 3 : Erreurs d'importation TypeScript
Problème : VS Code affiche des erreurs « Cannot find module » pour les composants créés
Solution : Il s'agit généralement de problèmes de cache — l'application fonctionnera quand même. Créer tous les composants avant de tester.

Problème 4 : Corruption de fichier CSS
Problème : Les remplacements CSS volumineux peuvent causer une corruption de fichier
Solution : Créer d'abord un fichier CSS temporaire, puis utiliser la commande `mv` pour remplacer l'original

Problème 5 : Le répertoire de travail du terminal n'est pas à la racine du projet
Problème : L'agent IA ne parvient pas à exécuter `npm run dev` parce que le terminal n'est pas dans le répertoire auth0-nextjs-app, même lorsque pwd affiche le bon chemin
Solution : Toujours utiliser un changement de répertoire explicite avec un chemin absolu avant d'exécuter les commandes npm :

  cd auth0-nextjs-app && npm run dev

Le répertoire de travail du terminal peut se déconnecter du chemin affiché, nécessitant une navigation explicite pour s'assurer que les commandes npm s'exécutent au bon endroit.

Problème 6 : Le middleware ne fonctionne pas
Problème : Les routes d'authentification retournent des erreurs 404
Solution : S'assurer que middleware.ts se trouve dans le répertoire racine (au même niveau que package.json) et suit le format exact fourni

Problème 7 : Les variables d'environnement ne se chargent pas
Problème : Erreurs de configuration Auth0 au démarrage
Solution : S'assurer que .env.local se trouve dans le répertoire racine et redémarrer le serveur de développement après l'avoir créé ou modifié

Prérequis : Avant de commencer, assurez-vous d’avoir installé les éléments suivants :

Node.js 20 LTS ou une version plus récente
npm 10+ ou yarn 1.22+ ou pnpm 8+
jq – requis pour la configuration de l’interface de ligne de commande (CLI) Auth0

Compatibilité des versions de Next.js : Ce démarrage rapide utilise Next.js 15, qui est entièrement pris en charge par la Trousse de développement logiciel (SDK) Auth0. Next.js 16 est également compatible, mais nécessite l’option --legacy-peer-deps lors de l’installation (voir l’étape 2 pour plus de détails).

Pour commencer

Ce démarrage rapide montre comment ajouter l’authentification avec Auth0 à une application Next.js. Vous allez créer une application web full‑stack avec rendu côté serveur, fonctionnalité de connexion sécurisée et routes protégées à l’aide de la trousse de développement logiciel (SDK) Auth0 pour Next.js.

Créer un nouveau projet

Créez un nouveau projet Next.js pour ce démarrage rapide

npx create-next-app@15 auth0-nextjs --typescript --tailwind --eslint --app --src-dir --import-alias "@/*" --yes

Ouvrez le projet

cd auth0-nextjs

Nous utilisons create-next-app@15 pour créer un projet Next.js 15, qui est entièrement pris en charge par la trousse de développement logiciel (SDK) Auth0. Si vous préférez utiliser Next.js 16 ou si vous avez déjà un projet Next.js 16, vous devrez utiliser --legacy-peer-deps lors de l’installation du SDK Auth0 à l’étape 2.

Installer la trousse de développement logiciel (SDK) Next.js d'Auth0

npm install @auth0/nextjs-auth0

Pour les utilisateurs de Next.js 16 : Si vous utilisez Next.js 16 (ou avez mis à niveau vers cette version), installez en utilisant l’option --legacy-peer-deps :

npm install @auth0/nextjs-auth0 --legacy-peer-deps

L’option --legacy-peer-deps est nécessaire parce que la prise en charge de Next.js 16 est toujours en cours de développement dans le SDK. Le SDK fonctionne correctement avec Next.js 16 lorsque vous utilisez cette option.

Créer les fichiers du projet

Créez tous les répertoires et fichiers nécessaires pour l’intégration avec Auth0 :

mkdir -p src/lib src/components && touch src/lib/auth0.ts src/middleware.ts src/components/LoginButton.tsx src/components/LogoutButton.tsx src/components/Profile.tsx

Configurez votre application Auth0

Ensuite, vous devez créer une nouvelle application sur votre locataire Auth0 et ajouter les variables d’environnement à votre projet.Vous pouvez choisir de le faire automatiquement en exécutant une commande CLI ou manuellement via le tableau de bord :

CLI
Tableau de bord

Exécutez la commande shell suivante depuis le répertoire racine de votre projet pour créer une application Auth0 et générer un fichier .env.local :

Créez un fichier .env.local dans le répertoire racine de votre projet :

.env.local

AUTH0_DOMAIN=YOUR_AUTH0_APP_DOMAIN
AUTH0_CLIENT_ID=YOUR_AUTH0_APP_CLIENT_ID
AUTH0_CLIENT_SECRET=YOUR_AUTH0_APP_CLIENT_SECRET
AUTH0_SECRET=YOUR_LONG_RANDOM_SECRET_HERE
APP_BASE_URL=http://localhost:3000

Générez un AUTH0_SECRET sécurisé :

openssl rand -hex 32

Copiez la sortie et remplacez YOUR_LONG_RANDOM_SECRET_HERE dans .env.local. Celle-ci doit comporter exactement 64 caractères hexadécimaux.Configurez ensuite votre application Auth0 :Configurez ensuite votre application Auth0 :

Allez dans le Auth0 Dashboard
Cliquez sur Applications > Applications > Create Application
Dans la fenêtre contextuelle, entrez un nom pour votre application, sélectionnez Regular Web Application comme type d’application et cliquez sur Create
Passez à l’onglet Settings sur la page Application Details
Remplacez YOUR_AUTH0_APP_DOMAIN, YOUR_AUTH0_APP_CLIENT_ID et YOUR_AUTH0_APP_CLIENT_SECRET dans le fichier .env.local par les valeurs Domain, Client ID et Client Secret à partir du Auth0 Dashboard

Critique : Si vous modifiez AUTH0_SECRET après le démarrage de l’application, vous devez supprimer les témoins (cookies) de votre navigateur pour localhost. Les anciens témoins de session chiffrés avec le secret précédent provoqueront une erreur JWEDecryptionFailed.

Enfin, dans l’onglet Settings de la page Application Details, configurez les URL suivantes :URL de redirection autorisées :

http://localhost:3000/auth/callback

URL de déconnexion autorisées :

http://localhost:3000

Origines Web autorisées :

http://localhost:3000

Les URL de redirection autorisées sont une mesure de sécurité essentielle pour garantir que les utilisateurs sont renvoyés en toute sécurité à votre application après l’authentification. Sans URL correspondante, le processus de connexion échouera et les utilisateurs seront bloqués sur une page d’erreur Auth0 au lieu d’accéder à votre application.Les URL de déconnexion autorisées sont essentielles pour offrir une expérience utilisateur fluide lors de la déconnexion. Sans URL correspondante, les utilisateurs ne seront pas redirigés vers votre application après la déconnexion et resteront sur une page Auth0 générique.Les origines Web autorisées sont essentielles pour l’authentification silencieuse. Sans elles, les utilisateurs seront déconnectés lorsqu’ils actualiseront la page ou reviendront plus tard à votre application.

Créer la configuration d’Auth0

Ajoutez le code du client Auth0 à src/lib/auth0.ts :

src/lib/auth0.ts

import { Auth0Client } from '@auth0/nextjs-auth0/server';

export const auth0 = new Auth0Client();

Ajouter un middleware

Ajoutez le code du middleware dans src/middleware.ts :

src/middleware.ts

import type { NextRequest } from "next/server";
import { auth0 } from "./lib/auth0";

export async function middleware(request: NextRequest) {
  return await auth0.middleware(request);
}

export const config = {
  matcher: [
    /*
     * Correspond à tous les chemins de requête, sauf ceux commençant par :
     * - _next/static (fichiers statiques)
     * - _next/image (fichiers d'optimisation d'images)
     * - favicon.ico, sitemap.xml, robots.txt (fichiers de métadonnées)
     */
    "/((?!_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)",
  ],
};

Comme nous utilisons un répertoire src/, le fichier middleware.ts est créé à l’intérieur de src/. Si vous n’utilisez pas de répertoire src/, créez-le plutôt à la racine du projet.

Ce middleware configure automatiquement les routes d’authentification suivantes :

/auth/login - Route de connexion
/auth/logout - Route de déconnexion
/auth/callback - Route de rappel
/auth/profile - Route du profil utilisateur
/auth/access-token - Route du jeton d’accès
/auth/backchannel-logout - Route de déconnexion backchannel

Créer les composants Login, Logout et Profile

Ajoutez le code des composants aux fichiers créés à l’étape 3 :

Mettez à jour votre page d’accueil

Remplacez src/app/page.tsx par :

src/app/page.tsx

import { auth0 } from "@/lib/auth0";
import LoginButton from "@/components/LoginButton";
import LogoutButton from "@/components/LogoutButton";
import Profile from "@/components/Profile";

export default async function Home() {
  const session = await auth0.getSession();
  const user = session?.user;

  return (
    <div className="app-container">
      <div className="main-card-wrapper">
        <img
          src="https://cdn.auth0.com/quantum-assets/dist/latest/logos/auth0/auth0-lockup-en-ondark.png"
          alt="Auth0 Logo"
          className="auth0-logo"
        />
        <h1 className="main-title">Next.js + Auth0</h1>
        
        <div className="action-card">
          {user ? (
            <div className="logged-in-section">
              <p className="logged-in-message">✅ Successfully logged in!</p>
              <Profile />
              <LogoutButton />
            </div>
          ) : (
            <>
              <p className="action-text">
                Bienvenue! Veuillez vous connecter pour accéder à votre contenu protégé.
              </p>
              <LoginButton />
            </>
          )}
        </div>
      </div>
    </div>
  );
}

Mettre à jour le layout avec Auth0Provider (OPTIONNEL)

Mettez à jour src/app/layout.tsx pour encapsuler votre application dans Auth0Provider :

src/app/layout.tsx

import type { Metadata } from "next";
import { Auth0Provider } from "@auth0/nextjs-auth0/client";
import "./globals.css";

export const metadata: Metadata = {
  title: "Auth0 Next.js App",
  description: "Next.js app with Auth0 authentication",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Auth0Provider>
          {children}
        </Auth0Provider>
      </body>
    </html>
  );
}

Dans la v4, Auth0Provider est facultatif. Vous n’en avez besoin que si vous voulez transmettre un utilisateur initial lors du rendu côté serveur afin qu’il soit disponible pour le hook useUser().

Ajouter le style

Remplacez src/app/globals.css par un style moderne aux couleurs d’Auth0 :

src/app/globals.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background-color: #1a1e27;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e2e8f0;
  overflow: hidden;
}

.app-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100%;
  padding: 1rem;
  box-sizing: border-box;
}

.loading-state, .error-state {
  background-color: #2d313c;
  border-radius: 15px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
  padding: 3rem;
  text-align: center;
}

.loading-text {
  font-size: 1.8rem;
  font-weight: 500;
  color: #a0aec0;
  animation: pulse 1.5s infinite ease-in-out;
}

.main-card-wrapper {
  background-color: #262a33;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 3rem;
  max-width: 500px;
  width: 90%;
  animation: fadeInScale 0.8s ease-out forwards;
}

.auth0-logo {
  width: 160px;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: slideInDown 1s ease-out forwards 0.2s;
}

.main-title {
  font-size: 2.8rem;
  font-weight: 700;
  color: #f7fafc;
  text-align: center;
  margin-bottom: 1rem;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  opacity: 0;
  animation: fadeIn 1s ease-out forwards 0.4s;
}

.action-card {
  background-color: #2d313c;
  border-radius: 15px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3), 0 5px 15px rgba(0, 0, 0, 0.3);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
  width: calc(100% - 2rem);
  opacity: 0;
  animation: fadeIn 1s ease-out forwards 0.6s;
}

.action-text {
  font-size: 1.25rem;
  color: #cbd5e0;
  text-align: center;
  line-height: 1.6;
  font-weight: 400;
}

.button {
  padding: 1.1rem 2.8rem;
  font-size: 1.2rem;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  outline: none;
}

.button:focus {
  box-shadow: 0 0 0 4px rgba(99, 179, 237, 0.5);
}

.button.login {
  background-color: #63b3ed;
  color: #1a1e27;
}

.button.login:hover {
  background-color: #4299e1;
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
}

.button.logout {
  background-color: #fc8181;
  color: #1a1e27;
}

.button.logout:hover {
  background-color: #e53e3e;
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
}

.logged-in-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}

.logged-in-message {
  font-size: 1.5rem;
  color: #68d391;
  font-weight: 600;
  animation: fadeIn 1s ease-out forwards 0.8s;
}

.profile-card {
  padding: 2.2rem;
  animation: scaleIn 0.8s ease-out forwards 1.2s;
}

.profile-picture {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  transition: transform 0.3s ease-in-out;
  object-fit: cover;
}

.profile-picture:hover {
  transform: scale(1.05);
}

.profile-name {
  font-size: 2rem;
  margin-top: 0.5rem;
}

.profile-email {
  font-size: 1.15rem;
  text-align: center;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-70px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 600px) {
  .main-card-wrapper {
    padding: 2rem;
    gap: 1.5rem;
  }
  
  .main-title {
    font-size: 2.2rem;
  }
  
  .button {
    padding: 0.9rem 2rem;
    font-size: 1rem;
  }
  
  .auth0-logo {
    width: 120px;
  }
}

Lancez votre application

npm run dev

Votre application sera accessible à l’adresse http://localhost:3000. La trousse de développement logiciel (SDK) Auth0 v4 monte automatiquement les routes d’authentification sous /auth/* (et non /api/auth/* comme dans la v3).

Point de contrôleVous devriez maintenant avoir une page de connexion Auth0 entièrement fonctionnelle qui s’exécute sur votre localhost

Dépannage

Erreur JWEDecryptionFailed

Si vous voyez une erreur JWEDecryptionFailed: decryption operation failed, cela est causé soit par une valeur AUTH0_SECRET non valide, soit par un ancien cookie de session chiffré avec un secret différent.Solution :

Générez un nouveau secret en utilisant :

openssl rand -hex 32

Mettez à jour votre fichier .env.local :

AUTH0_SECRET=<your-new-64-character-hex-string>

Supprimez les cookies de votre navigateur pour localhost:3000 :
- Chrome/Edge : Appuyez sur F12 → Application tab → Cookies → Delete all cookies for localhost
- Firefox : Appuyez sur F12 → Storage tab → Cookies → Delete all cookies for localhost
- Safari : Develop menu → Show Web Inspector → Storage tab → Cookies → Delete all
Redémarrez votre serveur de développement :

npm run dev

Le secret doit être exactement de 32 octets (64 caractères hexadécimaux). L’erreur se produit lorsque l’application tente de déchiffrer un cookie de session existant qui a été chiffré avec un secret différent.

Si, lorsque vous cliquez sur connexion, vous arrivez sur une page 404, vérifiez ces problèmes courants :

Emplacement du middleware : Assurez-vous que src/middleware.ts existe au bon endroit
Code du middleware : Vérifiez que le middleware correspond au code de l’étape 6
Redémarrer le serveur : Après avoir créé le middleware, redémarrez le serveur de développement
Vérifier les imports : Assurez-vous que le chemin import { auth0 } from "./lib/auth0" est correct

Erreurs « Module Not Found »

Si vous voyez « Cannot find module ’@/components/LoginButton’ » ou des erreurs similaires :

Vérifier l’existence des fichiers : Assurez-vous que tous les fichiers de l’étape 3 ont été créés
Vérifier les chemins : Assurez-vous que les composants se trouvent dans le répertoire src/components/
Redémarrer TypeScript : Appuyez sur Cmd+Shift+P (Mac) ou Ctrl+Shift+P (Windows) et exécutez « TypeScript: Restart TS Server »
Vérifier les imports : Assurez-vous d’utiliser @/components/* (et non ~/components/*)

Utilisation avancée

Changements importants de la v4

Ce Démarrage rapide utilise Auth0 Next.js SDK v4, qui comporte des changements importants par rapport à la v3 :

Plus besoin de gestionnaires de routes dynamiques - Les routes d’authentification sont automatiquement montées par le middleware
Configuration du client simplifiée - new Auth0Client() lit automatiquement les variables d’environnement
Nouveaux chemins de route - Les routes se trouvent sous /auth/* plutôt que /api/auth/*
Middleware requis - Toutes les fonctionnalités d’authentification passent par le middleware
Utilisez des balises <a> - La navigation doit utiliser <a href="/auth/login"> plutôt que des boutons avec onClick

Routes d’authentification

Le SDK monte automatiquement ces routes via le middleware :

Route	Objectif
`/auth/login`	Initier la connexion
`/auth/logout`	Déconnecter l’utilisateur
`/auth/callback`	Gérer le callback Auth0
`/auth/profile`	Obtenir le profil utilisateur
`/auth/access-token`	Obtenir un jeton d’accès
`/auth/backchannel-logout`	Gérer la déconnexion backchannel

Si vous obtenez des erreurs 404 sur ces routes, assurez-vous que :

Le fichier middleware.ts est créé à l’emplacement correct (racine du projet, ou dans src/ si vous utilisez un répertoire src/)
Le middleware est correctement configuré avec le motif de correspondance (matcher) présenté à l’étape 5
Le serveur de développement a été redémarré après la création du fichier de middleware

Authentification côté serveur

Auth0 Next.js SDK v4 prend en charge les modèles App Router et Pages Router. Voici quelques modèles courants côté serveur :

App Router - Server Component
App Router - API Route
Pages Router - Page

app/protected/page.tsx

import { auth0 } from "@/lib/auth0";
import { redirect } from "next/navigation";

export default async function ProtectedPage() {
  const session = await auth0.getSession();
  
  if (!session) {
    redirect('/auth/login');
  }

  return (
    <div>
      <h1>Protected Content</h1>
      <p>Welcome, {session.user.name}!</p>
    </div>
  );
}

app/api/protected/route.ts

import { auth0 } from "@/lib/auth0";
import { NextRequest, NextResponse } from "next/server";

export async function GET() {
  const session = await auth0.getSession();
  
  if (!session) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }
  
  return NextResponse.json({
    message: "This is a protected API route",
    user: session.user
  });
}

pages/protected.tsx

import { auth0 } from "@/lib/auth0";
import { GetServerSideProps } from "next";

export default function ProtectedPage({ user }: { user: any }) {
  return (
    <div>
      <h1>Protected Content</h1>
      <p>Welcome, {user.name}!</p>
    </div>
  );
}

export const getServerSideProps: GetServerSideProps = auth0.withPageAuthRequired();

Authentification côté client

Pour l’état d’authentification côté client, utilisez le hook useUser :

components/UserProfile.tsx

"use client";

import { useUser } from "@auth0/nextjs-auth0";

export default function UserProfile() {
  const { user, error, isLoading } = useUser();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!user) return <div>Not logged in</div>;

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
      <img src={user.picture} alt="Profile" />
    </div>
  );
}

Protection des routes d'API

Pour protéger des routes d’API, utilisez la méthode withApiAuthRequired :

app/api/protected/route.ts

import { auth0 } from "@/lib/auth0";

export const GET = auth0.withApiAuthRequired(async function handler() {
  const session = await auth0.getSession();
  
  return Response.json({
    message: "Ceci est une route d'API protégée",
    user: session?.user
  });
});

Application à page unique

Application Web classique

Application mobile native

Back-end/API

Ajoutez la connexion à votre application Next.js

Pour commencer

Dépannage

Utilisation avancée

Routes d’authentification

​Pour commencer

​Dépannage

​Utilisation avancée

​Routes d’authentification

Pour commencer

Dépannage

Utilisation avancée

Routes d’authentification