[next-auth][error][client_fetch_error] NextAuthJS CredentialsProvider "providers SyntaxError: Unexpected token < in JSON at position 0"

Question

作为 Next.js 的初学者，我遇到了 NextAuthJS。我想使用自定义电子邮件和密码身份验证，因此我使用了 Credentials Provider 并配置如下

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

import ConnectToDB from "../../../lib/db";
import auth from "../../../lib/auth";

export default NextAuth({
    session: {
        jwt: true,
        maxAge: 30 * 24 * 60 * 60,
    },
    providers: [
        CredentialsProvider({
            async authorize(credentials) {
                const client = await ConnectToDB();
                const db = client.db();

                const user = await db.collection("users").findOne({ email: credentials.email });

                if (!user) {
                    client.close();
                    throw new Error("User not found");
                }

                const isValid = await auth.verifyPassword(credentials.password, user.password);

                if (!isValid) {
                    client.close();
                    throw new Error("Invalid password");
                }

                client.close();
                return { _id: user._id };
            },
        }),
    ],
});

并使用 next-auth/client 中的 signIn 方法登录如下

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

const submitHandler = async (e) => {
        e.preventDefault();
        const email = emailRef.current.value;
        const password = passwordRef.current.value;
        const result = await signIn("credentials", { redirect: false, email, password });
}

我尝试对此进行调试，但没有找到解决方案，但后来我意识到某些错误正在登录到浏览器控制台

这是我收到的错误

[next-auth][error][client_fetch_error]

Answer 1

自从您几个月前提出问题以来，我认为您已经解决了您的问题。如果不是，我也打算为那些有同样问题的人回答。

你的代码在我的一个项目中看起来几乎完全一样，但我的代码运行良好。好吧，你需要在 CredentialsProvider({ ... }) 中定义 credemtials: {} 对象，就像官方文档示例 https://next-auth.js.org/configuration/providers/credentials.

client_fetch_error 错误。我想，你正在生产中得到这个，我也有这个问题。您需要添加一个环境变量：并重新部署。

你应该在 authorize 中选择 return null 或 return user，而不是 throw error

Answer 2

在我的例子中，我需要将 NEXTAUTH_SECRET 变量添加到 Vercel，错误已修复。您可以使用 openssl rand -base64 32

生成它

更多相关信息：https://next-auth.js.org/configuration/options#secret

[next-auth][error][client_fetch_error] NextAuthJS CredentialsProvider "providers SyntaxError: Unexpected token < in JSON at position 0"

[next-auth][error][client_fetch_error] NextAuthJS CredentialsProvider "providers SyntaxError: Unexpected token < in JSON at position 0"

node.js

next.js

next-auth