useSession() return null after Internationalized Routing, unless I refresh the page.

[aboveyunhai]

Description 🐜

session is null after Internationalized Routing. Then if I refresh the current page, the session will return without problem;

Is this a bug in your own project?

Yes

How to reproduce ☕️

import Link from 'next/link'

export default function I18nLink(props) {
  return (
    <Link href="/another" locale="fr">
      <a>To /fr/another</a>
    </Link>
  )
}

In one page or component I have the following code:

const ExampleComponent = () => {
   const [session, loading] = useSession();
   return (
       {  session ?  <div> session exist </div> :   <div> session does not exist </div> }
   )

In a page

 const index =  () => {
   return (
      <div>
        <I18nLink />
        <ExampleComponent />
      </div>
    )
}
 export default index.

When I was already logined. And then click the I18nLink, the page will transit to the new locate without problem, but the session will be missing. Hence <div> session does not exist </div> displayed.

My current workaround:

instead of using next router, just simply use window.location = \newLocateUrl to hard refresh the page.

Note:

I was using useSession() to conditionally render certain components. If this wasn't a right way to do so, just let me know.

Screenshots / Logs 📽

No response

Environment 🖥

Ubuntu
Windows 10

Contributing 🙌🏽

Yes, I am willing to help solve this bug in a PR

[thomvand26]

I have a similar issue!

I am using next-auth with next-i18next.

After switching the locale, the loading state (coming from useSession()) switches to true (and the session is undefined).

The loading state stays true, until I focus to another browser tab and come back.

I would hope the session would also be kept between locales, just like it is kept between page navigations...

I have no idea why this is happening, and if this behavior is normal.

[sastraxi]

This may be an issue with the next-i18next package: i18next/next-i18next#1075

Can you confirm if this tracks with what you're both seeing?

[thomvand26]

I solved my issue by wrapping all my context providers, except the next-auth/client's Provider, in next-i18next's appWithTranslation, and wrapping the returned component in next-auth/client's Provider.

So the weird undefined session behavior was caused by putting the auth provider inside the i18n wrapper. So don't do that.

[aboveyunhai]

This may be an issue with the next-i18next package: isaachinman/next-i18next#1075

Can you confirm if this tracks with what you're both seeing?

Yes, can confirm it's a next-18next or probably i18next issue. And the solution is what @thomvand26 said.

In terms of code for next-18next, the fix would be something like the following:

const MyApp = ({ Component, pageProps }: AppProps) => {
  return (
   //...Component
  );
};

const AppWithI18n = appWithTranslation(MyApp);

const AppWithAuth = (props: AppProps) => (
  <Provider session={props.pageProps.session} >
    <AppWithI18n {...props} />
  </Provider>
)

export default AppWithAuth;

[nguyentiendan]

It work for me. Thank you