Supabase auth helper for Web extensions (chrome extensions or other)

An opinionated adapter forked from supabases auth helpers

How it works

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.

Quickstart

On your website

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.

In your extension

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.

In depth about why it works and how best to use 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:

Login

Token refresh

Logout