Comment créer une route protégée

Apprends à sécuriser tes routes dans React Router 7 en gérant l’authentification côté serveur et en évitant les failles de sécurité.

5 juin 2025

4 min read

Code de la leçon

Continuez votre apprentissage

Accédez aux 9 modules et 76 leçons de cette formation.

599€

Accès à vie · Garantie 30 jours

Toutes les pages ne se valent pas :

- un tableau de bord, - un formulaire de paiement, - des paramètres de compte ...

Ces écrans doivent être accessibles uniquement aux utilisateurs authentifiés. Dans React Router 7 tu peux tester la session directement dans chaque route ; mais recopier le même if (!user) redirect(...) devient vite pénible et risqué : la première omission est une faille de sécurité.

Dans cette leçon tu vas :

détecter l’utilisateur depuis le cookie de session ;
transformer ce test en helper réutilisable ;
l’appeler aussi bien dans les loader que dans les action ;
comprendre le flux complet : redirection, affichage et gestion d’erreur.

Le module précédent a posé le cookie __session avec l’userId à la connexion. Créons un utilitaire pour le récupérer :

app/server/sessions.server.ts

1import { createCookieSessionStorage } from "react-router"
2import { prisma } from "./db.server"
3
4type SessionData = { userId: string }
5
6const { getSession, commitSession, destroySession } =
7  createCookieSessionStorage<SessionData>({
8    cookie: {
9      name: "__session",
10      sameSite: "lax",
11      httpOnly: true,
12      path: "/",
13      secrets: [process.env.SESSION_SECRET!], // ➜ prod only
14      secure: process.env.NODE_ENV === "production",
15    },
16  })
17
18export async function getOptionalUser({ request }: { request: Request }) {
19  const session = await getSession(request.headers.get("Cookie"))
20  const id = session.get("userId") as string | undefined
21  if (!id) return null
22
23  // vérif anti-forgery : l’id existe *vraiment* en base
24  return prisma.user.findUnique({
25    where: { id: Number(id) },
26    select: { id: true, firstName: true, lastName: true },
27  })
28}

getOptionalUser renvoie soit l’utilisateur, soit null. C’est idéal pour afficher un bouton Login lorsque personne n’est connecté.

Le profil, la facturation, l’administration… doivent être fermés : pas d’utilisateur ⇒ pas d’accès. On factorise ce comportement dans une seule fonction :

app/server/sessions.server.ts

1import { redirect } from "react-router"
2
3export async function requireUser({ request }: { request: Request }) {
4  const user = await getOptionalUser({ request })
5  if (!user) {
6    throw redirect("/login") // ⬅️ stoppe le loader et redirige
7  }
8  return user
9}

Remarque : redirect() lève déjà une Response HTTP 302, React Router capture l’exception et envoie le bon header au navigateur – aucun composant d’erreur n’est rendu.

app/routes/profile.tsx

1import type { LoaderFunctionArgs } from "react-router"
2import { requireUser } from "~/server/sessions.server"
3
4export async function loader({ request }: LoaderFunctionArgs) {
5  // 🔒 bloque d’emblée les visiteurs
6  const user = await requireUser({ request })
7  return { user }
8}

Visiteur anonyme ? Il est téléporté sur /login. Utilisateur connecté ? Le loader continue et fournit le profil.

Les mutations POST/PUT/DELETE doivent aussi être protégées :

{5,7} app/routes/profile.tsx

1import type { ActionFunctionArgs } from "react-router"
2
3export async function action({ request }: ActionFunctionArgs) {
4  const user = await requireUser({ request })       // 🔒 encore
5  const form = await request.formData()
6  // … mise à jour du profil …
7  return null
8}

Sans ce garde-fou un utilisateur malveillant pourrait envoyer une requête curl -X POST /profile et modifier n’importe quelle donnée.

La racine de l’app (app/root.tsx) charge toujours ; profitons-en pour y remplir l’objet utilisateur une seule fois :

app/root.tsx

1export async function loader({ request }: LoaderFunctionArgs) {
2  const user = await getOptionalUser({ request })
3  return data({ user })
4}

Puis expose-le via un hook maison :

app/root.tsx

1import { useRouteLoaderData } from "react-router"
2
3export function useOptionalUser() {
4  const data = useRouteLoaderData<typeof loader>("root")
5  return data?.user ?? null
6}

Maintenant n’importe quelle page fait simplement :

app/routes/index.tsx

1const user = useOptionalUser()

sans requête supplémentaire.

1sequenceDiagram
2  participant B as Navigateur
3  participant SSR as Loader
4  participant DB as DB Prisma
5
6  B->>SSR: GET /profile (cookies?)
7  SSR->>SSR: requireUser()
8  SSR->>DB: SELECT user WHERE id = cookie
9  alt user trouvé
10    SSR-->>B: 200 + HTML
11  else pas de user
12    SSR-->>B: 302 Redirect /login
13  end

Le cookie arrive dans l’entête Cookie.
requireUser lit le cookie, teste l’existence en BDD.
✅ Présent : le rendu continue. ❌ Absent : throw redirect("/login"), aucune autre ligne ne s’exécute.

getOptionalUser lit l’id en cookie et vérifie qu’il existe en base.
requireUser encapsule la redirection ; on l’appelle dans chaque loader et action à sécuriser.
Utilise throw redirect() – pas besoin de return.
Charge l’utilisateur une seule fois dans root.tsx ; expose-le avec useOptionalUser() pour éviter les requêtes redondantes.
La sécurité se joue côté serveur : même un fetch manuel doit passer par la garde.

Quiz interactifTestez vos connaissances

Validez votre compréhension du module avec notre quiz interactif personnalisé.

Comprendre les concepts fondamentaux

Quelle est la principale différence entre les composants client et serveur dans React ?

Les composants serveur peuvent utiliser useState

Optimisation des performances

Quelle technique est recommandée pour éviter les rendus inutiles dans React ?

Ajouter plus d'états locaux

Architecture des données

Quel hook permet de gérer les effets de bord dans un composant React ?

useState

Débloquez ce quiz et tous les autres contenus

Leçon suivante