我正在为我的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。其他代码正在崩溃。