Supabase auth

Use Supabase auth to add authentication to your extension.

Install

Before you add supabase-auth, ensure you have the initial extension setup. If you have not done that first initialise and then comeback here.

npx ChromeKit-Org/cli add supabase-auth

Install supabase js client

cd into sidepanel-root, cs-root or the corresponding type of extension you have and run the bellow

npm install @supabase/supabase-js

Supabase configuration

Navigate to supabase dashboard and get your project API key.

You can get the key from Project Settings -> API (In configuration sectino) -> Project API Keys. Get the anon public key and add it to cs-root/src/App.jsx in createClient.

Get your project url from the same page in Supabase but under Project URL section.

Add the same in createClient in extension/oauth/oauth.js file.

Specify the oauth provider in signInWithOAuth in extension/oauth/oauth.js file.

Note: Never add your service_role supbase key anywhere in the extension.

Add the extension's url in redirect url's

Nagivate to supbase dashboard -> Authentication -> URL Configuration.

Add the following to the Redirect URLs

chrome-extension://{extension_id}/oauth/oauth.html

Replace {extension_id} with your extension id. Check the next section to get your extension id.

You can see that the same redirect url is specified in extension/oauth/oauth.js file in this supabaseClient.auth.signInWithOAuth. Once the user signs in with the social provider, supabase will redirect the user to the redirect url we just added. The auth token is stored in the local storage which you can access in your extension.

Example

See an example usage here https://github.com/ChromeKit-Org/docs/tree/main/supabase-auth (Available only for paid users)

In cs-root -> src -> App.jsx you can see the UI of how Supabase username/password and github oauth can be used.

How to get your extension id?

How to get extension id?