Comment détruire le cookie avec une déconnexion

Pourquoi revoir la logique de déconnexion ?

Clique‐tu sur « Logout », tu es toujours renvoyé sur la page d’accueil. Ce choix paraît anodin mais pose deux soucis :

1. Cookie fantôme Si l’utilisateur falsifie son cookie (document.cookie) avant de se déconnecter, le backend ne le reconnaît plus… mais le cookie reste stocké. Mieux vaut le supprimer pour repartir d’une session propre.
2. UX moyenne Souvent on se déconnecte pour changer de compte et revenir immédiatement sur la page courante (ex. /users). Forcer un détour par la home rend la navigation inutilement longue.

Nous allons :

• centraliser la destruction du cookie dans une fonction logout();
• permettre la redirection vers la page d’origine grâce au paramètre redirectTo.

1. Créer un helper logout() côté serveur

1
import { createCookieSessionStorage, redirect } from "react-router";
2

3
const { getSession, destroySession } = createCookieSessionStorage({
4
  cookie: { name: "__session" }            // config réduite pour l'exemple
5
});
6

7
export async function logout({
8
  request,
9
  redirectTo = "/"
10
}: { request: Request; redirectTo?: string }) {
11
  const session = await getSession(request.headers.get("Cookie"));
12
  return redirect(redirectTo, {
13
    headers: { "Set-Cookie": await destroySession(session) } // 🍪 supprimé
14
  });
15
}

• destroySession(session) renvoie un header Set-Cookie qui vide le cookie côté navigateur.
• Le helper est réutilisable dans n’importe quelle route ou middleware.

2. Raccourcir la route /logout

L’endpoint ne fait désormais qu’appeler le helper et transmettre le paramètre d’URL éventuel :

1
import { logout } from "~/server/sessions.server";
2

3
export async function action({ request }: ActionFunctionArgs) {
4
  const url         = new URL(request.url);
5
  const redirectTo  = url.searchParams.get("redirectTo") || "/";
6
  return logout({ request, redirectTo });
7
}

3. Éviter le « décalage » côté client

Pour remplir automatiquement redirectTo avec la page en cours, on s’appuie sur le hook useLocation.

1
import { Form, useLocation, href } from "react-router";
2

3
export function Layout({ children }: { children: React.ReactNode }) {
4
  // …
5
  const { pathname } = useLocation();
6

7
  return (
8
    <Form
9
      method="POST"
10
      action={`${href("/logout")}?redirectTo=${pathname}`}       // 🏷️ param dynamique
11
    >
12
      <button className="cursor-pointer">Logout</button>
13
    </Form>
14
  );
15
}

Avantages :

• Depuis /users, tu reviens sur /users (version « déconnecté »).
• Depuis une route protégée (/profile) tu reçois une double redirection /logout → /profile → /login. C’est volontaire : la deuxième vérification assure qu’aucune page sensible n’est rendue sans session valide.

4. Appeler logout() depuis requireUser()

Lorsque le cookie est corrompu, on veut supprimer la session avant de rediriger vers /login. On déplace donc la logique dans le garde d’authentification :

1
export async function requireUser({ request }: { request: Request }) {
2
  const session = await getSession(request.headers.get("Cookie"));
3
  const id      = session.get("userId");
4

5
  if (!id) {
6
    const url = new URL(request.url);
7
    const redirectTo = `/login?redirectTo=${url.pathname}`;
8
    throw await logout({ request, redirectTo });  // 🔥 cookie détruit
9
  }
10
  return id;
11
}

Un cookie falsifié est donc effacé avant même que la page protégée ne charge.

5. Ce qui change concrètement

6. Résumé des étapes

1. Extraire la destruction de session dans logout()
2. Appeler ce helper depuis la route /logout et dans requireUser
3. Ajouter redirectTo à l’URL du formulaire via useLocation
4. Accepter la double redirection pour les pages privées – simple et safe