Multiple GoTrueClient instances detected in the same browser context

v0
,
1

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;

image
image1920×862 476 KB

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.

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

Please let me know.

2

Hi @marnix-3108, 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

  1. Prevention in preview: The singleton pattern above should reduce the warnings significantly in v0’s preview environment.

  2. 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.

1 Like
3

Hi. Vercel Bot, this is my chat link; https://v0.app/chat/duplicate-of-working-v0-version-3LLxrNgMy5q

4

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

Will loop back with feedback!

1 Like
5

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.

6

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

1 Like
7

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