在 NextAuth 中更新会话

关于实现登录的文章不少，所以不难，但关于更新会话信息的文章较少。

因此，记录一下会话信息更新。

这次我们还是看看 NextAuth 官方文档。

会话信息更新的步骤如下。

1. 使用 useSession 的 update 对会话进行更新并触发事件

2. 在 authConfig 中根据触发事件重新设置 jwt

3. 更新后刷新页面

那么先看看代码。

1. Session 更新

官方文档中的示例如下。

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

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

  if (status === "authenticated") {
    return (
      <>
        <p>Signed in as {session.user.name}</p>
        // 将更新值发送到服务器端
        <button onClick={() => update({ name: "John Doe" })}>Edit name</button>
        // 假设服务器端已更新值。仅触发事件 // 更新所有 `useSession().data`。
        <button onClick={() => update()}>Edit name</button>
      </>
    );
  }

  return <a href="/api/auth/signin">Sign in</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 选项。

触发更新事件后，如果有 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. 结论

比预想中更容易实现会话更新。

虽然也搜索了很多，但最终还是回到了官方文档。

如果遇到问题，建议先仔细阅读官方文档。