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

Only run createClient once, then return that instance on subsequent executions

---

Change your code from

import { createClient } from '@supabase/supabase-js';

const supabase = () => createClient(process.env.SUPABASE_URL, process.env.SUPABASE_KEY);

export default supabase;

to

import { createClient } from '@supabase/supabase-js';

const client = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_KEY);

const supabase = () => client;

export default supabase;