supabase / auth-js

An isomorphic Javascript library for Supabase Auth.

MIT License

321 stars 152 forks source link

Possible bfcache / BroadcastChannel issue #779

Closed JPVRS closed 6 months ago

JPVRS commented 10 months ago

Bug report

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

Describe the bug

In Lighthouse testing, I'm getting an error that bfcache is disabled because the page has a registered BroadcastChannel with listeners. In searching my project files, I found a BroadcastChannel being created in this library.

To Reproduce

Expected behavior

Screenshots

System information

OS: Windows
Browser: Chrome (up to date)
node.js 18.12.1
next.js 13.0.5 using pages directory
supabase-js 9.1.3

Additional context

I'm not certain the cause is this library. I'm just looking at all possibilities because a solution hasn't been forthcoming after a significant amount of effort to find one.

abrorAbdullaev commented 7 months ago

Apparently the core of NextJs is overriding headers at some point by setting no-cache, must-revalidate to header Cache-Control on page requests, thought for assets requests it sets some cache on response headers. Lighthouse complains based on that header.

samternent commented 7 months ago

I've patched this locally to give the option to disable the creation of the BroadcastChannel, which has fixed the issue in my project.

@supabase/gotrue-js@patch @supabase/supabase-js@patch

Then disabled the BroadcastChannel via:

const supabaseOptions: SupabaseClientOptions = {
  auth: {
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: true,
    broadcast: false,
  },
};

I couldn't see any behavioural changes when disabling this, but I'm also only running a very small project and don't have any reliance on cross-tab events. The sessions are stored in localStorage and persist just fine between tabs. A refresh is required to sync the tab state either way, both with this enabled and disabled.

I'd be interested to hear what implications this change might have.

hf commented 6 months ago

BroadcastChannel is used to send messages between tabs. So for example, imagine your user clicks Sign Out in tab B, you want to get the SIGNED_OUT event in tab A too.

If that's fine with you, sure, disable it. I believe most developers find cross-tab events more useful than not.

Will be closing the issue now. Please re-open or continue to comment if you think this needs more attention still.