Session

Dans un monde sans JS, il est souvent nécessaire de partager l'état entre plusieurs requêtes d'un même utilisateur. Une des possibilités est d'utiliser les cookies. Et pour cela Remix met à disposition un petit helper createCookieSessionStorage.

Exercice

Créer une session pour stocker le username d'un utilisateur afin de pouvoir la lire dans un loader après la soumission d'un formulaire

Guide

💿 Créer une nouvelle page avec un formulaire

Voir une solution

app/test-session.tsx
import { Form } from "@remix-run/react";

export default function Layout() {
  return (
    <div>
      <Form method="post">
        <label>
          Qui êtes-vous ?
          <input autoComplete="off" name="name" />
        </label>

        <button type="submit">Valider</button>
      </Form>
    </div>
  );
}

💿 Créer un manager de session

Utilisez pour cela createCookieSessionStorage.

Voir une solution

app/utils/user-session.server.ts
import { createCookieSessionStorage } from "@remix-run/node";

const { getSession, commitSession, destroySession } = createCookieSessionStorage({
  cookie: {
    name: "__devoxx-remix",
    httpOnly: true,
    maxAge: 60,
    path: "/",
    sameSite: "lax",
    secrets: ["jx!bnVNNqJ%4q2&8W6FoMOh!YeBGf&t#swtf&p#ORC"],
    secure: true,
  },
});

export { getSession, commitSession, destroySession };

💿 Stocker le username lors de la soumission du formulaire dans la session

Voir une solution

app/test-session.tsx
import { ActionArgs } from "@remix-run/node";

export const action = async ({ request }: ActionArgs) => {
  const formData = await request.formData();
  const name = formData.get("name")?.toString() || "";
  const userSession = await getSession(request.headers.get("Cookie"));
  userSession.set("name", name);
  return redirect(".", {
    headers: {
      "Set-Cookie": await commitSession(userSession),
    },
  });
};

💿 Lecture de la session le loader pour afficher le username

Voir une solution

app/test-session.tsx
import { LoaderArgs, json } from "@remix-run/node";
import { Form, useLoaderData } from "@remix-run/react";

export const loader = async ({ request }: LoaderArgs) => {
  const userSession = await getSession(request.headers.get("Cookie"));
  const name = userSession.get("name");
  return json({ name });
};

export default function Layout() {
  const { name } = useLoaderData<typeof loader>();

  return (
    <div>
      <div>Je suis {name}</div>
      <Form method="post">
        <label>
          Qui êtes-vous ?
          <input autoComplete="off" name="name" />
        </label>

        <button type="submit">Valider</button>
      </Form>
    </div>
  );
}

👏 Vous avez maintenant un état persisté sans JS

Voyons comment utiliser cette mécanique pour gérer l'authentification !

Session

Guide​

Guide