reactjs - 在自定义登录页面上引发错误时下一个身份验证“凭据”重定向
问题描述
我有一个自定义登录页面,它在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);
解决方案
你可以使用这样的东西:
signIn("credentials", {
redirect: false,
email: "test",
password: "test",
})
.then((error) => console.log(error))
.catch((error) => console.log(error));
推荐阅读
- python - 是否可以写入当前正在读取的 QBuffer?
- bitwise-operators - AND运算逆法
- javascript - 为什么我的 JavaScript 代码没有播放音乐?
- ios - 如何将过滤器添加到已合并电影资产和图层指令的 AVComposition
- c++ - 为什么我必须专门化递归模板变量?
- android - 将 RecyclerView 中的项目移动到特定位置
- python - 在 Python 中:如何使用指定数量的数字在文件中写入浮点数?
- qt - 如何将 Catch2 与 QT 事件循环集成?
- vue.js - 如何识别 Quasar 表中选择的单元格?
- spring - Hibernate 验证 @Enumerated(EnumType.STRING) 字段