An opinionated adapter forked from supabases auth helpers
This adapter allows you to share a session between a website and your extension using supabase. The Website will be the main way users log in and out. The extension will be able to read and modify the cookie from that website in order to automatically follow its auth state.
On your website, make sure your createSupabaseClient stores the session in your cookies.
If you use any of the adapters from supabases auth helpers this is already the
case. Otherwise you can extend the CookieAuthStorageAdapter from @supabase/auth-helpers-shared.
Then configure onAuthStateChanged like so:
supabaseClient.auth.onAuthStateChange(notifyExtensionOfAuthStateChange({extensionId: YOUR_EXTENSION_ID}))
The extension can't tell by itself when the cookie was changed. So we send a message to the extension whenever our auth state changes to make sure it gets logged out / logged in instantly as well.
Then, in the service-worker of your extension you can create create your client like this:
const supabaseClient = createExtensionServiceWorkerAdapter({
supabaseUrl: SUPABASE_URL,
supabaseKey: SUPABASE_ANON_KEY,
websiteUrl: 'https://www.example.com',
})The only important thing here is that you include the websiteUrl which is the place where your actual login will happen as that is where the adapter will read the cookie from.
In your extension itself I recommend doing all network requests in the service worker and sending the results to whatever content script needs it.
The reason this works is because we have a single source of truth.
Supabase JWT's will expire after some time so we need to use our refresh_token to get a new one. However a refresh_token can only be used once. So when we use it in the extension and then store the response via chrome.storage it will invalidate the token on our website, forcing the user to log in again.
Here's some examples of common auth flows:
