Next.js 14中Google登录跳转/api/auth/error的问题求助

核心错误根源 #

错误[next-auth][error][CLIENT_FETCH_ERROR] "Unexpected token '<', "<!DOCTYPE "... is not valid JSON"说明请求返回了HTML页面（而非预期的JSON接口响应），本质是路由配置、环境变量或文件结构错误导致NextAuth无法正确识别认证接口路径。

具体修复步骤 #

1. 修正NEXTAUTH_URL环境变量 #

你的.env中NEXTAUTH_URL配置错误，它只需填写应用基础URL，无需指定具体文件路径：

# 错误配置
# NEXTAUTH_URL=http://localhost:3000/pages/api/auth[...nextauth].js

# 正确配置
NEXTAUTH_URL=http://localhost:3000

2. 修正Cookies的domain配置 #

cookies.domain仅需填写域名（如localhost），不能是完整回调URL，开发环境可直接省略该配置：

// authOptions中的cookies配置
cookies: {
    secure: process.env.NODE_ENV === 'production',
    // 错误配置
    // domain: "http://localhost:3000/pages/api/auth/callback/google",
    // 生产环境再配置实际域名，如yourdomain.com
},

3. 确保App Router下的文件结构与导出规范 #

Next.js 14采用App Router时，NextAuth的正确路由路径为/app/api/auth/[...nextauth]/route.js，且导出需符合App Router要求：

// /app/api/auth/[...nextauth]/route.js
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const authOptions = {
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_CLIENT_ID,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET,
        }),
    ],
    cookies: {
        secure: process.env.NODE_ENV === 'production',
    },
};

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

4. 验证Google OAuth重定向URI #

登录Google Cloud控制台，确认授权重定向URI设置为：
http://localhost:3000/api/auth/callback/google

验证流程 #

1. 重启开发服务器（确保环境变量生效）
2. 清除浏览器缓存与Cookie
3. 重新发起Google登录请求

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