Récupérer l'utilisateur connecté depuis les cookies

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

3
type SessionData = { userId: string }
4
type SessionFlashData = { error: string }
5

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

18
export { getSession, commitSession, destroySession }

1
import { commitSession, getSession } from "~/server/sessions.server"
2

3
export async function action({ request }: ActionFunctionArgs) {
4
  const form = await request.formData()
5
  const user = await prisma.user.findUnique({
6
    where: { email: form.get("email") as string },
7
  })
8
  /* … vérification mot de passe … */
9

10
  const session = await getSession(request.headers.get("Cookie"))
11
  session.set("userId", String(user.id))
12

13
  return redirect("/", {
14
    headers: { "Set-Cookie": await commitSession(session) },
15
  })
16
}

1
// …
2

3
export async function getUserId({ request }: { request: Request }) {
4
  const session = await getSession(request.headers.get("Cookie"))
5
  return session.get("userId") as string | undefined
6
}
7

8
export async function getOptionalUser({ request }: { request: Request }) {
9
  const userId = await getUserId({ request })
10
  if (!userId) return null
11

12
  // ⚠️ le cookie peut être forgé : on vérifie qu’il existe vraiment
13
  return prisma.user.findUnique({
14
    where: { id: Number(userId) },
15
    select: { id: true, firstName: true, lastName: true },
16
  })
17
}

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

3
export async function loader({ request }: LoaderFunctionArgs) {
4
  const user = await getOptionalUser({ request })
5
  if (user) return redirect("/")      // déjà loggé → retour home
6
  return null
7
}

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

1
const { user } = useLoaderData<typeof loader>()
2

3
<header>
4
  {/* … */}
5
  {user ? (
6
    <Form method="POST" action={href("/logout")}>
7
      <button type="submit">Logout</button>
8
    </Form>
9
  ) : (
10
    <Link to={href("/login")}>Login</Link>
11
  )}
12
</header>

1
import { destroySession, getSession } from "~/server/sessions.server"
2

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

1
const id = await getUserId({ request })
2
if (!id) throw redirect("/login")