Comment rediriger l'utilisateur après une-connexion réussie

Rediriger l’utilisateur vers la page qu’il voulait vraiment voir

Tu viens de protéger tes routes avec requireUser(). 💡 Problème : si un visiteur non connecté tape /profile, il est envoyé sur /login… et, une fois authentifié, il atterrit sur la home ! Pas terrible : on veut revenir sur la page initialement demandée.

Nous allons :

1. Mémoriser l’URL que l’utilisateur essayait d’atteindre.
2. L’insérer comme paramètre dans la redirection vers /login.
3. La lire dans l’action du formulaire pour refaire la bonne redirection.

Objectif UX : aucune perte de contexte, même après expiration de cookie ou connexion obligatoire sur une page « admin ».

1. Récupérer le chemin demandé dans requireUser

1
export async function requireUser({ request }: { request: Request }) {
2
  const user = await getOptionalUser({ request })
3
  if (user) return user                    // déjà connecté
4

5
  const url = new URL(request.url)         // ① parse l’URL
6
  const pathname = url.pathname            // ② ex: "/profile"
7

8
  // ③ on ajoute le paramètre redirectTo
9
  throw redirect(`/login?redirectTo=${pathname}`)
10
}

Points clés :

• new URL(request.url) te donne l’objet complet (host, query, pathname…).
• On transmet uniquement le pathname (pas la query) ; c’est ce qu’on souhaite rejouer après le login.

2. Lire redirectTo dans l’action de /login

1
import {
2
  commitSession,
3
  getUserSession,
4
} from "~/server/sessions.server"
5

6
export async function action({ request }: ActionFunctionArgs) {
7
  const session  = await getUserSession({ request })
8

9
  /* ici : vérifie email + password → ok */
10

11
  session.set("userId", "10")                     // user connecté
12

13
  // ① on relit l’URL d’origine
14
  const url         = new URL(request.url)
15
  const search      = url.searchParams
16
  const redirectTo  = search.get("redirectTo") || "/"
17

18
  // ② on renvoie le cookie ET la redirection appropriée
19
  return redirect(redirectTo, {
20
    headers: {
21
      "Set-Cookie": await commitSession(session),
22
    },
23
  })
24
}

Si aucun paramètre n’est présent, on retombe sur la page d’accueil par défaut : || "/".

3. Tester le flux complet

1
# 1. Visiteur non connecté
2
GET /profile          → requireUser() ⟶ 302 /login?redirectTo=/profile
3

4
# 2. Formulaire POST /login
5
POST /login           → action()     ⟶ 302 /profile + Set-Cookie

✅ L’utilisateur est arrivé exactement là où il voulait aller, sans double clic ni Home surprise.

Bonus : pourquoi ne pas stocker ça dans le cookie ?

Tu pourrais écrire session.set("redirectTo", pathname)… mais :

• Cela nécessite un cookie supplémentaire (ou des lectures/écritures inutiles dans la session).
• Tu risques un conflit si l’utilisateur ouvre plusieurs onglets avec différentes pages protégées.
• Le paramètre d’URL est stateless : il suit la requête, point.

Règle d’or : garde la session pour le qui (userId, tokens) et l’URL pour le où (chemin cible).

Tout rassembler dans un hook côté client

Dans root.tsx, tu charges déjà user ; ajoute un hook pour lire le paramètre redirectTo (pratique pour afficher un message « Connecte-toi pour accéder à /courses »).

1
export function useRedirectAfterLogin() {
2
  const location = useLocation()
3
  const params   = new URLSearchParams(location.search)
4
  return params.get("redirectTo") ?? "/"
5
}

Ce que tu viens de mettre en place

Le tout en ≈ 15 lignes, 100 % server-side, zéro JS côté client.