在next-auth中使用GoogleProvider登录尝试返回OAUTH_CALLBACK_ERROR和消息:检查.



我正在为我的JS FullStack课程做一个项目,我遇到了一些与Google提供next-auth(版本4.18.8)的问题。

今天早上一切都很好。成功登录google provider并使用" usessession ()"为了在console.log中获得Google凭据,我提交了所有内容并去了健身房。在我回来后(当然,还洗了个澡),我打算获得这些Google凭据以在页面标题上显示用户名,但令我惊讶的是,我开始得到这个回调错误。

通知你,env。使用GOOGLE_CLIENT_ID和GOOGLE_CLIENT_SECRET正确设置local。我甚至删除了我在谷歌上的证书,并创建了另一个证书来测试,但运气不好。

当尝试登录时,我得到这个错误:

[next-auth][error][OAUTH_CALLBACK_ERROR] 
https://next-auth.js.org/errors#oauth_callback_error checks.state argument is missing {
error: TypeError: checks.state argument is missing
at Client.callback (C:JoãoDropboxPessoalProjetos Webdesigntrading-centernode_modulesopenid-clientlibclient.js:387:13)
at oAuthCallback (C:JoãoDropboxPessoalProjetos Webdesigntrading-centernode_modulesnext-authcoreliboauthcallback.js:127:29)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)    
at async Object.callback (C:JoãoDropboxPessoalProjetos Webdesigntrading-centernode_modulesnext-authcoreroutescallback.js:52:11)
at async AuthHandler (C:JoãoDropboxPessoalProjetos Webdesigntrading-centernode_modulesnext-authcoreindex.js:201:28)
at async NextAuthHandler (C:JoãoDropboxPessoalProjetos Webdesigntrading-centernode_modulesnext-authnextindex.js:23:19)
at async C:JoãoDropboxPessoalProjetos Webdesigntrading-centernode_modulesnext-authnextindex.js:59:32
at async Object.apiResolver (C:JoãoDropboxPessoalProjetos Webdesigntrading-centernode_modulesnextdistserverapi-utilsnode.js:363:9)
at async DevServer.runApi (C:JoãoDropboxPessoalProjetos Webdesigntrading-centernode_modulesnextdistservernext-server.js:487:9)
at async Object.fn (C:JoãoDropboxPessoalProjetos Webdesigntrading-centernode_modulesnextdistservernext-server.js:749:37)
at async Router.execute (C:JoãoDropboxPessoalProjetos Webdesigntrading-centernode_modulesnextdistserverrouter.js:253:36)
at async DevServer.run (C:JoãoDropboxPessoalProjetos Webdesigntrading-centernode_modulesnextdistserverbase-server.js:384:29)
at async DevServer.run (C:JoãoDropboxPessoalProjetos Webdesigntrading-centernode_modulesnextdistserverdevnext-dev-server.js:741:20)
at async DevServer.handleRequest (C:JoãoDropboxPessoalProjetos Webdesigntrading-centernode_modulesnextdistserverbase-server.js:322:20) {
name: 'OAuthCallbackError',
code: undefined
},
providerId: 'google',
message: 'checks.state argument is missing'

有一些事情我注意到点击我的谷歌帐户后,在我的DevTools的网络选项卡:

首先,它将发出一个请求,返回状态码302 ("consent?authuser=0∂.......")之后,另一个请求"google?state=......"也返回302。然后我得到一个错误的请求http://127.0.0.1:3000/api/auth/error?error=OAuthCallback也与302状态码。最后,我在请求http://127.0.0.1:3000/api/auth/signin?error=OAuthCallback时得到一个错误,它返回404

我不太明白这一点,但我很确定我不是打算在这些请求上得到一个302错误。

这是我的代码。

我有一个按钮调用这个函数:

const handleGoogleLogin = async () => {
await signIn('google', {
redirect: true,
callbackUrl: 'http://127.0.0.1:3000/user/dashboard'
})
}

我的[…nextauth].js文件:

export const authOptions = {
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET
})
],
session: {
strategy: "jwt",
}, 
jwt: {
secret: process.env.JWT_TOKEN
},
adapter: MongooseAdapter(process.env.MONGODB_URI),
}
export default NextAuth(authOptions)

查看我的GitHub中的完整代码。

如果你觉得有任何问题,请尽管问我。

大大赞赏。


若昂的文本

修复。

callbackUrl不应该像这样'http://127.0.0.1:3000/user/dashboard,而应该像这样:'/user/dashboard'

简单的修复,简单的错误,很多的头痛!

关注这里的讨论:https://github.com/nextauthjs/next-auth/discussions/7491

根据hellskater,禁用状态检查可以使用下面的代码:

GoogleProvider({
clientId: process.env.GOOGLE_ID,
clientSecret: process.env.GOOGLE_SECRET,
checks: ['none']
}),

includecallbackUrl在您的提供商:

GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,

callbackUrl: '/home/ruteOnlyCanAccessUsersLogged/remplaceMe',

authorization: {
// params recomend in documentation to refresh token, Exclusive to google provider
// https://next-auth.js.org/providers/google
params: {
prompt: 'consent',
access_type: 'offline',
response_type: 'code'
}
}
})
// other options and methods


}
export default NextAuth(authOptions)

您可以尝试添加try-catch。其他代码正在崩溃。

最新更新