Remix入門: セッション管理を徹底解説 - 会員登録・ログイン方法

Remixを使って、セッション管理を行う方法を紹介します。今回は cookie をセッションストレージとして使ってセッションを管理します。

なお、当記事ではセッション管理を「ユーザーがログインしてからログアウトするまでの間、ログイン状態を保持すること」とします。

セッションの管理方法

Remixで cookie を使ってセッション管理をするには、以下の３つを行います。

1. セッションストレージを作成する

createCookieSessionStorage を使い、cookieをセッションストレージとして使うための準備をします。

例: app/sessions.js

import { createCookieSessionStorage } from "@remix-run/node";

const { getSession, commitSession, destroySession } = createCookieSessionStorage(
    {
      cookie: {
        name: "__session",
        // 自身のサイトのドメインとする
        domain: process.env.DOMAIN,
        httpOnly: true,
        maxAge: 3600,
        path: "/",
        sameSite: "lax",
        secrets: ["s3cret1"],
        // localhostの場合はhttpsではないので、プロダクションのみtrueとする
        secure: process.env.NODE_ENV === "production" ? true : false
      },
    }
  );

export { getSession, commitSession, destroySession };

2. ログイン成功時にセッションストレージにuserIDを格納し、cookieをセットする

getSession を使って現在のセッションを取得し、それに対して「ログインしているユーザーが誰か」を判定するためにユーザーのIDを格納します。

また、 commitSession と Set-Cookie を使って、ユーザーIDの格納を確定します。このセッションを取得するためのセッションIDを cookie にセットします。

例: app/routes/login.jsx

import { getSession, commitSession } from "~/sessions";

// ...

export const action = async ({ request }) => {
  const session = await getSession(request.headers.get("Cookie"));

  // ... 認証処理
  const userId = "取得したユーザーのID"

  // セッションストレージにuserIdを格納
  session.set("userId", String(userId));

  // Set-Cookie を使って、cookieをセット
  const headers = { "Set-Cookie": await commitSession(session) }
  return redirect("/", { headers })
}

// ...

cookie に userId が保持されている間は、ユーザーはログイン状態とみなされます。

なお、ここで格納した userId は getSession で取得したセッションに対してsession.get("userId") とすることで取得することが可能です

例: app/routes/users.jsx

import { getSession, commitSession } from "~/sessions";

// ...

export const loader = async ({ request }) => {
  const session = await getSession(request.headers.get("Cookie"));
  // ログイン状態かの確認
  if (!session.has("userId")) {
    return redirect("/login")
  }

  // userIdの取得
  const userId = session.get("userId")

  // ...
}

// ...

3. ログアウト時にセッションを破棄する.

ユーザーIDを格納した時と同様に、 destroySession と Set-Cookie を使って、セッションの破棄し、cookie の変更を行います。

例: app/routes/users.jsx

import { getSession, commitSession, destroySession } from "~/sessions";

// ...

export const action = async ({ request }) => {
  const session = await getSession(request.headers.get("Cookie"));

  // セッションを破棄
  return redirect("/", { headers: { "Set-Cookie": await destroySession(session) }})
}

// ...

注意点

一つの cookie には、最大で4KBまでの情報しか持つことができません。

cookie をセッションストレージとして使う方法では、 userID や （使う場合は） Flashメッセージ を クライアント側の cookie に保持することになるため、最大容量に気をつける必要があります。

より多くの情報を保持したい場合、 RDBMS など別途データベースを用意してそちらをセッションストレージとして使用しましょう。