TypeError: Cannot destructure property 'data' of '(0 ,

[peteryang1756]

Question 💬

I try to add login and logout button but I get this error how to fix ?

TypeError: Cannot destructure property 'data' of '(0 , next_auth_react__WEBPACK_IMPORTED_MODULE_4__.useSession)(...)' as it is undefined.
14:22:46.097

How to reproduce ☕️

export default function Header() {
  const { data: session, status } = useSession()
  return (
    <>
    <header>
    
  <My head>
  <div className="flex md:order-2">
    <Button>
        {session ? (
         <a
                href={`/api/auth/signout`}
                onClick={(e) => {
                  e.preventDefault()
                  signIn()
                }}
              >
                Sign out
              </a>
      ) : (
         <a
                href={`/api/auth/signin`}
                onClick={(e) => {
                  e.preventDefault()
                  signIn()
                }}
              >
                Sign in
              </a>
      )}
     
    </Button>

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[Mergemat]

hello! did you find a solution for this?

[alessio-zamparelli]

Same situation here, next-auth 4.24.5

[GRA0007]

This error occurs for me when I try and upgrade from Yarn v1 to Yarn v4. We have a workspaces setup where every package is a Next.js site that uses next-auth, and we have a couple that are still using the pages router. When building just the sites that use the pages router, we get the same issue:

Error occurred prerendering page "/home". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot destructure property 'data' of '(0 , o.useSession)(...)' as it is undefined.

The only way I've managed to fix it is by downgrading Yarn back to v1, but we'd really like to migrate to take advantage of improvements like the new workspaces foreach command.

[XolifyDev]

Did you downgrade yarn or next-auth?

[GRA0007]

Yarn unfortunately. Downgrading next-auth or next didn't seem to change anything. Until we have the resources to migrate to the app router, we can't upgrade Yarn.

[AlizerUncaged]

any fixes for this? still having this problem

[jusiho]

same problem, help please

[Mergemat]

same problem, help please

i forgot to add 'use client' when using a hook

[Adhith-c-seero]

I too faced the same issue and after only i realized i was calling the Login form somewhere else . we have to wrap the component inside < SessionProvider >.

my code was :
< SessionProvider >< LoginForm /></ SessionProvider >

this was correct and inside LoginForm i called const { data: session, status } = useSession()

which is correct .

But i had a different login for other user which uses the same LoginForm component , in that page i just called :
< LoginForm />

without the SessionProvider which was causing the issue in my case.