[英]failed login redirects me to /api/auth/error on next-auth
我在登录页面中使用 next-auth v. 4.18.8。 这是我的 Fullstack JS 课程的最终项目。 我使用的版本比课程中使用的版本更新(使用 next-auth v. 3)
当我输入正确的密码时,一切正常(它将我重定向到所需的页面)。
输入错误的密码会使我进入 /auth/signin?i=1 以便我可以处理此查询。 但是,它将我重定向到http://127.0.0.1:3000/api/auth/error?error=Request%20failed%20with%20status%20code%20401
在控制台上,它显示“POST http://localhost:3000/api/auth/callback/credentials?401 (Unauthorized)”
这是我的代码:
前端:登录页面
const handleFormSubmit = async values => {
signIn('credentials', {
email: values.email,
password: values.password,
callbackUrl: 'http://127.0.0.1:3000/user/dashboard'
})
}
前端:[...nextauth].js
export const authOptions = {
providers: [
CredentialsProvider({
name: 'credentials',
async authorize(credentials, req) {
const res = await axios.post('http://127.0.0.1:3000/api/auth/signin', credentials)
const user = res.data
if (user) {
return user
} else {
throw '/auth/signin?i=1'
}
}
})
],
session: {
jwt: true
},
jwt: {
secret: process.env.JWT_TOKEN
},
adapter: MongooseAdapter(process.env.MONGODB_URI)
}
export default NextAuth(authOptions)
后端:signin.js controller
const authSignin = {
post: async (req, res) => {
const {
name,
email,
password,
} = req.body
await dbConnect()
const user = await UsersModel.findOne({ email })
if (!user) {
return res.status(401).json({ success: false, message: "invalid" })
}
const passIsCorrect = await compare(password, user.password)
if (passIsCorrect) {
return res.status(200).json({
_id: user._id,
name: user.name,
email: user.email
})
}
return res.status(401).json({ success: false, message: "invalid" })
}
}
export { authSignin }
最后:后端:signin.js 路由(使用 Next Connect):
import nextConnect from 'next-connect'
import { authSignin } from '../../../src/controllers/auth/signin'
const route = nextConnect()
route.post(authSignin.post)
export default route
我注意到的一件事是,当输入错误的密码时,当代码到达 controller 上的这一行时:
return res.status(401).json({ success: false, message: "invalid" })
它不会在 axios.post 之后继续执行 [...nextauth].js 文件,因此不会执行下面的代码,这应该给我在前端处理的“i”查询(如 next-auth 文档中所述):
if (user) {
return user
} else {
throw '/auth/signin?i=1'
}
存储库位于GitHub
我想如果你在这里传递redirect:false
const handleFormSubmit = async values => {
signIn('credentials', {
email: values.email,
password: values.password,
callbackUrl: 'http://127.0.0.1:3000/user/dashboard',
redirect: false,
})
}
看起来当next-auth
遇到错误时,它会自动重定向。 通过设置redirect
选项,它不会自动重定向,因此您可以像这样在客户端处理错误
const handleFormSubmit = async values => {
const signInResult=signIn('credentials', {
email: values.email,
password: values.password,
callbackUrl: 'http://127.0.0.1:3000/user/dashboard',
redirect: false,
})
If (signInResult.error){
// Handle Error on client side
}
}
此外,您不应在authorize
中提出 api 请求。 它会延迟这个过程。 您可以在authorize
中运行登录逻辑
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.