Supabase Multiple Browser Tabs Issue

[neelbrahmakshatriya]

Bug report

• I confirm this is a bug with Supabase, not with my own application.
• I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

When multiple tabs of the application are open simultaneously, Supabase client operations (updates, mutations) stop working. Network calls are not being made when trying to perform operations. However, the functionality works correctly when only a single tab is open.

To Reproduce

1. Open the application in a browser tab
2. Open the same application in multiple tab
3. Try to perform any Supabase operation (update/insert/delete) in either tab
4. Observe that no network calls are made (visible in browser dev tools network tab)
5. Close all tabs except one
6. Try the same operation
7. Observe that it now works correctly

Expected behavior

Supabase operations should work consistently regardless of the number of tabs open.

Current Behavior

• Operations work correctly with a single tab open
• Operations fail silently (no network calls) when multiple tabs are open
• No error messages in console
• No network requests visible in browser dev tools

The current client implementation:

import { createBrowserClient } from '@supabase/ssr'

export function createClient() {
  return createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!)
}

Repository Structure

The application is using a monorepo structure with the following packages:

• packages/supabase - Contains Supabase client configuration and helpers
• apps/web - Main Next.js application

Potential Technical Causes

The issue might be related to several technical aspects:

1. WebSocket Connection Management:

   • Multiple tabs might be competing for the same WebSocket connection
   • Each tab might be trying to establish its own WebSocket connection, leading to conflicts
   • The WebSocket connection might not be properly shared across tabs

2. Session Management:

   • Auth tokens and session data might not be properly synchronized across tabs
   • Token refresh mechanisms might conflict when multiple tabs are open
   • Session storage conflicts between tabs

3. Client Instance Management:

   • Each tab creating its own Supabase client instance might lead to race conditions
   • Lack of proper cross-tab communication for client state
   • Potential conflicts in connection pooling

4. Browser Storage Conflicts:

   • Multiple tabs might be competing for localStorage/sessionStorage access
   • Race conditions in storing and retrieving auth state
   • Conflicts in storing and updating session information

System information

• Next.js Version: 15.0.3
• @supabase/ssr: 0.5.2
• @supabase/supabase-js: 2.46.2
• OS: macOS 24.2.0

[Heet-Bhalodiya]

Any update on this like I am also having the same issue?

[rungchan2]

I also have similar issue. mine could be little different cause but have same problem. doesn't even network call not being made and entire CRUD actions froze. and double checked with console.logs and confirmed that it stops at right where creating a client.
const supabase = createClient()
It could be my code problem, but anyone who had similar issue, can you tell me what could be the possible cause?

[Heet-Bhalodiya]

Hello @rungchan2,

Yes, the issue you're experiencing is related to your code, not Supabase.

It seems that the problem arises because you're using supabase.auth.refreshSession(), which causes multiple sessions to be created when you open a new tab. In our case, this led to the issue. We resolved it by replacing supabase.auth.refreshSession() with supabase.auth.getSession().

Please try this solution. If the issue persists, feel free to provide more details, and this may help others offer a better solution.

[Hallidayo]

Hi everyone, I'm going to move this one over to a discussion for troubleshooting. Thank you @Heet-Bhalodiya for you help on this one!

[markerikson]

We're seeing some similar behavior with https://github.com/replayio/nut.new .

If we open up multiple tabs, it will sometimes hang on the await getSupabase().auth.getSession() call.

It happens intermittently, so I can't consistently repro it, but it happens often enough I was able to debug it some. I traced it down through the Supabase Auth locking logic. In general it seems like it's deadlocking on the navigator.locks.request() call. Not sure how else to debug this one.

[porkopek]

The same happens to me when opening a new tab in a browser when the user is already logged in another tab. Some times it doesn't get the session. Refreshing the tab sometimes works. This doesn't happen always. Difficult to reproduce.

[Ercilan]

I'm encountering an issue where having multiple tabs causes the await supabase.auth.getSession(); method to hang, and it seems to happen 100% of the time.
I found a related answer here: supabase/auth-js#768 (comment)
I followed the documentation and was able to resolve it.

[achen2304]

This worked for me!

[z0d14c]

Having a similar issue -- not able to fix easily (I checked the linked thread above)
I can get around it by replacing the lock fn, but not sure how safe that is:

const lock: LockFunc = async (name, acquireTimeout, fn) => {
  const id = crypto.randomUUID();
  const t0 = performance.now();
  console.log('LOCK:req', { id, name, acquireTimeout });
  try {
    const out = await fn();
    return out;
  } finally {
    console.log('LOCK:done', { id, name, ms: performance.now() - t0 });
  }
};

[BEEFF]

I can confirm this bug on multiple supabase projects. Could be a supabase setting that is not logging errors properly like connections or perhaps shared database deadlock exception handling. @neelbrahmakshatriya how is your supabase hosted?