ChromeKit
HomepagePricing
  • 👋Get Started
  • 💡What you get?
  • 🔬Chrome Extension Types
  • ☄️Examples
  • ⚡Extension directory
  • 🖌️Initialise
    • Content script
    • Content script Sidebar
    • Sidepanel
    • Popup
    • IFrame (Content script sidebar from web app)
    • IFrame (Content script sidebar from extension files)
  • 🔧Feature
    • Auth External Communication
    • Session auth
    • Supabase auth
    • Welcome page
    • Uninstall page
  • 🧩Component
    • Twitter
    • License
    • Floating Input
  • 📙Guidelines (Only for purchased users)
    • Message passing
    • Permissions
    • Chrome web store
    • Tips
  • ❓FAQ
    • How to get extension id?
    • Common
Powered by GitBook
On this page
  1. Feature

Supabase auth

PreviousSession authNextWelcome page

Last updated 6 months ago

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 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

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

See an example usage here (Available only for paid users)

How to get your extension id?

🔧
initialise
https://github.com/ChromeKit-Org/docs/tree/main/supabase-auth
How to get extension id?