Next.js 13中Next-Auth v4会话更新失败：update不是函数

排查步骤1：确保组件在SessionProvider包裹范围内 #

Next-Auth的客户端钩子（包括useSession）必须在SessionProvider的上下文环境中才能正常工作，否则update方法会不存在。

在Next.js 13的App Router中，需要在根布局文件（app/layout.jsx/layout.tsx）中添加SessionProvider：

'use client'

import { SessionProvider } from "next-auth/react"

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <SessionProvider>{children}</SessionProvider>
      </body>
    </html>
  )
}

注意要加上'use client'指令，因为SessionProvider是客户端组件。

排查步骤2：确认组件是客户端组件 #

Next.js 13 App Router默认是Server Components，而useSession是客户端钩子，不能在Server Components中使用。必须在使用useSession的组件顶部加上'use client'指令：

'use client'

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

export default function YourComponent() {
  const { data: session, status, update } = useSession()
  // ... 你的业务代码
}

排查步骤3：确保Next-Auth版本为v4稳定版 #

如果你的Next-Auth版本过旧，可能存在update方法未实现或bug的情况。执行以下命令升级到最新v4版本：

npm update next-auth
# 或使用yarn
yarn upgrade next-auth

结合Refresh Token场景的正确会话更新流程 #

当你通过外部API获取到新的access/refresh token后，需要先在Next-Auth的后端逻辑中更新会话，再调用update()触发客户端会话同步：

1. 在pages/api/auth/[...nextauth].js中配置jwt与session回调，支持token更新：

import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  session: { strategy: "jwt" }, // 必须使用jwt策略才能更新token
  callbacks: {
    async jwt({ token, user, account }) {
      // 首次登录时保存外部API返回的token
      if (account && user) {
        token.accessToken = account.access_token
        token.refreshToken = account.refresh_token
      }

      // 此处可加入refresh token过期检测逻辑，调用外部API获取新token后直接更新token对象
      // token.accessToken = newAccessToken
      // token.refreshToken = newRefreshToken

      return token
    },
    async session({ session, token }) {
      // 将token中的数据同步到session，供客户端使用
      session.user.accessToken = token.accessToken
      session.user.refreshToken = token.refreshToken
      return session
    },
  },
})

2. 客户端获取新token后，先更新后端会话再触发客户端同步：

'use client'

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

export default function YourComponent() {
  const { data: session, update } = useSession()

  const refreshTokenHandler = async () => {
    // 调用外部API获取新的access/refresh token
    const res = await fetch("/api/refresh-token", {
      method: "POST",
      body: JSON.stringify({ refreshToken: session.user.refreshToken }),
      headers: { "Content-Type": "application/json" },
    })
    const newTokens = await res.json()

    // 调用Next-Auth接口更新后端会话
    await fetch("/api/auth/session", {
      method: "POST",
      body: JSON.stringify({
        accessToken: newTokens.accessToken,
        refreshToken: newTokens.refreshToken,
      }),
      headers: { "Content-Type": "application/json" },
    })

    // 触发客户端会话更新
    await update()
  }

  return (
    <button onClick={refreshTokenHandler}>刷新Token</button>
  )
}

内容的提问来源于stack exchange，提问作者velocity CSGO