failed login重定向到/api/auth/error on next-auth

Question

我在登录页面中使用next-auth v. 4.18.8。这是我的Fullstack JS课程的最后一个项目。我使用比课程中使用的版本更新的版本(使用next-auth v. 3)

当我插入正确的密码时，一切都正常工作(它将我重定向到所需的页面)。

插入错误的密码应该把我扔到/auth/sign ?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(未经授权),

下面是我的代码:

前端:Login Page

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)

后端:signing .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 }

最后:后端:sign .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

我注意到的一件事是，当插入错误的密码时，当代码到达控制器上的这一行:

return res.status(401).json({ success: false, message: "invalid" })

它不会在axios之后继续执行[…nextauth].js文件。Post，因此不执行下面的代码，这应该让我在前端处理'i'查询(如next-auth文档中所述):

if (user) {
return user
} else {
throw '/auth/signin?i=1'
}

仓库在GitHub上

Answer 1

我想如果你在这里通过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

中运行登录逻辑。