Bubble.io and Google Cloud Firestore integration: Step-by-Step Guide 2024

Integrating Bubble.io with Google Cloud Firestore allows you to leverage the scalability and real-time capabilities of Firestore within your Bubble.io applications. This guide will walk you through the necessary steps to set up this integration.

Prerequisites:

You would require an account on Bubble.io as well as on Google Cloud. You also must have a project to integrate with Firestore within Google Cloud.

Step 1: Setting up an API configuration in Firestore

The first step is to generate an API configuration in Firestore. Here's how to do it:

• Log into your Google Cloud account and navigate to your project's Firestore page.
• Click on the 'Settings' to open a dropdown menu.
• Choose 'Project settings' and navigate to the 'Service accounts' tab.
• This page will display a list of service accounts associated with your project.
• Find the service account that has Firestore access. This is usually named 'default service account'.
• Click on the 'Generate new private key' button next to your Firestore service account. This will download a .json file containing your API configuration.

Remember to secure this .json file because it contains sensitive information about your Firestore project.

Step 2: Connecting Firestore with Bubble.io via API Connector

Bubble.io uses an API Connector to integrate with Firestore. Below are the steps to accomplish this:

• Log into your Bubble.io account and navigate to your application page.
• From the application page, go to 'Plugins' option from the left menu.
• In the Plugins page, click on '+ Add plugins'.
• Search for 'API Connector' in the search bar and click on 'Install'.

Step 3: Configuring Firestore API in Bubble.io

The next step is to configure Firestore within the API Connector in Bubble.io.

• From the installed plugins, click on 'API Connector'.
• Then, click on 'Add Another API' button and name this API 'Firestore'.
• Set the API Base URL as https://firestore.googleapis.com/v1/projects/Your_Project_ID/databases/(default)/documents/
  Replace 'Your_Project_ID' with your Firestore project id.
• Set Authentication as 'Bearer Token’.
• You would need to add the token from the downloaded .json file here. If the .json file is not in a proper format to retrieve the token, you might need to use JWT.io or a similar service to decode it.

Step 4: Adding Endpoints

• Click on 'Add another call'.
• Set the call's name as 'Get Collection'.
• Set the call's URL as API Base URL + {{CollectionName}}, where you would replace {{CollectionName}} with the name of your collection in Firestore.
• For the 'Data type', choose 'JSON'.

Once you have the API setup, you can now utilize Firestore in your Bubble.io application.

Remember to use the 'Initialize call' button in the API Connector to check the connection with Firestore. This checks that Bubble.io can successfully reach your Firestore collection with the given API parameters.

You can also explore more functionalities like 'Add Document', 'Get Document', 'Update Document' and 'Delete Document' by adding the same as calls and adjusting the API URL and data type in Bubble.io API connector.

Note: The aforementioned steps show a manual method of connecting Firestore with Bubble.io. Depending on your Bubble.io subscription type, you could also have the option of automated secure configuration using 'Detect Data' and 'Add Data', which automatically sets-up the API endpoints.