"next-auth/react" module not found when making custom email sign in page in next-auth

Question

I'm making a NextJs application with next-auth for the authentication part. Email Sign In is successfully implemented using next-auth's own default pages.

But now I would like to have a custom sign in page. I followed the documentation for this, and added pages: { signIn: '/auth/signin' } in my [...nextauth].js file. Then, I added the given Email Sign In code in pages/auth/signin.js. But upon running yarn dev, I get this module not found error:

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

And I couldn't find any module named 'next-auth/react' in npm or yarn websites. Even in next-auth folder in node_modules, there is no 'react' named file...

How can I solve this? And am I doing anything wrong here?

Answer 1

I faced the same issue and realised the docs are for v4 where next-auth/react is used.

You are probably on v3 where next-auth/client is used instead.

To use the beta version, do:

➜ npm i next-auth@beta

Answer 2

I think it should be imported from client and not react

try this : import { getCsrfToken } from "next-auth/client"

Also,

(just sharing an alternate solution), you need not define the custom pages in next auth. you can have your own login page and there just call next-auth's signin method, by passing the type like email or google.

and if email, then pass the email as well. eg:

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

Answer 3

You can now run npm install next-auth or yarn add next-auth. This will update the version of next-auth to version 4 in which you import SessionProvider as follows (within _app.tsx) :

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