使用Next-Auth实现登录认证遇CLIENT_FETCH_ERROR求助

1. 修正.env变量配置 #

• 替换NEXT_PUBLIC_SECRET为NEXTAUTH_SECRET：Next-Auth的密钥是后端敏感变量，不需要NEXT_PUBLIC_前缀，前端不应访问该变量，错误前缀会导致Next-Auth无法正确读取密钥，引发认证逻辑异常。
• 确认NEXTAUTH_URL准确性：开发环境填http://localhost:3000，生产环境填实际域名，注意不要加末尾斜杠。

2. 检查[...nextauth]核心配置 #

确保认证提供者的authorize函数返回合法结构，且错误处理符合JSON格式要求。示例正确配置：

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

export const authOptions = {
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        email: { label: "邮箱", type: "email" },
        password: { label: "密码", type: "password" }
      },
      async authorize(credentials) {
        // 替换为你的用户验证接口
        const res = await fetch(`${process.env.NEXTAUTH_URL}/api/login`, {
          method: "POST",
          body: JSON.stringify(credentials),
          headers: { "Content-Type": "application/json" }
        });
        const user = await res.json();

        if (res.ok && user) return user;
        // 验证失败返回null，Next-Auth会自动处理错误
        return null;
      }
    })
  ],
  secret: process.env.NEXTAUTH_SECRET,
  pages: {
    signIn: "/login" // 确保登录页面路径与实际路由一致
  }
};

export default NextAuth(authOptions);

3. 规范登录页面表单逻辑 #

使用Next-Auth提供的signIn方法提交认证请求，避免手动提交表单到接口：

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

export default function LoginPage() {
  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const result = await signIn("credentials", {
      email: formData.get("email"),
      password: formData.get("password"),
      redirect: false // 关闭自动跳转，便于自定义错误处理
    });

    if (result?.error) {
      console.error("登录失败：", result.error);
    } else {
      window.location.href = "/";
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" required placeholder="邮箱" />
      <input type="password" name="password" required placeholder="密码" />
      <button type="submit">登录</button>
    </form>
  );
}

4. 排查后端返回内容 #

打开浏览器开发者工具的Network标签，查看/api/auth/callback/credentials请求的响应内容：

• 如果返回HTML（比如Next.js 404页面），说明[...nextauth]路由路径错误，需确保文件放在pages/api/auth目录下。
• 如果返回非JSON字符串，检查authorize函数内的接口请求是否正常，确保验证接口返回合法JSON格式数据。

5. 清除缓存与重启服务 #

• 重启Next.js开发服务器，确保.env变量修改生效。
• 清除浏览器缓存和Cookie，避免旧认证信息干扰新的请求逻辑。

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