Auth0 avec Next.js : App Router, SSR et Server Components

Intégrer Auth0 dans une application Next.js 14+ avec le SDK @auth0/nextjs-auth0. App Router, Server Components, middleware et protection des routes API.

Par Auth0.Expert · 2025-02-18 · 12 min de lecture

Next.js App Router SSR

Auth0 avec Next.js 14 : guide complet App Router

TL;DR

Le SDK @auth0/nextjs-auth0 supporte nativement le App Router de Next.js 14. Ce guide couvre la configuration, les Server Components, les Server Actions et la protection des routes API.

---

Installation

Ce bloc permet d’installer le SDK Auth0 pour Next.js et de configurer les variables d’environnement nécessaires à l’intégration Auth0.

npm install @auth0/nextjs-auth0

Ce fichier d’exemple montre comment définir les variables d’environnement indispensables à la connexion Auth0 sur votre application Next.js.

# .env.local
AUTH0_SECRET='use [openssl rand -hex 32] to generate a 32 bytes value'
AUTH0_BASE_URL='http://localhost:3000'
AUTH0_ISSUER_BASE_URL='https://YOUR_DOMAIN.auth0.com'
AUTH0_CLIENT_ID='YOUR_CLIENT_ID'
AUTH0_CLIENT_SECRET='YOUR_CLIENT_SECRET'
AUTH0_AUDIENCE='https://api.yourapp.com'
AUTH0_SCOPE='openid profile email offline_access'

---

Route Handler : /api/auth/[auth0]

Ici, nous mettons en place le gestionnaire de routes Auth0 pour toutes les actions liées à l’authentification (login, logout, callback, profil).

// app/api/auth/[auth0]/route.ts
import { handleAuth } from '@auth0/nextjs-auth0';

export const GET = handleAuth();
// Gère automatiquement : /api/auth/login, /api/auth/callback, /api/auth/logout, /api/auth/me

---

Middleware : protéger des routes

Ce middleware vérifie automatiquement que l'utilisateur est authentifié avant d'accéder aux pages ou APIs sensibles.

// middleware.ts
import { withMiddlewareAuthRequired } from '@auth0/nextjs-auth0/edge';

export default withMiddlewareAuthRequired();

export const config = {
  matcher: [
    '/dashboard/:path*',
    '/settings/:path*',
    '/api/protected/:path*',
  ],
};

---

Server Component : afficher l'utilisateur

Ce composant serveur affiche le profil utilisateur Auth0 connecté ou redirige vers la page de login si l'utilisateur n'est pas authentifié.

// app/dashboard/page.tsx
import { getSession } from '@auth0/nextjs-auth0';
import { redirect } from 'next/navigation';

export default async function DashboardPage() {
  const session = await getSession();

  if (!session) {
    redirect('/api/auth/login');
  }

  const { user } = session;

  return (
    <div>
      <h1>Bienvenue, {user.name}</h1>
      <img src={user.picture} alt={user.name} />
      <p>Email: {user.email}</p>
    </div>
  );
}

Ce composant sécurise la page dashboard et affiche les informations de l'utilisateur Auth0.

---

Appeler une API depuis un Server Component

Voici comment obtenir un accessToken côté serveur et appeler une API externe sécurisée depuis un Server Component Next.js.

// app/dashboard/data/page.tsx
import { getAccessToken } from '@auth0/nextjs-auth0';

export default async function DataPage() {
  const { accessToken } = await getAccessToken();

  const data = await fetch('https://api.yourapp.com/data', {
    headers: { Authorization: `Bearer ${accessToken}` },
    cache: 'no-store', // SSR : toujours frais
  }).then(r => r.json());

  return <DataDisplay data={data} />;
}

Cette approche permet de sécuriser vos échanges API avec un token Auth0 et d’afficher le résultat côté serveur.

---

Route API protégée

Cette API sécurisée côté serveur valide le plan de l'utilisateur via les claims Auth0 avant d'autoriser l'accès aux données.

// app/api/protected/data/route.ts
import { withApiAuthRequired, getSession } from '@auth0/nextjs-auth0';
import { NextResponse } from 'next/server';

export const GET = withApiAuthRequired(async function handler(request) {
  const session = await getSession();
  const user = session!.user;

  // Vérifier le plan depuis les custom claims
  const plan = user['https://yourapp.com/plan'];
  if (plan !== 'pro' && plan !== 'enterprise') {
    return NextResponse.json(
      { error: 'Pro plan required' },
      { status: 403 }
    );
  }

  const data = await fetchUserData(user.sub);
  return NextResponse.json(data);
});

Ce code protège l’API par Auth0 et filtre l’accès en fonction des droits utilisateur personnalisés.

---

Client Component : hook useUser

Ce composant React côté client permet d'afficher dynamiquement les infos de l'utilisateur Auth0 ou de proposer la connexion.

// components/UserMenu.tsx
'use client';
import { useUser } from '@auth0/nextjs-auth0/client';

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

  if (isLoading) return <Skeleton />;
  if (error) return <div>Erreur: {error.message}</div>;

  if (!user) {
    return <a href="/api/auth/login">Se connecter</a>;
  }

  return (
    <div>
      <span>{user.name}</span>
      <a href="/api/auth/logout">Se déconnecter</a>
    </div>
  );
}

---

UserProvider pour les Client Components

Ce wrapper React fournit le contexte utilisateur Auth0 à tous les composants enfants côté client.

// app/layout.tsx
import { UserProvider } from '@auth0/nextjs-auth0/client';

export default function RootLayout({ children }) {
  return (
    <html lang="fr">
      <body>
        <UserProvider>
          {children}
        </UserProvider>
      </body>
    </html>
  );
}

---

Personnaliser le login avec afterCallback

Ici, vous pouvez enrichir la session utilisateur Auth0 avec des données provenant de votre base de données lors du callback.

// app/api/auth/[auth0]/route.ts
import { handleAuth, handleCallback } from '@auth0/nextjs-auth0';

export const GET = handleAuth({
  callback: handleCallback({
    afterCallback: async (req, session) => {
      // Enrichir la session après le callback
      // session.user contient le profil Auth0
      const userData = await fetchUserFromDB(session.user.sub);

      return {
        ...session,
        user: {
          ...session.user,
          db_id: userData.id,
          subscription: userData.subscription,
        },
      };
    },
  }),
});

Ce code ajoute dynamiquement des attributs personnalisés au profil utilisateur stocké en session lors du login.

---

Refresh automatique des tokens

Voici comment gérer l’actualisation automatique des tokens d’accès via la configuration de session Auth0.

// next.config.js
module.exports = {
  // Le SDK gère automatiquement le refresh via les sessions côté serveur
  // Configurer la durée de vie des sessions :
  // AUTH0_SESSION_ROLLING_DURATION=86400 (1 jour)
  // AUTH0_SESSION_ABSOLUTE_DURATION=604800 (7 jours)
};

---

> ⚡ Auth0 + Next.js : nos équipes livrent des applications Next.js 14 avec Auth0 intégré, SSR, ISR et protection complète des routes en 1 à 2 semaines.

📧 [email protected]