0Pricing
React Academy · Leçon

Configurer Auth.js dans l’App Router de Next.js

Installez Auth.js, configurez les gestionnaires de routes et ajoutez un fournisseur OAuth GitHub.

Configurer Auth.js dans l’App Router de Next.js est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Qu’est-ce qu’Auth.js ?

Auth.js (anciennement NextAuth.js v5) est une bibliothèque d’authentification complète pour Next.js. Elle gère les fournisseurs OAuth, les identifiants, les sessions et les JWT sans configuration supplémentaire.

Installation

Installez la version bêta d’Auth.js et initialisez le fichier de configuration.

npm install next-auth@beta

# Create auth.ts at project root
touch auth.ts

Créer la configuration d’authentification

Définissez votre configuration d’authentification dans auth.ts à la racine du projet, avec les fournisseurs et les fonctions de rappel.

import NextAuth from 'next-auth';
import GitHub from 'next-auth/providers/github';

export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [GitHub],
  callbacks: {
    session({ session, token }) {
      session.user.id = token.sub!;
      return session;
    },
  },
});

Configurer le gestionnaire de route

Créez un gestionnaire de route générique dans app/api/auth/[...nextauth]/route.ts qui délègue l’exécution aux gestionnaires d’Auth.js.

// app/api/auth/[...nextauth]/route.ts
import { handlers } from '@/auth';

export const { GET, POST } = handlers;

Variables d’environnement

Définissez les variables d’environnement requises par les fournisseurs OAuth. AUTH_SECRET est requis pour signer les JWT.

# .env.local
AUTH_SECRET=your-random-secret-here

# GitHub OAuth
AUTH_GITHUB_ID=your-github-client-id
AUTH_GITHUB_SECRET=your-github-client-secret

# Generate AUTH_SECRET:
# npx auth secret

Ajouter des boutons de connexion et de déconnexion

Importez signIn et signOut depuis auth.ts et utilisez-les dans les formulaires de composants serveur.

import { signIn, signOut } from '@/auth';

export function SignInButton() {
  return (
    <form action={async () => { 'use server'; await signIn('github'); }}>
      <button type="submit">Sign in with GitHub</button>
    </form>
  );
}

export function SignOutButton() {
  return (
    <form action={async () => { 'use server'; await signOut(); }}>
      <button type="submit">Sign out</button>
    </form>
  );
}

Lire la session dans les composants serveur

Appelez auth() depuis auth.ts dans n’importe quel composant serveur ou gestionnaire de route pour obtenir la session actuelle.

import { auth } from '@/auth';

export default async function ProfilePage() {
  const session = await auth();
  if (!session) redirect('/login');
  return <h1>Welcome, {session.user?.name}</h1>;
}

Protéger les pages avec un intergiciel

Utilisez l’intergiciel d’Auth.js pour protéger les routes au niveau de l’infrastructure périphérique sans exécuter la logique serveur à chaque requête.

// middleware.ts
export { auth as middleware } from '@/auth';

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

Sessions en base de données

Ajoutez un adaptateur de base de données (par exemple @auth/prisma-adapter) pour conserver les sessions, les utilisateurs et les comptes dans une base de données plutôt que dans des JWT.

import { PrismaAdapter } from '@auth/prisma-adapter';
import { prisma } from '@/lib/prisma';

export const { handlers, auth, signIn, signOut } = NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [GitHub],
  session: { strategy: 'database' },
});

Personnaliser le type de Session

Étendez les types de session d’Auth.js pour y inclure des champs personnalisés, comme l’ID ou le rôle de l’utilisateur.

// types/next-auth.d.ts
import { DefaultSession } from 'next-auth';

declare module 'next-auth' {
  interface Session {
    user: { id: string; role: string } & DefaultSession['user'];
  }
}

Gestion des erreurs

Par défaut, Auth.js redirige vers /error en cas d’échec de l’authentification. Créez app/error/page.tsx pour personnaliser la page d’erreur.

Vérification rapide

Quel fichier devez-vous créer pour exposer les gestionnaires GET et POST d’Auth.js dans le routeur App de Next.js ?

Récapitulatif

Installez next-auth@beta, créez auth.ts avec les fournisseurs et les fonctions de rappel, exposez les gestionnaires dans app/api/auth/[...nextauth]/route.ts, définissez AUTH_SECRET et les variables d’environnement des fournisseurs, puis lisez la session avec auth() dans les composants serveur.

Questions Fréquemment Posées

La leçon « Configurer Auth.js dans l’App Router de Next.js » est-elle gratuite ?

Oui — le texte complet de « Configurer Auth.js dans l’App Router de Next.js » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Configurer Auth.js dans l’App Router de Next.js » ?

Installez Auth.js, configurez les gestionnaires de routes et ajoutez un fournisseur OAuth GitHub. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Configurer Auth.js dans l’App Router de Next.js » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Configurer Auth.js dans l’App Router de Next.js
  2. Gestion des sessions et hook useSession
  3. Fournisseur d’identifiants et connexion personnalisée
  4. Protection des routes basée sur un middleware
← Retour à React Academy