Sauvegarder la session utilisateur dans un cookie avec React Router 7

1
import { createCookieSessionStorage } from "react-router"
2

3
type SessionData = {
4
  userId: string
5
  theme: "light" | "dark"
6
  lang: "en" | "fr"
7
}
8

9
export const { getSession, commitSession, destroySession }
10
  = createCookieSessionStorage<SessionData>({
11
    cookie: {
12
      name: "__session",
13
      // secrets en production !
14
      // secrets: [process.env.SESSION_SECRET!],
15
      sameSite: "lax",
16
      httpOnly: true,
17
      path: "/",
18
      // secure: process.env.NODE_ENV === "production",
19
    }
20
  })

1
import { Form, redirect, type ActionFunctionArgs } from "react-router"
2
import { commitSession, getSession } from "~/server/sessions.server"
3

4
export async function action({ request }: ActionFunctionArgs) {
5
  // 1. on récupère la session courante (peut être vide)
6
  const session = await getSession(request.headers.get("Cookie"))
7

8
  // 2. … ici tu valides email + mot de passe contre la DB …
9
  //    on triche : user #1 est toujours correct
10
  session.set("userId", "1")
11

12
  // 3. tu peux aussi stocker des préférences
13
  session.set("theme", "dark")
14
  session.set("lang", "fr")
15

16
  // 4. on renvoie une redirection + Set-Cookie
17
  return redirect("/dashboard", {
18
    headers: {
19
      "Set-Cookie": await commitSession(session),
20
    },
21
  })
22
}

1
import { data, type LoaderFunctionArgs, redirect }
2
  from "react-router"
3
import { getSession } from "~/server/sessions.server"
4

5
export async function loader({ request }: LoaderFunctionArgs) {
6
  const session = await getSession(request.headers.get("Cookie"))
7
  const userId  = session.get("userId")
8

9
  if (!userId) {
10
    // non authentifié → on renvoie vers /login
11
    throw redirect("/login")
12
  }
13

14
  // tu peux récupérer la préférence utilisateur
15
  const theme = session.get("theme") // "dark" | "light"
16
  return data({ userId, theme })
17
}

1
import { useLoaderData, Form, type ActionFunctionArgs } from "react-router"
2
import { commitSession, getSession } from "~/server/sessions.server"
3

4
export async function action({ request }: ActionFunctionArgs) {
5
  const session = await getSession(request.headers.get("Cookie"))
6
  const form    = await request.formData()
7
  const theme   = form.get("theme") // "light" | "dark"
8

9
  session.set("theme", theme)
10
  return redirect("/settings", {
11
    headers: { "Set-Cookie": await commitSession(session) }
12
  })
13
}

1
import { redirect, type ActionFunctionArgs } from "react-router"
2
import { destroySession, getSession } from "~/server/sessions.server"
3

4
export async function action({ request }: ActionFunctionArgs) {
5
  const session = await getSession(request.headers.get("Cookie"))
6
  return redirect("/login", {
7
    headers: {
8
      "Set-Cookie": await destroySession(session),
9
    },
10
  })
11
}

1
import { redirect } from "react-router"
2
import { getSession } from "~/server/sessions.server"
3

4
export async function requireUserId(request: Request) {
5
  const session = await getSession(request.headers.get("Cookie"))
6
  const id = session.get("userId")
7
  if (!id) throw redirect("/login")
8
  return id
9
}

1
export async function loader({ request }) {
2
  const userId = await requireUserId(request) // focus sur la logique métier
3
  /* … */
4
}