Bubble.io and Firebase integration: Step-by-Step Guide 2024

Integrating Bubble.io with Firebase can be a quick and effective way to facilitate real-time data handling in your application. Here's a step-by-step guide to achieve this:

Step 1: Create Firebase Project

• Sign in to your Firebase account, or create a new one if you don't have one.
• Click on Create a project.
• Fill in the details required for the project such as Project name, accept the terms and conditions, then click on Create Project. Allow some time for the setup to complete.

Step 2: Setup Realtime Database in Firebase

• Once your Firebase project has been created, go to the develop section in the left menu.
• Select Database, then select the Realtime Database for a serverless NoSQL database.
• Click on Create Database in the real-time database section.
• In the upcoming dialog box, select a location for your Cloud Firestore. Remember this location would be used for all Firestore databases in your Firebase project.

Step 3: Configure Firebase Database Rules

• In the database section, you will find Rules. Ensure to set the necessary rules according to your project needs.
• For instance, you can set the rules to public, by setting both ".read" and ".write" to true. This allows both read and write operations to be public. Make sure to have proper security rules in place for your production-level application.

Step 4: Obtain Configuration from Firebase

• After setting up real-time database, navigate to the project settings. For this, click on the small Gear icon next to Project Overview.
• Click Project Settings and then choose Service Accounts.
• Here, select Generate New Private Key, confirm the prompt.

A JSON file would be downloaded containing information like project_id, private_key_id, private_key, client_email, client_id, auth_uri, token_uri, auth_provider_x509_cert_url, client_x509_cert_url.

Make sure to keep this file safe since it contains sensitive information.

Step 5: Create New App in Bubble.io

• Now, move to Bubble. Sign in to your account or sign up if you haven't.
• From your dashboard, click on New App.
• Give a name to your app, check the necessary boxes and click on Create New App.

Step 6: Install Zeroqode Firebase Plugin

• On the Bubble dashboard, open your newly created app and click on Plugins in the left sidebar.
• On the plugins page, click on Add Plugins.
• From the plugin marketplace, search and install the Firebase plugin by Zeroqode.

Step 7: Configure Zeroqode Firebase Plugin

• After adding the plugin, from the Firebase plugin settings, update the Api Key as private_key from the JSON file.
• Set Firebase Url as https://[PROJECT_ID].firebaseio.com, where PROJECT_ID is also taken from the downloaded JSON file.
• Set Firebase User Email as client_email from the JSON file.

Remember to save the changes.

Step 8: Use Firebase in Bubble.io

Now, the Firebase plugin is configured and ready to be used in your Bubble app. You can use it for actions or data fetching in the workflow.

Remember, when using the plugin, reference your Firebase database URL, /[your_reference_here] .

Remember to use the correct permissions in your requests according to the rules you set in Firebase realtime database.

Now you have successfully integrated Bubble.io with Firebase. Make sure to test all functionalities to ensure the integration is workings as expected.