FlutterFlow Docs
Troubleshooting GuidesDocs Feedback
Search
⌃K
Links

Firebase Setup

You can connect to your Firebase project by entering the Firebase project ID. Once the connection is successful, you can generate the configuration files necessary for your project to communicate with your Firebase project. If you make changes to your Firebase project, such as adding the SHA-1 key required for Google or Phone sign-in, you can regenerate the configuration files from here. This process ensures that your FlutterFlow project continues to work seamlessly with your Firebase project.
You can set up the Firebase for your app in two ways:

Create a new project with a Firebase setup

If you plan to use Firebase from the beginning, you can create a new project and then follow the step-by-step instructions provided below:
Follow these steps to create a blank project with Firebase Setup:

1. Create a FlutterFlow project

First, see how to create a new project and then follow the next steps to get the Firebase Project ID.

2. Create and configure the Firebase project

Creating and configuring the Firebase project comprises the following steps:

2.1 Create a Firebase project

  1. 1.
    Go to the Firebase console and sign in with your Google account.
  2. 2.
    Click Add project.
  3. 3.
    Enter a Project Name (e.g. WeddingApp as the screenshot below), and click Continue.
    Give a Project Name to your Firebase project
    ​
  4. 4.
    (Optional) You can enable Google Analytics for the project. If you want to enable Google Analytics, then you will be prompted to select a Google Analytics account on the next screen.
    Optional step to enable Google Analytics
    ​
    If enabled, choose a Google Analytics account next to complete the setup process
  5. 5.
    Click Create project. Once the project is created, select Continue. Your Firebase project is successfully created!
2.2 Enable access to your project
  1. 1.
    In the Firebase dashboard of your project, navigate to the far left menu. Select Project Settings(
     ) --> Users and Permissions.
  2. 2.
    Select Add Member from the top right.
  3. 3.
    Add [email protected] as an "Editor" for your project and select Done. Then press Add Member.
  4. 4.
    On the same page (i.e. Users and Permissions), select Advanced Permission Settings (small blue text below the table). This will open the Google Cloud console in a new browser window.
    Steps 2, 3 and 4
  5. 5.
    Find the row containing [email protected] and select Edit principal (
    pencil on the far right of the row).
    In the Google Cloud console page
  6. 6.
    Select + Add Another Role.
  7. 7.
    Under Select A Role, search for Service Account User (you may need to scroll to find this). Select Service Account User.
    On choosing "Select A Role" and searching for "Service Account User"
  8. 8.
    Select + Add Another Role again. Under Select A Role, search for Cloud Functions Admin. Select Cloud Functions Admin.
Note: The option to add Cloud Functions Admin may only show up if you are on a Firebase Blaze plan. In addition, you may need to enable cloud functions first.
Cloud Functions Admin permissions are required for several FlutterFlow features (e.g. Push Notifications). Adding this Cloud Functions Admin is optional, but not doing so will prevent you from using any functions that require Cloud Functions.
  1. 9.
    Select Save.
Complete process of enabling access to your Firebase project

2.3 Configure your Firestore Database

Configuring the Firestore Database helps you create collections and add documents directly from FlutterFlow.
To configure Firestore Database:
  1. 1.
    From the Firebase dashboard of your project, navigate to the far left menu. Under Build, select Firestore Database and then select Create Database (marked in yellow in the screenshot).
  2. 2.
    Next, you will need to set your Firebase security rules. To get started quickly, you can select Start in test mode and select Next.
    Choose the mode you prefer and press Next
We recommend updating your Firebase security rules before deploying your app. Please see this link for additional information on Firestore security rules.
  1. 3.
    Next, you will need to choose the location where your Firestore data will be stored. From the dropdown, select a location and then select Enable. Please see this link for additional information on Firebase locations.
    Choose the Cloud Firestore location where your data will be stored.
    On completion, you land at the panel view of Cloud Firestore and can start creating collections and documents right away!
2.4 Enable billing (optional)
If you want to deploy functions (e.g. Braintree payments, Push Notifications), you will need to enable billing for your project. Please follow these steps to enable billing:
  1. 1.
    From the Firebase dashboard of your project, navigate to the far left menu. Under Build, select Functions and then select Upgrade project.
  2. 2.
    Select purchase. If this is your first time enabling billing, you will be taken to a new page to provide your payment information. Otherwise, you can set a project budget. Please see this link for additional information on Firebase pricing.
Enable billing (optional)

3. Copy project ID to FlutterFlow

  1. 1.
    From the Firebase dashboard from your project, navigate to the far left menu. Select Project Settings(
     ) --> Project Settings. If the previous step opens a new window, you may need to switch tabs to see this view.
  2. 2.
    Under Your project, look for Project ID. Copy the Project ID.
  3. 3.
    Return to FlutterFlow, paste the Project ID, and then click Connect.
Copy project ID to FlutterFlow
If you have already created a project in FlutterFlow, Go to Settings & Integrations > Project Setup > Firebase, add your Firebase Project ID, and then select Connect.

4. Generate the config files

Click on Auto Generate Config Files and then click Generate Files.
Generate the config files
If you have already created a project in FlutterFlow, Go to Settings & Integrations > Project Setup > Firebase, make sure you have pasted the project ID, and then click on Auto Generate Config Files.

5. Finalize the setup

  1. 1.
    Turn on the Enable Authentication to allow users to log into your app using Firebase Authentication. Please note this step only enables Authentication. You will need to complete an additional setup to implement authentication logic using these instructions.
  2. 2.
    Turn on Create User Collection to Automatically add a users collection to Firestore Database. This collection will be used to store logged-in user's details such as email and password.
  3. 3.
    Select Initial Pages allows you to define the first page a user sees when they open the app (Entry Page) and the first page they see after logging in (Logged In Page). When you click Unset you will be able to choose from a list of templates. You can change these pages at any time inside the App Details page.
  4. 4.
    Click Start Building.
Finalize the setup

Add Firebase to an existing project

To add Firebase to an existing project, the setup instructions are as follows:
Now, the final step is connecting and autogenerating the config files.
To connect and autogenerate files:
  1. 1.
    From the Firebase dashboard from your project, navigate to the far left menu. Select Project Settings(
     ) --> Project Settings.
  2. 2.
    Under Your Project, look for Project ID. Right-click and copy the Project ID.
  3. 3.
    Return to FlutterFlow. From the Navigation Bar, select Settings & Integrations > Project Setup > Firebase.
  4. 4.
    Add your Firebase Project ID and click Connect. A green check will appear once this is complete.
  5. 5.
    Under Config Files, select Autogenerate Files and then select Generate Files.
Do not close or refresh the page while the files are being generated.
Add Firebase to an existing project
Congrats! you have completed Firebase Setup!
Data and Backend - Previous
Firebase
Next
Firebase Authentication
Last modified 1h ago