Integrating Supabase with Appsmith Using Oauth2

Goal

Prerequisites

Overview

1. Publish your OAuth App on Supabase

   Go to your Supabase Organization settings and find a the tab called "oAuth Apps", there, click on the green button on the right for "Add Application" 

   

   Now you will be prompted with a form to create a new oAuth2 App, first, you will enter the Application Name you want for your app, second, the App Website URL, in this case if you already have an Appsmith app you wish to integrate Supabase, use your Appsmith app URL, if not, just use "https://app.appsmith.com/", once we have our Appsmith app done, we can go back here and edit this field. Last but not least, the Authorization Callback URL, this is the URL that Supabase will callback one the authorization is approved. For all oAuth2 Appsmith apps this value is the same: "https://app.appsmith.com/api/v1/datasources/authorize" 

   

   Once you hit Save, Supabase will register your oAuth2 app and it will give you the Client ID and the Client secret, it's really important that you store this 2 values someplace secure since you wont be able to see it again. Make sure to keep this tab open and copy these values someplace elese. 

   

   Now we have everything we need to integrate it with Appsmith!

2. Integrate Supabase as a Datasource in Appsmith

   Now, let's go to your Appsmith app, it could be a new one or an existing one, and on the left menu you will see the Datasources menu, click on the "Add Datasource" option and then select "Authenticated API" as the option. 

   

    

   When you select this option, a section with a lot of fields is presented to you. Let's go one by one and I will tell you what you need to input on each option. All of these are based on Supabase's official developer documentation, but I'm making things easier for you 😉 

   Let's do it pieces by pieces, first you will need to enter Supabase's base API, the authentication type, grant type and access token options: 

   • URL: https://api.supabase.com/v1/
   • Authentication Type: oAuth 2.0
   • Grant type: Authorization Code
   • Add Access Token To: Request Header
   

    

   Now keep scrolling and you will see more options, let's digest the ones that unfold 

   • Header Prefix: Appsmith will automatically fill it with "Bearer" leave it like that.
   • Access Token URL: Based on Supabase's docs it should be https://api.supabase.com/v1/oauth/token
   • Client ID: Paste the Client ID that Supabase generated in the first step. 
   • Client Secret: Paste the Client secret that Supabase generated in the first step. 
   • Scope(s): Currently, Supabase only supports the "all", so let's use that one.
   • Authorization URL: Based on Supabase's docs it should be https://api.supabase.com/v1/oauth/authorize 
   

    

   If you scroll down just a little bit more, we'll find the last options we need to set under "Advanced Settings" make sure to define:

   • Send scope with refresh token: Yes
   • Send client credentials with (on refresh token): Header
   

   Now we are ready to Authorize and Get them alive!!

3. Authorize the Supabase App into Appsmith

   Now that we have defined our oAuth2 Authentication configuration, let's hit that orange button "Save and Authorize". click it and this will take you to Supabase consent screen for your Authorization: 

   

   Make sure to click that green button to Authorize Our App and Supabase will redirect back to Appsmith, and you will see a notification confirming the oAuth2 Authorization is now successfully in place!

   

   From here, we can start using any of the available Supabase APIs endpoints using this newly created Datasource, as Appsmith will automate the process of refreshing access tokens, ensuring that users do not face disruptions during their sessions.

4. Use the newly created Datasource

   Now that we have OAuth2 successfully integrated inside Appsmith, you can go ahead and create a new Query, using the left menu "+" icon next to the Queries section and then selecting the "Supabase OAuth2 query" option. 

   

   Now Appsmith will present a very familiar query builder UI for you to define your request, and it will pre-populate the base URL based on the one we defined in the datasource. We can reference Supabase API Docs here, for example, let's use the "/projects" endpoint to request for the organization projects list. Also, it's important to define a meaningful name for this query, in this case, I'm gonna call it "SUPABASE_PROJECTS" 

   

    

   If we hit "RUN" the API will correctly authenticate, Appsmith will automatically inject the token on the requests and pulls information with no problems whatsoever! You can see the response JSON Payload and we can bind this API query to an UI table component that updates automatically from Supabase with 1 one click, selecting the "Add new Widget" -> Table widget on the right of you screen. 

   

    

   And BOOM, just like that in 3 steps we have an oAuth Integration that manages secrets, pulls data from authenticated APIs and binds data automatically to UI components, isn't this amazing? And to make things even easier for you we've created a forkable sample app that you can fork and just input your Client ID and Secret and get rolling: https://app.appsmith.com/app/supabase-app/page1-64c597755dd3482b9ab5e31e

Conclusion

Additional Resources