在 next-auth 中制作自定义电子邮件登录页面时找不到“next-auth/react”模块

Question

我正在制作一个带有 next-auth 的 NextJs 应用程序作为身份验证部分。使用next-auth自己的默认页面成功实现了电子邮件登录。

但现在我想要一个自定义登录页面。我按照文档进行操作，并添加 pages: { signIn: '/auth/signin' }到我的 [...nextauth].js 文件中。然后，我在pages/auth/signin.js中添加了给定的电子邮件登录代码。但在运行时，我收到此模块未找到错误：yarn dev

error - ./pages/api/auth/signin.js:1:0
Module not found: Package path ./react is not exported from package C:\...\node_modules\next-auth (see exports field in C:\...\node_modules\next-auth\package.json)
> 1 | import { getCsrfToken } from "next-auth/react"
  2 | 
  3 | export default function SignIn({ csrfToken }) {
  4 |   return (

Import trace for requested module:

https://nextjs.org/docs/messages/module-not-found

我在 npm 或纱线网站中找不到任何名为“next-auth/react”的模块。即使在node_modules的next-auth文件夹中，也没有“react”命名文件......

我该如何解决这个问题？我在这里做错了什么吗？

Answer 1

我遇到了同样的问题，并意识到文档适用于使用的v4next-auth/react。

\n

您可能使用的是v3，其中next-auth/client使用的是 。

\n

要使用测试版，请执行以下操作：

\n

\xe2\x9e\x9c npm i next-auth@beta\n

\n

Answer 2

您现在可以运行npm install next-auth或yarn add next-auth. 这会将 next-auth 的版本更新为版本 4，您可以在其中导入 SessionProvider，如下所示（在 _app.tsx 中）：

import { SessionProvider } from "next-auth/react"

Answer 3

我认为它应该导入client而不是反应

尝试这个 ：import { getCsrfToken } from "next-auth/client"

还，

（只是分享一个替代解决方案），您不需要在下一个身份验证中定义自定义页面。您可以拥有自己的登录页面，只需传递类似或 的signin类型即可调用 next-auth 的方法。emailgoogle

如果是电子邮件，则也传递电子邮件。例如：

const handleSubmit = (event) => {
    event.preventDefault();
    signIn("email", { email, callbackUrl: `${process.env.VERCEL_URL}/` });
};