個人的備忘録：ReactでJWTトークンをlocalStorageに保存する実装した個人メモ

はじめに

今回の記事では、ユーザー登録処理においてフロントエンドでトークンを取得し、保存する処理に焦点を当ててまとめます。

この処理は、受講しているITスクールのハッカソンにてログイン状態の管理を行うために実装しました。

自分自身の備忘録として、React（Next.js）でどのようにトークンを扱うのか記録しておきたいと思います。

書こうと思ったきっかけ

受講中のハッカソンプロジェクトでログイン／登録後の状態管理が必要となり、バックエンド（FastAPI）側で発行されたJWTトークンをフロント側で適切に保持する処理を実装する必要がありました。

特に、ユーザー登録後に即ログイン済みの状態でAPIを利用可能にしたかったため、トークンの受け取りと保存の流れを明確にしておく必要がありました。

内容

1. 登録フォームからのPOSTリクエスト

ユーザーがフォームに「お名前」「メールアドレス」「パスワード」を入力し、/api/register にPOSTする構成です。

const res = await fetch("http://localhost:8000/api/register", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    email,
    password,
    user_name: userName,
  }),
});

2. トークンの受け取りと保存

バックエンドがトークン付きでレスポンスを返すようになっているため、以下のように受け取って localStorage に保存します。

if (res.ok) {
  const data = await res.json();
  localStorage.setItem("token", data.token);
  router.push("/home");
}

この一文によって、今後のすべてのAPI呼び出しでトークン付きの認証が可能になります。

3. 保存されたトークンの利用

保存されたトークンは、以下のように必要な場面で取得してAPIヘッダーに付与します：

const token = localStorage.getItem("token");

const res = await fetch("/api/sessions", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${token}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ character_mode: "normal" }),
});

まとめ

今回の実装により、ユーザー登録直後に認証状態を持ったまま次の機能（チャット開始など）へスムーズに移行できるようになりました。

トークンの保存はセキュリティ上の観点からも注意が必要な部分ですが、開発フェーズでは localStorage を使った簡易的な保存で十分だと思っています。

最終的には HttpOnly クッキーなどへの移行も視野に入れながら、段階的に実装を進めていくつもりです...（できればの話）！