NextAuthでセッションを更新する

ログインの実装までは情報が多くて難しくなかったが、セッション情報を更新することについては少なかった。

それで一度書いてみるセッション情報の更新。

今回も見てみるのはやはりNextAuthの公式ドキュメントである。

セッション情報の更新手順は以下の通り。

1. useSessionのupdateでセッション更新およびトリガー発生

2. authConfigでupdateトリガーに従ったjwt再設定

3. 更新後、ページをリフレッシュ

ではコードをまず見てみよう。

1. セッション更新

まず公式ドキュメントにある例は以下の通り。

import { useSession } from "next-auth/react";

export default function Page() {
  const { data: session, status, update } = useSession();

  if (status === "authenticated") {
    return (
      <>
        <p>サインイン中：{session.user.name}</p>
        // 更新値をサーバー側に送信
        <button onClick={() => update({ name: "John Doe" })}>名前を編集</button>
        // サーバー側ですでに値を更新したと仮定して、トリガのみ実行 // 全ての`useSession().data`が更新
        <button onClick={() => update()}>名前を編集</button>
      </>
    );
  }

  return <a href="/api/auth/signin">サインイン</a>;
}

簡単にしたければ、updateにパラメータとしてオブジェクトを入れれば良い。

自分のホームページにも一度適用してみた。

必要のないコードは簡潔にしてコメントを付け加えてみた。

"use client";

import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";

export default function Profile() {
  const router = useRouter();
  const { update } = useSession();

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();

    // フォームデータを作成しデータ注入
    const formData = new FormData();
    formData.append("nickName", value);

    // api fetchを介してバックエンド更新
    const res = await fetch("/api/editProfile", {
      method: "POST",
      body: formData,
    });
    const resJson = await res.json();

    // 成功すればupdateでセッション更新およびトリガー実行
    if (resJson.success === "success") {
      // データをオブジェクト形式にして更新
      const updateObj: Record<string, string | boolean> = {};
      userInputTable.forEach((each: userInputTableObj) => {
        updateObj[each.name] = each.value as string;
      });

      // 更新を待ってリフレッシュしたくてawait
      await update(updateObj);

      // セッション更新でnavbar更新のためリフレッシュ
      router.refresh();
    }
  }
  return (
    <form onSubmit={(e) => handleSubmit(e)}>
      <input
        // userInput.valueは大体useStateで設定したもの
        value={userInput.value}
        onChange={(e) => handleChange(e)}
      />
        <button type="submit">登録</button>
    </form>
  );
}

ポイントはupdateでオブジェクトとしてセッション情報を更新することだ。

では更新されたセッションでトークンを更新しよう。

2. AuthOptions

公式ドキュメントには大体以下のように書かれている。

NextAuthのパラメータの一つであるcallbacksにjwtオプションを与える。

updateトリガが発生し、session.nameがあればトークンを更新する。

...
export default NextAuth({
  // 中略 ...
  callbacks: {
    jwt({ token, trigger, session }) {
        // セッションは任意のオブジェクトなので検証が必要
      if (trigger === "update" && session?.name) {
        token.name = session.name
      }
      return token
    }
  }
})

これはほとんど変更するところがないのでそのまま適用した。

このようにするとセッション更新は完了だ。

3. テストする

ではログイン後、プロフィールのニックネームを変更しながらテストしてみよう。

ニックネームを変えながらSSRで実装したnavbarのプロフィールがちゃんと変わるか確認してみた。

うまくいっているようだ。

4. 感想

思ったよりもセッション更新は簡単に実装できた。

検索もたくさんしたが、結局は巡り巡って公式ドキュメントだった。

何かうまくいかないときは、まず公式ドキュメントをじっくり読むことをおすすめする。