Next.js使用NextAuth CredentialsProvider报client_fetch_error问题求助

错误本质 #

你遇到的Unexpected token < in JSON at position 0本质是NextAuth客户端请求后端接口时，后端返回了HTML格式的响应（一般是404/500错误页，开头为<字符），而非预期的JSON格式数据。

排查解决步骤

• 1. 检查NextAuth路由文件位置是否正确
     如果你使用的是Next.js Pages Router，必须将NextAuth配置文件放在pages/api/auth/[...nextauth].js路径下，文件名必须为[...nextauth].js，不能修改名称或存放路径，否则/api/auth/providers等内置接口会404，返回404 HTML页面触发该报错。
• 2. 修复配置文件的语法错误
     你给出的NextAuth配置代码中存在明显语法错误：

  // 错误写法：导入路径用了反引号
  import CredentialsProvider from `next-auth/providers/credentials`
  // 修正为单引号/双引号
  import CredentialsProvider from 'next-auth/providers/credentials'
  

  该语法错误会导致服务端编译失败，请求接口时返回500错误页，触发JSON解析错误。
• 3. 检查环境变量配置
     确保你在项目根目录的.env.local文件中配置了NEXTAUTH_SECRET环境变量，该变量为NextAuth必填配置，未配置时服务端会抛出运行时错误，返回错误页。你可以用命令openssl rand -hex 32生成安全的密钥。
• 4. 手动验证接口响应
     直接在浏览器地址栏访问http://你的本地开发地址/api/auth/providers，如果返回JSON格式的provider列表则接口正常；如果返回错误页，可以直接看页面上的错误提示定位问题，同时查看开发服务端的控制台输出，会打印具体的服务端报错信息。

额外注意项

你当前authorize方法仅返回了{ _id: user._id }，如果后续需要在前端session中获取用户ID等信息，需要额外配置JWT和Session回调：

export default NextAuth({
  // 原有其他配置
  callbacks: {
    async jwt({ token, user }) {
      if (user) token.id = user._id
      return token
    },
    async session({ session, token }) {
      session.user.id = token.id
      return session
    }
  }
})

内容的提问来源于stack exchange，提问作者Vikrant Shah