问题标签 [next-auth]

尝试为我的应用程序设置身份验证，一切似乎都正常工作，但是当我尝试对其进行测试时，我收到了此错误消息

授权错误错误 400：redirect_uri_mismatch 请求中的重定向 URI，http://localhost:3000/api/auth/callback/google，与 OAuth 客户端授权的不匹配。要更新授权的重定向 URI，请访问：https://console.developers.google.com/apis/credentials/oauthclient/${your_client_id}?project=${your_project_number}

你能指出我解决这个问题的正确方向吗？

确认凭据后，我返回以下 JSON：

但是，由于模型限制，NextAuth 不允许我存储所有字段，所以它在 J​​WT 中返回给客户端的是：

我的[...nextauth].js设置非常基本：

我想出的唯一解决方案是使用 JSON 字符串伪造电子邮件字段，我可以在其中存储我需要的所有内容：

我怎样才能正确地做到这一点？我尝试研究自定义模型（https://next-auth.js.org/tutorials/typeorm-custom-models），但它似乎只是关于数据库，这不是我的情况，因为我使用 JWT 进行会话存储。如果我继续我的解决方案，我还会遇到什么缺点？

我正在学习 NextJS 和 NextAuth，并使用我自己的登录页面实现了 Credentials 登录，它在会话对象包含我的用户模型的地方工作（目前包含包括密码在内的所有内容，但显然它不会保持这种状态）。

我可以刷新页面并保持会话，但是如果我离开一两分钟然后刷新会话中的用户对象将成为默认设置，即使我的会话应该直到下个月才到期。

下面是我的 [...nextauth.tsx] 文件

我从我的自定义表单触发登录，如下所示

登录是从 next-auth/client 导入的

我的 _app.js 如下：

然后它在登录后重定向到的页面具有以下内容：（不确定这是否真的做除了获取活动会话之外的任何事情，所以我可以从前端引用它）

当我登录时，[...nextauth.tsx] 中的会话回调返回以下内容：

npm run dev然后由于某种原因，从 PhpStorm 内部运行的终端然后输出

但是我没有改变任何东西，即使我改变了，当然我对应用程序进行了更改，不应该触发会话被删除，但在此之后，会话回调然后返回以下内容：

所以我有点困惑，似乎我的代码正在运行，但也许 PhpStorm 正在触发重新编译，然后会话被清除，但正如我上面所说，肯定会进行更改并且重新编译的版本不应该触发要修改的会话。

**更新 **

我做了一个测试，我做了一个构建并开始是一个生产版本，我可以尽可能多地刷新页面并且会话被维护，所以我证明我的代码工作正常。因此，看起来它与 PhpStorm 确定某些内容已更改并进行重新编译有关，即使没有任何更改。

我正在为设置页面制作一个包装器，以便它可以在每个设置页面上重复使用。在其中，有一个上下文提供程序，我在其中传递用户数据，但尽管查询成功，但它似乎从未传递任何东西。

SettingsWrap.tsx

AccountSettings.tsx

这段代码有什么问题？

我正在尝试将自定义 oauth 提供程序添加到我的 next.js 应用程序中。我正在添加自定义提供程序[...nextauth].js：

OAuth 流程似乎工作正常，因为我看到我的个人资料 ID 在响应中返回，但它在http://localhost:3000/api/auth/signin?error=Callback

我将调试设置为 true，但出现以下错误：

它说客户端无效，但我确信 oauth 标识符和秘密是正确的，并且重定向 URL 设置为http://localhost:3000/api/auth/callback/moneybutton.

如果有帮助，配置文件的响应如下所示：

文档链接：

• https://next-auth.js.org/configuration/providers
• https://docs.moneybutton.com/docs/api/v1/api-v1-user-identity

我不知道这是否是一些错误或我的方法是错误的，并且会感谢任何帮助

对于上下文，我正在将 Django Rest Framework 后端与 Next.js + Next-Auth 集成在一起。我已经完成了大部分集成，除了一部分。要求是有一个刷新令牌系统，该系统将在访问令牌快过期时尝试刷新访问令牌。这是我的逻辑：

/api/auth/[...nextauth].ts

接下来，Next-Auth 文档中的示例展示了useSession()hook 的使用。但我不喜欢它，因为：

1. 一旦刷新访问令牌，它就不会更新会话的状态，除非窗口本身被刷新（这是一个未解决的问题）
2. 感觉就像每个想要使用会话的组件上都有很多代码重复，使用检查会话对象是否存在、会话是否正在加载等的守卫。所以我想使用 HOC。

因此，我想出了以下解决方案：

constants/Hooks.tsx

constants/HOCs.tsx

然后，在我有定期数据获取要求的组件中（我知道这可以以更好的方式实现，这只是一个人为的例子，我试图模拟用户不活动但应用程序仍然可以在需要时在后台运行)，我正在使用 HOC：

pages/posts.tsx

withAuth问题是由于HOC 并且可能由于useAuth每 10 秒的钩子，整个页面都会重新渲染。但是，我没有运气尝试调试它。也许我在我的 React 概念中遗漏了一些关键的东西。我感谢任何和所有可能的建议/帮助。提前致谢。

PS。我知道使用SWR库的解决方案，但我想尽可能避免使用该库。

我正在尝试为 Hasura 身份验证和授权设置 NextAuth。由于 Hasura 需要自定义 jwt 声明，我无法使用 OAuth 提供者提供的默认访问令牌。所以我在 [...nextauth].js 中使用编码块来编码自定义 jwt 令牌，一切正常。但我不知道如何为我的自定义令牌实现刷新令牌。下面是我的“pages/api/auth/[...nextauth].js”

有人可以告诉我在使用自定义 jwt 令牌时如何使用 next-auth 处理刷新令牌吗？

next-auth这是在更新后发生的。突然它抛出这个错误：

所以我检查了 MyApp 文件，但它似乎没有任何问题，至少我没有看到任何问题。

_app.tsx（next.js 中的 _app 文件）

我是否错过了可能导致此错误的内容？

编辑：

显然，当我使用 webpack 4 时它很好。它在使用 webpack 5 时抛出了这个错误。但是如果有 webpack 5 的解决方案会很好。

编辑2：

当我更新next到 version10.2时，它工作得非常好。也许我一定是匆匆忙忙，所以我想一开始就没有任何问题。除此之外，我很欣赏这里的答案。

我正在尝试通过以下方式重定向到受保护的页面：

欢迎页面通过以下方式受到保护：

如果我尝试直接访问欢迎页面，它可以正常工作。但是如果我使用 router.push()，加载需要几秒钟。它主要发生在使用浏览器的后退按钮从欢迎页面返回然后再次按下该按钮之后。尽管它有时还是会发生。

我究竟做错了什么？有人告诉我这是开发环境的正常行为，但它也发生在生产环境中。

这是一个复制品：

https://codesandbox.io/s/distracted-browser-fyjek

这是我的用户模型，它已扩展且工作正常，唯一我仍然不知道如何使用此模型在 nextjs 应用程序的任何其他 API 路由中手动执行 CRUD？我想在我的其他 API 路由中创建条带会话时更新 stripeSessionId。