Skip to content

Update Firebase integration setup + Add FAQ #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 3, 2025
Merged

Update Firebase integration setup + Add FAQ #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5f51293
Update Firebase integration setup + Add FAQ
pinkeshmars Sep 30, 2025
d8e9f88
Add FAQs section for common Firestore errors
pinkeshmars Oct 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
212 changes: 212 additions & 0 deletions docs/integrations/firebase.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,42 @@ Once complete, Dreamflow will confirm the connection with a **Connected** status
</div>
<p></p>

### First-Time Firebase Project Setup
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
### First-Time Firebase Project Setup
### Initial Firebase Project Setup


If this is your first time connecting to Firebase, you must create a new project in the Firebase Console and accept the Terms of Service before continuing.

Open the Firebase Console and ensure you are signed in with the correct account. Click **Get started** tile, enter a project name, accept the terms, and complete the setup. During this process, you can disable Gemini AI and Analytics features if they are not required.

When the console displays the message *“Your Firebase project is ready”*, close the tab and return to Dreamflow. Click **Proceed** to continue. It may take a few minutes for the new project to appear in Dreamflow.

Here’s how to do it step by step:


<div style={{
position: 'relative',
paddingBottom: 'calc(52.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/5cXsTxpPsUIFxMP1JrDS?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameborder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>

## 2. Project Setup

Expand Down Expand Up @@ -176,3 +212,179 @@ This step is critical for security, as without rules, your Firestore may be open

![deploy-to-firebase.avif](imgs/deploy-to-firebase.avif)

## 5. Configure Authentication

If the generated client code includes authentication-related functionality, you must configure sign-in providers in the Firebase Console to make it work.

To enable authentication, click **Configure Authentication**. This opens the Authentication page in the Firebase Console, where you can select a sign-in provider such as Email/Password, Google, or Facebook. Enable the chosen provider, configure its settings (for example, OAuth credentials for Google or Facebook), and click **Save**. Repeat this process to enable any additional providers required by your app.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I submitted another devrel ticket in linear about oauth flows, previously the URL for the preview would change but now it should be stable to - please test and confirm and add some info about getting Google / Facebook auth to work with firebase in your app... I think we need to talk about whitelisting the preview URLs for testing purposes

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure! I will look into it. And it looks like the review comments weren’t submitted earlier. No worries — I’ll take care of them in a new PR.


Here’s an example of enabling email/password authentication:

<div style={{
position: 'relative',
paddingBottom: 'calc(52.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/rUFzONPrr5SSnRDTvy07?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameborder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>

## Add Sample Data to Firebase
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mention that you can only do this once?


Dreamflow lets you add sample data to your Firebase project for easier development and testing. The generated data follows your app’s schema, so you can quickly check how your app works with populated users, collections, and documents.

To add sample data from Dreamflow, go to the **Firebase** module **> Add Sample Data to Firebase**. Enter the email address of your test account in the **User Email** field. This account will be associated with the generated sample data. Click **Generate Sample Data**.

Once the process is complete, you will see the generated sample data entries inside your **Cloud Firestore** under the respective collections defined in your schema.

:::info

This process only inserts sample data into the **Firestore Database** for the specified user email. It does **not** create a user in Firebase Authentication. Make sure the user with the specified email exists in Firebase Authentication to be able to access the data.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can be more specific about how to add a user to firebase authentication?


:::

![add-sample-data.avif](imgs/add-sample-data.avif)

## Enable Billing
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you put the error message that users would see somewhere? Users might go to the agent or google search with that exact error message so want to tie it to this section somehow


Certain Firebase services, such as [Cloud Functions](https://firebase.google.com/docs/functions), require billing to be enabled before they can be used. If your project uses other Firebase services beyond their free tier limits, for example, Cloud Firestore, Cloud Storage (over 5 GB), or Phone Authentication (billed per SMS), you must enable billing on your Firebase project.

To enable billing on your Firebase project, open the Firebase Console. On the project dashboard, click on the current plan and select the **Blaze** plan. You can either create a new billing account or link an existing one. During setup, you can also set a budget amount. Once your usage exceeds this amount, you will receive an email notification. After enabling, the Blaze plan will appear on your project dashboard.


<div style={{
position: 'relative',
paddingBottom: 'calc(52.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/7Z5BmfA19TkPrXV2pPuX?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameborder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>


## FAQs
<details>
<summary> Why do cloud function deployments fail? </summary>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same comment as before about adding examples of specific errors


<p>
Cloud function deployments usually fail when your Google Cloud Platform (GCP) or Firebase project hasn’t been fully set up with the necessary APIs and permissions.

By default, when you create a new Firebase project, some APIs required by Cloud Functions are not enabled automatically. In addition, the default compute service account may not have the correct roles to deploy functions. Without these APIs and permissions, Dreamflow cannot deploy functions successfully, and you’ll see deployment errors.

Follow the steps below to fix the issue:

1. To be able to deploy and run cloud functions, make sure to [**enable billing**](#enable-billing) for your Firebase/GCP project.
2. If you haven’t already, [**enable the authentication**](#5-configure-authentication) in the Firebase console.
3. Next, open your browser and navigate to the following URL: `https://console.cloud.google.com/functions/list?referrer=search&hl=en&project=<projectID>` Replace `<projectID>` with your GCP or Firebase project ID.
4. Click on the **Create Function** button. GCP will prompt you to enable the necessary APIs: **Cloud Build** and **Cloud Functions**.
5. After clicking **Next**, you will be prompted to enable the **Cloud Run Admin API**.

![cloud-run-admin-api](https://docs.flutterflow.io/assets/images/cloud-run-admin-api-6289d1d79337a0f909d0e29e555335f6.png)

6. Now, you need to grant the default compute service account the appropriate permissions. In the next page, you will see the option to deploy an example cloud function like `helloHttp`. Deploy this function. You will be prompted to grant permissions to the default compute service account. The message will look like: `You need to grant the following roles to the build service account to deploy a function: roles/cloudbuild.builds.builder to <projectID>-compute@developer.gserviceaccount.com.`
7. Click **Grant** to provide the required permissions and deploy the example cloud function. Once deployed, you can delete this function if you wish.
8. After completing these steps, go to **Dreamflow > Firebase > Deploy to Firebase**. Under Deployment Target, select **Functions** and click **Deploy Changes**.

![deploy-cloud-functions.avif](imgs/deploy-cloud-functions.avif)


With the required permissions granted and correct configurations, you should now be able to deploy cloud functions from Dreamflow without any issues.
</p>

</details>

<details>
<summary>
Why do I see the error `[cloud_firestore/failed-precondition] The query requires an index`?
</summary>

<p>
This error occurs when Firestore needs a composite index to run your query, but the index has not been created yet.

When this error appears, it includes a link to the Firebase Console. Open that link, and it will redirect directly to the required index creation page in your Firestore project. Simply click **Save** to create the index.

After the index is built (this may take a few minutes), retry running your app. The query should now work without errors.

<div style={{
position: 'relative',
paddingBottom: 'calc(52.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/xJppTqks1wSl1xE5yw5p?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameborder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>

</p>
</details>

<details>
<summary>
Why do I see the error `[cloud_firestore/permission-denied] Missing or insufficient permissions on screen`?
</summary>

<p>


![missing-permission.avif](imgs/missing-permission.avif)

This error occurs when your app tries to read or write data in the Firestore Database without the correct security rules in place.

To fix this:

- **Redeploy rules:** Go to the Firebase panel in Dreamflow and [**redeploy**](#4-deploy-to-firebase) your Firestore security rules.
- **Update rules if needed:** If your current rules are incorrect (e.g., don’t match your app’s data model or intended access control), you need to update them. You can edit the rules manually in the `firestore.rules` file or update them using the Dreamflow Agent, and then [**redeploy**](#4-deploy-to-firebase) to apply the changes.

Once the correct rules are applied, the error should no longer appear when adding or retrieving data.
</p>
</details>
Binary file added docs/integrations/imgs/add-sample-data.avif
View file
Open in desktop
Binary file not shown.
Binary file added docs/integrations/imgs/deploy-cloud-functions.avif
View file
Open in desktop
Binary file not shown.
Binary file added docs/integrations/imgs/missing-permission.avif
View file
Open in desktop
Binary file not shown.