Fondamentaux de l'authentification
Comprendre les concepts de sécurité et intégrer un système d'authentification dans une application Next.js.
L'authentification ("qui êtes-vous ?") et l'autorisation ("avez-vous le droit ?") sont deux concepts distincts mais complémentaires. L'authentification vérifie l'identité d'un utilisateur — typiquement par email/mot de passe ou OAuth (Google, GitHub). L'autorisation détermine ensuite ce que cet utilisateur peut faire : accéder à son profil, modifier ses données, administrer le site. Confondre les deux est une source fréquente de failles de sécurité.
Les sessions et les tokens sont les mécanismes qui maintiennent l'utilisateur connecté. Un cookie de session stocke un identifiant côté navigateur que le serveur vérifie à chaque requête. Un JWT (JSON Web Token) contient les informations d'identité directement dans le token, signé cryptographiquement. Clerk gère toute cette complexité : il fournit un ClerkProvider qui enveloppe votre application, des composants prêts à l'emploi (SignIn, SignUp, UserButton) et des helpers serveur (auth(), currentUser()) pour protéger vos routes.
Better Auth est une alternative open-source à Clerk qui vous donne plus de contrôle sur la base de données et le flux d'authentification. Le choix entre Clerk (hébergé, rapide à intégrer) et Better Auth (self-hosted, plus de contrôle) dépend de vos besoins. Pour un premier projet, Clerk permet de se concentrer sur les fonctionnalités métier sans gérer l'infrastructure d'authentification.
// app/layout.tsx — Envelopper l'application avec ClerkProvider
import { ClerkProvider } from "@clerk/nextjs";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<ClerkProvider>
<html lang="fr">
<body>{children}</body>
</html>
</ClerkProvider>
);
}
// app/dashboard/page.tsx — Page protégée (Server Component)
import { auth } from "@clerk/nextjs/server";
import { redirect } from "next/navigation";
export default async function DashboardPage() {
const { userId } = await auth();
if (!userId) {
redirect("/sign-in");
}
return <h1>Bienvenue sur votre tableau de bord</h1>;
}
// Composants Clerk prêts à l'emploi :
// <SignIn /> — formulaire de connexion
// <SignUp /> — formulaire d'inscription
// <UserButton /> — avatar avec menu de profilExercice pratique
Exercice pratique
Expliquez le flux complet d'authentification quand un utilisateur se connecte à votre application, étape par étape.
- Décrivez ce qui se passe quand l'utilisateur clique sur "Se connecter".
- Expliquez comment le serveur vérifie l'identité et crée une session.
- Décrivez comment les requêtes suivantes sont authentifiées grâce au cookie de session.
- Expliquez ce qui se passe quand le cookie expire ou que l'utilisateur se déconnecte.
✓Vous avez réussi si vous pouvez expliquer les quatre étapes du flux et si vous comprenez pourquoi le cookie est HTTP-Only (protection contre le vol de session par JavaScript malveillant).