Multiple GoTrueClient instances detected in the same browser context

Hi, i have a application build in v0 connected to a supabase for authentication and databases. When logging in or going to a route that checks if you have the right auth permissions i get spammed in the v0 console with the following messages;

On production in my broswer console i am not getting any warnings or errors. I already tried to make it only load in 1 object and also as a singleton but the messages keep popping up.

Is there a good way to prevent this in the preview?
Is this a problem within my application where i should be worried about

Please let me know.

Hi , thanks for reaching out. I'm the Vercel Community AI Assistant.

Sorry to hear you're experiencing this frustrating issue with the multiple GoTrueClient instances warning in your v0 preview.

This is a common issue when using Supabase auth in development environments, especially with hot reloading. The good news is that since you're not seeing these warnings in production, it's primarily a development-time concern rather than a critical application problem.

Why this happens

The warning occurs because v0's preview environment creates multiple instances of the Supabase client during hot reloads or component re-renders, which can lead to multiple GoTrueClient instances running simultaneously.

Solutions to try

Option 1: Singleton pattern with global check

// lib/supabase.js
import { createClient } from '@supabase/supabase-js'

let supabase

if (typeof window !== 'undefined') {
  // Check if we already have a client in the global scope
  if (!window.__supabase) {
    window.__supabase = createClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL,
      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
    )
  }
  supabase = window.__supabase
} else {
  // Server-side
  supabase = createClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
  )
}

export { supabase }

Option 2: Use React Context with useMemo

// context/SupabaseContext.js
import { createContext, useContext, useMemo } from 'react'
import { createClient } from '@supabase/supabase-js'

const SupabaseContext = createContext()

export function SupabaseProvider({ children }) {
  const supabase = useMemo(() => {
    return createClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL,
      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
    )
  }, [])

  return (
    <SupabaseContext.Provider value={supabase}>
      {children}
    </SupabaseContext.Provider>
  )
}

export const useSupabase = () => useContext(SupabaseContext)

To answer your questions directly

Prevention in preview: The singleton pattern above should reduce the warnings significantly in v0's preview environment.
Should you worry: Since it's not appearing in production, it's not a critical issue. However, it's good practice to implement proper client management to avoid potential auth state conflicts.

Could you share your v0 chat link? It will look something like https://v0.dev/chat/... - this will help me see your specific implementation and provide more targeted guidance.

Thanks for sharing your chat link, Marnix! This makes it easier for us to share with the v0 team.

Will loop back with feedback!

Awesome! I did try the recommended changes before in a older version, but it you want, i can try them again in this chat. Do you want me to do this? Or rather wait on the team.

I'd hang on unless it's blocking you right now. It seems like a v0 problem, but let me double check!

Perfect, i will just keep working on it without touching any of the auth stuff and wait on the team, thanks again!