Next.js App Router : comment protéger des pages derrière une connexion ?

Question

J'ai `/dashboard` et `/settings` qui doivent être réservés aux utilisateurs connectés. Middleware, layout, ou vérification dans chaque page ?

Accepted Answer

Fais-le **en couches** :

1. **Middleware** : redirection rapide vers `/login` s'il n'y a pas de cookie de session. C'est bien pour l'UX, mais ça ne suffit pas pour la sécurité : le middleware ne voit pas tout, et un bug de `matcher` peut laisser passer une route.

2. **Dans le code serveur qui lit les données** : c'est la vraie protection. Vérifie la session là où tu accèdes aux données (Server Component, Server Action, Route Handler) :

```tsx
// app/dashboard/page.tsx
import { redirect } from 'next/navigation';
import { auth } from '@/lib/auth';

export default async function Dashboard() {
  const session = await auth();
  if (!session) redirect('/login');
  return <DashboardView userId={session.user.id} />;
}
```

3. Ne compte **pas** uniquement sur un `layout.tsx` : les layouts ne se ré-exécutent pas à chaque navigation client, et ils ne protègent pas les Server Actions.

En pratique : une fonction `requireUser()` réutilisable, appelée partout où tu lis ou modifies des données.

1 réponse