在next-auth页面中进行自定义电子邮件签名时找不到"next-auth/react“模块。

Question

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

但是现在我想在页面上有一个定制的标志。为此，我遵循了文档，并在pages: { signIn: '/auth/signin' }文件中添加了pages: { signIn: '/auth/signin' }。然后，我在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/react”的模块。即使在node_modules中的下一个文件夹中，也没有“react”命名的文件.

我怎么才能解决这个问题？我在这里做错什么了吗？

Answer 1

我也面临着同样的问题，并意识到这些文档是为使用v4的next-auth/react使用的。

您可能在v3上使用next-auth/client。

要使用beta版本，请执行以下操作：

➜ npm i next-auth@beta

Answer 2

我认为应该从client和进口，而不是反应。

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

另外，

(只是共享另一个解决方案)，您不需要在下一个月份定义自定义页面。您可以有自己的登录页面，只需调用next-auth的signin方法，方法是传递email或google之类的类型。

如果是电子邮件，那就把电子邮件也传递出去。例：

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

Answer 3

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

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