Next.js集成Next-Auth Credential Provider访问受保护路由报client_fetch_error

错误原因 #

这个报错的核心是/api/auth/session接口返回的响应不是合法JSON，而是HTML格式内容（报错信息里提到的起始字符<就是HTML标签的起始符号），通常由两个配置错误导致：

1. 未显式配置NextAuth的会话策略为JWT：NextAuth默认使用database会话策略，但是Credentials Provider不支持该策略，会导致session接口请求失败，返回错误页的HTML内容。
2. NEXTAUTH_URL环境变量配置错误，导致请求session接口时路径不匹配，返回404页面的HTML内容。

解决步骤 #

1. 修改/pages/api/auth/[...nextauth].ts配置，显式指定会话策略为JWT，同时配置jwt和session回调透传用户信息，完整配置示例如下：

import NextAuth from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials"
import type { NextAuthOptions } from "next-auth"

export const authOptions: NextAuthOptions = {
  providers: [
    CredentialsProvider({
      name: "Ogame Credentials",
      credentials: {
        username: { label: "Username", type: "text" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials) {
        const user = {
          id: 1,
          name: "J Smith",
          email: "jsmith@example.com",
          image: "https://google.de",
        }
        return user ?? null
      },
    }),
  ],
  // 新增这部分配置，指定会话策略为JWT
  session: {
    strategy: "jwt",
  },
  callbacks: {
    async jwt({ token, user }) {
      // 登录时把用户信息存入token
      if (user) {
        token.user = user
      }
      return token
    },
    async session({ session, token }) {
      // 把token里的用户信息透传到session
      session.user = token.user as any
      return session
    },
  },
  secret: process.env.NEXTAUTH_SECRET,
}

export default NextAuth(authOptions)

2. 检查项目根目录的.env.local文件，确认NEXTAUTH_URL和NEXTAUTH_SECRET配置正确，本地开发环境配置参考如下：

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=自定义随机字符串，可通过openssl rand -hex 32命令生成

3. 重启开发服务后重新登录测试，报错即可消除。

内容的提问来源于stack exchange，提问作者Thomas Mueller