🟢Authentication with Supabase

Overview

Setup supabase so Bravo can see it as an oauth2 provider. This needs the following:

• HTML code to display the login screen and acts as the authorize endpoint

• Endpoint to return a valid token

• Config in Bravo

Steps to setup

• Create a supabase database

• Have an app ready in Bravo (You can use this Figma design example)

• Add the following code as a bravo webcomponent: https://raw.githubusercontent.com/codelesslabs/bravo-public-webview-components/refs/heads/main/supabase_bravo_login.html and update the SUPABASE_URL and SUPABASE_ANON_KEY in the code from your Supabase project

• Get the url from the webcomponent - this is the authorize endpoint

• Add the following as a supabase edge function https://raw.githubusercontent.com/codelesslabs/bravo-public-webview-components/refs/heads/main/supabase_bravo_token.ts

  (DISABLE Enforce JWT Verification) Get its URL, this is the token endpoint

• The userinfo endpoint is https://<supabase_project_url>/auth/v1/user (replace <supabase_project_url> with OWN supabase URL) and add ?apikey=<your supabase anon key>

  Should look like this: https://<supabase_project_url>/auth/v1/user?apikey=<your supabase anon key>

• In your Bravo project go to Integrations → Login and turn on Oauth2 authentication, Choose Auth0 and open advanced settings.

• Add the authorize, token and userinfo endpoints from above in the advanced login settings

• Add the following scopes: openid profile email offline in the advanced login settings

• In the data section of Bravo for this app, create a new collection and set its authentication to use oauth2 for the app.

• Add a new request using the userinfo endpoints from above.

• Need to have a header with key="apikey" and value="<your supbase anon key>”

• Run it to test the setup is working.