Multiple GoTrueClient instances detected in the same browser context

Question

I'm creating a project with nextjs and supabase.

For an unknown reason, I'm getting the following warning in the console:

Multiple GoTrueClient instances detected in the same browser context. It is not an error, but this should be avoided as it may produce undefined behavior when used concurrently under the same storage key.

I can't seem to find what could be causing this,

This is how I initiate the supabase instance in _app.tsx:

export default function App({
  Component,
  pageProps,
}: AppProps<{ initialSession: Session }>) {
  const [supabaseClient] = useState(() => createBrowserSupabaseClient());

  return (
    <>
      <style jsx global>
        {`
          :root {
            --font-inter: ${inter.style.fontFamily};
          }
        `}
      </style>
      <SessionContextProvider
        supabaseClient={supabaseClient}
        initialSession={pageProps.initialSession}
      >
        <ChakraProvider theme={theme}>
          <Layout>
            <Component {...pageProps} />
          </Layout>
        </ChakraProvider>
      </SessionContextProvider>
    </>
  );
}

and this is how I consume the instance in components:

const ForgotPassword = () => {
  const toast = useToast();
  const supabase = useSupabaseClient();
...
}

Have you ever had an issue like that and can help me understand what I'm doing wrong?

Answer 1

The reason why I was getting this error is because I had to downgrade the auth-helpers-nextjs from 0.7.x to 0.6.x to support no email confirmation when registering,

Version 0.7.x automatically returns singleton object for createPagesBrowserClient

With version 0.6.x createBrowserSupabaseClient always return new object rather then singleton,

With reactStrictMode enabled with react 18 the page will render twice, causing the error of Multiple GoTrueClients.

How I fixed it is by creating a new object with singleton instance of Supabase Client:

import { createBrowserSupabaseClient } from "@supabase/auth-helpers-nextjs";

const SupabaseClient = {
  instance: createBrowserSupabaseClient(),
};

export type SupabaseClientType = typeof SupabaseClient;

Object.freeze(SupabaseClient);

export { SupabaseClient };

And then consume it in the _app.tsx:

const [supabaseClient] = useState(() => SupabaseClient.instance);

Now the warning should be gone.