For a Chrome extension using Supabase, is using direct fetch instead of invoke() the recommended approach for Chrome extensions?Hello folks, I'm developing a Chrome extension using Supabase and running into a strange issue with authentication after token refresh events.
Setup:
- MV3 | React | Webpack | Supabase JS Client
- Chrome extension with background script
- Using onAuthStateChange to listen for auth events
- Making API calls to Supabase Edge Functions
The Issue:
- User authenticates ( login with password ) successfully ✅
- API calls work fine initially ✅
- Token refresh happens automatically (I can see the TOKEN_REFRESHED event) ✅
- I get the new session in the auth state change listener ✅
- But then: Any subsequent API calls using supabase.functions.invoke() just hang - no response, no error, nothing
- Even supabase.auth.getSession() hangs and returns nothing
Here's the strange part: If I make ANY manual fetch request to Supabase after the token refresh, suddenly all supabase.functions.invoke() calls start working again.
For example,
a)
// token refreshed // await supabase.functions.invoke('my-function', { ... }); // nothing happened
b )
// token refreshed // fetch(`${SUPABASE_URL}/functions/v1/my-function`,) // it works and after that other supabase.functions.invoke('') works perfectly
. My questions are :
- Has anyone experienced this Chrome extension + Supabase token refresh issue?
- Is there a proper way to "refresh" the Supabase client's internal state after token refresh?
- Why does a manual fetch request fix the invoke() method?
- Is using direct fetch instead of invoke() the recommended approach for Chrome extensions?
Any insights would be greatly appreciated! This seems like it might be related to how Supabase manages internal connection state in the Chrome extension environment.
Thanks in advance.