Integrating Bubble.io API with Supabase: A Step-by-Step Guide

Integrating Bubble.io API with Supabase: A Step-by-Step Guide

Introduction

Welcome to my guide on integrating the Bubble.io API with Supabase. In this post, I’ll walk you through the steps to connect your Bubble.io front end with a Supabase backend, providing a seamless and efficient way to manage your web app’s data. Whether you’re new to Bubble.io or looking to enhance your web app’s backend capabilities, this guide is for you.

Setting Up Supabase using Custom Schemas

Supabase offers a great backend solution with real-time capabilities and easy job scheduling. Here’s how I set up Supabase for our project. I recommend using the public schema, but if you decide to use a custom schema, you’ll need to expose it.

To be clear – schemas other than public do not show up in auto-generated API documentation or in the graphql playground.

They must be exposed and also you must declare the correct privileges if you wish to access the API endpoint

1. Create a Project: Sign up for Supabase and create a new project.
2. Database Configuration: Set up your database and define the necessary tables using the snowflake schema.
3. Custom Schema Please make sure that if you define a custom schema in your Supabase backend you will need to grant permission to the user roles – otherwise the Bubble API connector will not be able to directly integrate – a comprehensive guide can be found here on the Supabase site
   https://supabase.com/docs/guides/api/using-custom-schemas?language=curl

4. Click on “Project Settings”

5. Click on “API”

6. Add your custom schema within this list

7. API Keys: Generate the API keys needed to connect Supabase with Bubble.io.

Simplifying with Public Schema and RLS

Instead of exposing custom schemas, it’s often easier to keep all tables in the public schema and secure them using Row Level Security (RLS) and GRANT/REVOKE commands.

Row Level Security (RLS): RLS allows you to control access to specific rows within a table based on user roles or conditions, ensuring fine-grained access control.

GRANT/REVOKE Commands:

• GRANT: Use this command to provide specific privileges to users or roles. For example, grant SELECT permission to certain users, allowing them to read data from a table.
• REVOKE: Use this command to remove previously granted privileges from users or roles. For example, revoke all access from the anon and authenticated roles, preventing them from interacting with a table

GRANT SELECT ON table_name TO role_name;

REVOKE ALL ON table_name FROM anon, authenticated;

By using RLS and GRANT/REVOKE, you can effectively control who has access to specific data, ensuring that sensitive information remains secure.

This approach simplifies the setup and ensures robust security for your web app’s data.

Connecting Bubble.io with Supabase

When a call is made to a specific resource, we need to specify an HTTP method that tells the server what kind of action we want to initiate. The five most used HTTP methods are:

Integrating Supabase with Bubble.io API Plugin

When integrating Supabase with Bubble.io, you need to configure endpoints in the API plugin by specifying the correct HTTP method and URL. Supabase provides a RESTful API that allows you to interact with your database. Each endpoint in Supabase corresponds to a table or function in your database, and the method you use (GET, POST, PUT, PATCH, DELETE) determines the action performed.
In todays post we will focus on GET and POST

Finding the Correct Endpoint

1. Supabase API Endpoints: Supabase documentation lists all available endpoints. For example, to retrieve data from a table, use a GET request to https://your-project.supabase.co/rest/v1/your_table_name.
2. Bubble API Plugin: In Bubble, add a new API in the API connector plugin, and configure it with the correct Supabase endpoint.

Here’s how you can set up a typical GET request in Bubble to retrieve data from a Supabase table:

1. Open the Bubble API Connector: Go to the Plugins tab and add the API Connector plugin.
2. Add a New API: Click on “Add another API” and give it a name.
3. Configure the Endpoint:
   • Name: Give your API call a name, such as “Get Data”.
   • Method: Select GET.
   • URL: Enter the Supabase endpoint, for example, https://your-project.supabase.co/rest/v1/your_table_name.
   • Headers: Add the necessary headers, typically apikey and Authorization.

Example Configuration

curl -X POST 'https://[your_supabase_url]/rest/v1/rpc/[function_name]' \
-H "Content-Type: application/json" \
-H "apikey: SUPABASE_KEY" \
-H "Authorization: Bearer SUPABASE_KEY"
-H "Accept-Profile: Custom Schema Name"

Using the Endpoint in Bubble

Once configured, you can use this endpoint in Bubble workflows or data sources. For example, you can display retrieved data in a repeating group or use it to trigger actions based on the data fetched from Supabase.

This approach leverages the strengths of both Supabase’s backend capabilities and Bubble’s frontend development environment, providing a seamless integration for robust web app development.

To integrate Bubble.io with Supabase, follow these steps:

1. Install Bubble API Connector: Add the API Connector plugin to your Bubble.io app.
2. Configure API Calls: Set up API calls in Bubble.io to interact with Supabase endpoints.
3. Authentication: Secure your API calls using the Supabase API keys. There are different protocols when defining for Use as Data or Use as Action – and also

4. 

   Use as Data

5. 

   Use as Action

6. 

   When Choosing use as action please make sure to manually configure the JSON if need be

7. 

8. 

   Inputting your parameters in the workflow
   
   
9. Below is an image of a post method call for Bubble

Conclusion

Now that you have integrated the Bubble.io API with Supabase, your web app is ready to handle dynamic data efficiently. Thank you for reading! If you found this guide helpful, please share it and visit DataSolve.tech for professional data solutions.