Senior DevRel Advocate
By the end of this guided tutorial, you will be able to integrate Supabase with Appsmith using oAuth2.
In the ever-evolving landscape of application development, creating powerful, data-driven, and user-friendly applications while minimizing development effort is essential. Supabase and Appsmith offer an extraordinary combination that empowers developers to achieve just that. Supabase provides a robust open-source platform for building and scaling database-driven applications, while Appsmith streamlines the UI development process by enabling developers to create custom workflows with ease.
OAuth2 is a widely adopted and trusted standard for authorization. By implementing OAuth2, Supabase and Appsmith ensure that only authorized users can access sensitive data and perform actions within the application, let's review the steps to easily get this integration in place.
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!
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:
Now keep scrolling and you will see more options, let's digest the ones that unfold
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:
Now we are ready to Authorize and Get them alive!!
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.
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
Supabase and Appsmith form a powerful alliance that equips developers with the tools they need to build sophisticated applications and internal tools with ease. The real-time capabilities of Supabase coupled with the rapid UI development offered by Appsmith create a winning combination for productive development.
By implementing OAuth2 as the authentication mechanism, Supabase and Appsmith ensure the security of user data and streamline the login process with popular single sign-on providers. The result is a seamless, secure, and scalable application that empowers teams to bring their ideas to life faster and more efficiently.