How to make it work with Next.js (SSG especially)

[jamfive]

Hello there, I'm not able to make this package work in Next.js since when compiling the error is localStorage is not defined.
The same happens when using sessionStorage.

How to fix this?

Thanks in advance.

[Maatzu]

Hello there, I'm not able to make this package work in Next.js since when compiling the error is localStorage is not defined. The same happens when using sessionStorage.

How to fix this?

Thanks in advance.

Hey. Are you using the new App directory in Next 13.4?

[jamfive]

Hello there, thanks for your answer. No, I’m not using it … should I? And why? Thanks in advance Have a great day

…

Il giorno 15 mag 2023, alle ore 09:13, Matz-Leander Solheim Wiik ***@***.***> ha scritto: Hello there, I'm not able to make this package work in Next.js since when compiling the error is localStorage is not defined. The same happens when using sessionStorage. How to fix this? Thanks in advance. Hey. Are you using the new App directory in Next 13.4? — Reply to this email directly, view it on GitHub <#90 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABVBMI7CZM7NY6CTDDEJITLXGHJQ7ANCNFSM6AAAAAAX75YRUM>. You are receiving this because you authored the thread.

[Maatzu]

No i'ts just that you can define it with "use client". But if you are on the traditional pages directory you can try this:

export default function App({ Component, pageProps }: AppPropsWithLayout) {
  const [isClient, setIsClient] = useState(false);
  useEffect(() => setIsClient(true), []);

  const router = useRouter();

  const Layout = Layouts[Component.Layout] ?? ((page) => page);
  return (
    isClient && (
      <AuthProvider authConfig={authConfig(router)}>
        <RootLayout>
          {Component.Layout ? (
            <Layout>
              <Component {...pageProps} />
            </Layout>
          ) : (
            <Component {...pageProps} />
          )}
        </RootLayout>
      </AuthProvider>
    )
  );
}

This makes sure it is rendered on the client and not pre-rendered.

[jamfive]

Seems to work. Thanks!!

Btw. I'm getting some weird behaviour with Firefox browser ... the library warns in console:
Passed login state must be of type 'string'. Received 'undefined'. Ignoring value...

Then the pages stucks for a while (a minute or so) ... then the login page appears.

Other browsers have no issue of that kind. They just work as expected.

[Maatzu]

hmm, strange.

I'm sorry, but I'm not familiar with this issue.

[soofstad]

Thanks for reporting this @jamfive. Will see if I can fix this in the library itself at some point.
Regarding the console logging; the latest version (v1.13.4) should resolve that :)