0Pricing
React Academy · Leçon

Gestion des sessions et hook useSession

Accédez aux données de session dans les composants serveur et client, et protégez les pages selon l’état d’authentification.

Gestion des sessions et hook useSession est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.

Types de session dans Auth.js

Auth.js prend en charge deux stratégies de session : JWT (par défaut, jeton sans état dans un cookie) et base de données (enregistrement de session dans une base de données, pouvant être invalidé côté serveur).

useSession dans les composants client

useSession() est une fonction de composant client qui lit la session actuelle. Elle renvoie data (session), status ('loading' | 'authenticated' | 'unauthenticated') et une fonction update.

'use client';
import { useSession } from 'next-auth/react';

export function UserAvatar() {
  const { data: session, status } = useSession();
  if (status === 'loading') return <Spinner />;
  if (status === 'unauthenticated') return <Link href="/login">Sign in</Link>;
  return <img src={session.user?.image ?? ''} alt={session.user?.name ?? ''} />;
}

Configurer SessionProvider

Entourez votre application (ou une partie de l’arborescence d’un composant client) avec SessionProvider afin que useSession puisse accéder au contexte de session.

// app/providers.tsx
'use client';
import { SessionProvider } from 'next-auth/react';

export function Providers({ children }: { children: React.ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>;
}

// app/layout.tsx
import { Providers } from './providers';
export default function RootLayout({ children }) {
  return <html><body><Providers>{children}</Providers></body></html>;
}

auth() dans les composants serveur

Dans les composants serveur, utilisez directement auth() : aucune fonction hook ni aucun fournisseur n’est nécessaire. La session est lue dans le cookie côté serveur.

import { auth } from '@/auth';

export default async function Header() {
  const session = await auth();
  return (
    <nav>
      {session ? (
        <span>Hello, {session.user?.name}</span>
      ) : (
        <Link href="/login">Sign in</Link>
      )}
    </nav>
  );
}

Protéger les routes côté client

Utilisez useSession avec l’option required: true pour rediriger automatiquement les utilisateurs non authentifiés vers la page de connexion.

'use client';
import { useSession } from 'next-auth/react';

export default function ProtectedPage() {
  const { data: session } = useSession({ required: true });
  // session is never null here — unauthenticated users are redirected
  return <div>Welcome, {session?.user?.name}</div>;
}

Mettre à jour la session

Appelez la fonction update() renvoyée par useSession pour actualiser la session, par exemple après la mise à jour d’un profil, sans vous déconnecter puis vous reconnecter.

const { data: session, update } = useSession();

async function handleNameChange(newName: string) {
  await updateUserName(newName); // API call
  await update({ user: { name: newName } }); // refresh session
}

Fonctions de rappel des sessions JWT

Utilisez la fonction de rappel jwt pour ajouter des données personnalisées au jeton JWT lors de la connexion, puis la fonction de rappel session pour les exposer dans l’objet de session.

callbacks: {
  async jwt({ token, user }) {
    if (user) token.role = user.role; // add on first sign-in
    return token;
  },
  async session({ session, token }) {
    session.user.role = token.role as string;
    return session;
  },
},

Expiration de la session

Configurez la durée maximale de la session dans la configuration d’Auth.js. Les sessions JWT sont automatiquement actualisées à chaque requête lorsqu’elles sont actives.

export const { handlers, auth } = NextAuth({
  session: {
    strategy: 'jwt',
    maxAge: 30 * 24 * 60 * 60, // 30 days
    updateAge: 24 * 60 * 60,   // refresh if older than 1 day
  },
});

Invalider les sessions en base de données

Les sessions en base de données peuvent être révoquées côté serveur, ce qui est utile pour forcer la déconnexion. Supprimez l’enregistrement de session de la base de données pour l’invalider immédiatement.

// Server Action to log out all devices:
async function logOutAllDevices() {
  'use server';
  const session = await auth();
  if (session) await db.session.deleteMany({ where: { userId: session.user.id } });
  redirect('/login');
}

Contrôle d’accès par rôle dans les composants client

Lisez le rôle de la session avec useSession et affichez l’interface conditionnellement en fonction de celui-ci.

const { data: session } = useSession();
const isAdmin = session?.user?.role === 'admin';

return (
  <>
    {isAdmin && <AdminPanel />}
    <UserContent />
  </>
);

Vérification rapide

Quel fournisseur doit entourer votre application pour que useSession() fonctionne dans les composants client ?

Récapitulatif

Utilisez auth() pour accéder à la session dans les composants serveur et useSession() dans les composants client entourés par SessionProvider. Ajoutez des données personnalisées avec les fonctions de rappel JWT et de session, mettez à jour les sessions côté client avec update() et configurez maxAge pour l’expiration des sessions.

Questions Fréquemment Posées

La leçon « Gestion des sessions et hook useSession » est-elle gratuite ?

Oui — le texte complet de « Gestion des sessions et hook useSession » 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 « Gestion des sessions et hook useSession » ?

Accédez aux données de session dans les composants serveur et client, et protégez les pages selon l’état d’authentification. 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 2 sur 4.

Combien de temps prend la leçon « Gestion des sessions et hook useSession » ?

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