reactjs - 在自定义登录页面上引发错误时下一个身份验证“凭据”重定向

Question

我有一个自定义登录页面，它在signIn()提交表单时又调用该函数。
我只使用“凭据”提供程序。

服务器端，我只是想抛出一个错误，以便我可以在前端处理它。似乎很容易。

我继续收到一条错误消息：
Error: HTTP GET is not supported for /api/auth/login?callbackUrl=http://localhost:4000/login

我被重定向到的网址是：
http://localhost:4000/api/auth/login?callbackUrl=http://localhost:4000/login

这是我的代码： pages/login.js（仅相关代码。其余只是布局。）

<form
    method="post"
    onSubmit={() =>
        signIn("credentials", {
            email: "test",
            password: "test",
        })
    }
>
    <label>
        Username
        <input type="email" />
    </label>
    <label>
        Password
        <input name="password" type="password" />
    </label>
    <button type="submit">Sign In</button>
</form>

页面/api/auth/[...nextauth.js]

import NextAuth from "next-auth";
import Providers from "next-auth/providers";

const options = {
    site: process.env.NEXTAUTH_URL,
    providers: [
        Providers.Credentials({
            id: "chatter",
            name: "Credentials",
            type: "credentials",
            credentials: {
                email: { label: "Email", type: "email", placeholder: "email@domain.com" },
                password: { label: "Password", type: "password" },
            },
            authorize: async credentials => {
                console.log("credentials:", credentials);
                throw new Error("error message"); // Redirect to error page
            },
        }),
    ],
    pages: {
        signIn: "login",
        newUser: null,
    },
};

export default (req, res) => NextAuth(req, res, options);

Answer 1

你可以使用这样的东西：

signIn("credentials", {
     redirect: false, 
     email: "test",
     password: "test",
   })
   .then((error) => console.log(error))
   .catch((error) => console.log(error));

Answer 2

你在 pages/api/auth 中检查 [...nextauth].js 吗？

我有同样的问题，但我可以修复 [...nextauth].js 将“pages/api”移动到“pages/api/auth”。