NextLink or router.push looses session

[dohomi]

Question 💬

Hello

I followed the v4 documentation and don't find the part to make NextLink or router.push work with client side navigation.

After setting up _app with getInitialProps and using the SessionProvider after every client side render the session is undefined.

Is that intended to work this way? Is there an example where NextLink or router.push is working?

Thanks

How to reproduce ☕️

I followed the guide of:
https://next-auth.js.org/getting-started/example#existing-project
And that does not cover client side routing via NextLink or router.push

Contributing 🙌🏽

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

[panjiesw]

Also hit by this just recently. In our app, there is a language switch that will change nextjs locale following this guide https://nextjs.org/docs/advanced-features/i18n-routing#transition-between-locales. The router.push(...) correctly trigger change to specific locale route, but existing session is marked as unauthenticated and so redirect to signin page.

[panjiesw]

Additional Info: I used the pattern mentioned here https://next-auth.js.org/getting-started/client#custom-client-session-handling

After some tinkering, directly patching next-auth distribution with this (this would be in src/react/index.tsx in the repo), solve the issue for me

export function SessionProvider(props: SessionProviderProps) {
  //...
  const [session, setSession] = React.useState(() => {
    if (hasInitialSession) __NEXTAUTH._session = props.session
    return props.session || __NEXTAUTH._session
  })
  //...
  return (
    <SessionContext.Provider value={value}>{children}</SessionContext.Provider>
  )
}

[dohomi]

@panjiesw where are the values hasInitialSession __NEXTAUTH._session coming from? I currently have an effect and do:

const [stateSession, setSession] = useState(session)
useEffect(
() => {
if(!session){
getSession().then(s => setSession(session))
}
},[session])

[panjiesw]

I patched the distributed next-auth package directly in node_modules. I used v4.x of next-auth. The above code was how it should look with the patch in this github repo in src/react/index.tsx