# 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

{% embed url="<https://youtu.be/Rjg24JmvTcY>" %}

#### Steps to setup

* Create a supabase database
* Have an app ready in Bravo ([You can use this Figma design example](https://www.figma.com/design/YeJ4d5xbt1kdGS3VWvvRH4/Quit-vaping-Supabase-oauth2-DEMO?t=2WAdCfMFdiInnaj7-0))

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2F0z82EZaJa110YKxCKFcr%2FScreenshot%202025-06-19%20at%201.06.33%E2%80%AFPM.png?alt=media&#x26;token=616540d2-01e7-4885-8e6d-a49176894dd7" alt=""><figcaption></figcaption></figure>

* 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 <mark style="color:red;">update</mark> 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>

  <mark style="color:red;">**(DISABLE Enforce JWT Verification)**</mark> Get its URL, **this is the token endpoint**
* **The userinfo endpoint** is https\://\<supabase\_project\_url>/auth/v1/user (<mark style="color:red;">replace</mark> **\<supabase\_project\_url>** with OWN supabase URL) and <mark style="color:red;">add</mark> **?apikey=\<your supabase anon key>**

  Should look like this: \
  https\://<mark style="color:red;">\<supabase\_project\_url></mark>/auth/v1/user?apikey=<mark style="color:red;">\<your supabase anon key></mark>
* 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<br>

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FYufjNTeQSVLPr7SCKWLx%2Fintegrations%20bravo%20studio.png?alt=media&#x26;token=7f35bd06-eabc-42e6-9c91-99236a1ec98d" alt=""><figcaption></figcaption></figure>

* 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**="<mark style="color:red;">\<your supbase anon key></mark>”
* Run it to test the setup is working.

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FCHmrjevEXQNzmxS1kL75%2FScreenshot%202025-06-19%20at%201.13.19%E2%80%AFPM.png?alt=media&#x26;token=dbd1899a-37b9-43bb-85fa-f27f97c1f2d2" alt=""><figcaption></figcaption></figure>

*