FlutterFlow Docs
Search…
Firebase Setup

What is Firebase

Firebase helps you develop, measure, improve and grow your mobile app. It’s backed by Google and covers a wide range of services, including real-time database, authentication, crash monitoring, analytics, push notifications, and more. Firebase provides all backend, platform-related tools as a service so you can focus more on building the app’s core features.
Learn more about Firebase here.

Setting up Firebase

You can complete the Firebase setup when you create a new project or add Firebase to an existing project.

Create A Project With Firebase

If you plan to use Firebase in your project, you can create a blank project with a Firebase setup.
Follow these steps to create a blank project with Firebase Setup:

1. Create Your FlutterFlow Project

  • From the FlutterFlow Dashboard page select + Create Project.
  • Enter a Project Name, e.g. MyFirstProject.
  • Select + Create New from the Blank App (or use a sample app). This will open the project setup popup.
  • A Project Name and Package Name will be created for you based on the name of your project. You can modify these if you wish. Please note: The Package Name for Android (the Bundle ID for iOS) uniquely identifies your app on the device and in Store. So make sure it is unique.
  • Click Next Step to Add Firebase to Project.

2. Create Your Firebase Project

  • Go to the Firebase console and sign in with your Google account.
  • Click Add project.
  • Enter a Project Name (e.g. testproject), and click Continue.
  • (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.
  • Click Create project. Once the project is complete, select Continue.

3. Enable Access To Your Project

  • From the Firebase dashboard from your project, navigate to the far left menu. Select Project Settings(
    ) --> Users and Permissions.
  • Select Add Member.
  • Add [email protected] as an "Editor" for your project and select Done. Then select Add Member.
  • On the same page (i.e. Users and Permissions page), select Advanced Permission Settings (small blue text below the table). This will open the Google console (Google Cloud Platform) in a new browser window.
  • Find the row containing [email protected] and select Edit Member (
    pencil on the far right of the row).
  • Select + Add Another Role and
  • Under Select A Role, search for Cloud Functions Admin. Select Cloud Functions Admin.
  • Under Select A Role, search for Service Account User (you may need to scroll to find this). Select Service Account User.
  • Select Save.

4. Configure Your Firestore Database

Configuring the Firestore Database helps you create collections and add documents directly from FlutterFlow.
To configure Firestore Database:
  • From the Firebase dashboard of your project, navigate to the far left menu. Select Firestore Database and then select Create Database (in the middle of the screen).
  • Next, you will need to set your Firebase security rules. To start you can select Start in test mode and select Next.
We recommend updating your Firebase security rules before deploying your app. Please see this link for additional information on Firestore security rules.
  • 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.

5. (Optional) Enable Billing

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:
  • From the Firebase dashboard of your project, navigate to the far left menu. Select Functions and then select Upgrade project.
  • 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.

6. Copy Project ID To FlutterFlow

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

7. Generate The Config Files

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

8. Finalize Setup

  • 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 using these instructions.
  • Turn on Create User Collection to Automatically add a users collection to Firestore Database.
  • 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 in General Project settings.
  • Click Start Building.

Add Firebase To An Existing Project

To add Firebase to an existing project, follow the Automated Firebase Project setup instructions. Please note: Manual Firebase setup has been deprecated and is only available for historical projects.
Automated Firebase Project Setup (recommended)
(Legacy Projects) Manual Firebase Project Setup
Follow these steps to complete Automated Firebase Project Setup:

1. Create Your Firebase Project

To create Firebase project:
  • Go to the Firebase console and sign in with your Google account.
  • Click Add project.
  • Enter a Project name (e.g. testproject), and click Continue.
  • (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.
  • Click Create project. Once the project is complete, select Continue.
You will be navigated to the Firebase dashboard (visual below) for your project. Next, you will need to give FlutterFlow access to your project.

2. Enable Access To Your Project

You need to give FlutterFlow 3 user roles: Editor, Cloud Functions Admin, and Service Account User.
  • From the Firebase dashboard from your project, navigate to the far left menu. Select Project Settings(
    ) --> Users and Permissions.
  • Select Add Member.
  • Add [email protected] as an "Editor" for your project and select Done. Then select Add Member.
  • On the same page (i.e. Users and Permissions page), select Advanced Permission Settings (small blue text below the table). This will open the Google console (Google Cloud Platform) in a new browser window.
  • Find the row containing [email protected] and select Edit Member (pencil on the far right of the row).
  • Select + Add Another Role and
  • Under Select A Role, search for Cloud Functions Admin. Select Cloud Functions Admin.
  • Under Select A Role, search for Service Account User (you may need to scroll to find this). Select Service Account User.
  • Select Save.
You will be navigated back to the Users and Permissions page for your project. Next, you will need to configure your Firestore database.
​

3. Configure Your Firestore Database

Configuring the Firestore Database helps you create collections and add documents directly from FlutterFlow.
To configure Firestore Database:
  • From the Firebase dashboard of your project, navigate to the far left menu. Select Firestore Database and then select Create Database (in the middle of the screen).
  • Next, you will need to set your Firebase security rules. To start you can select Start in test mode and select Next.
We recommend updating your Firebase security rules before deploying your app. Please see this link for additional information on Firestore security rules.
  • 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.
​
You will be navigated back to the Firestore Database page for your project. Next, you can enable billing (optional). You will need this for features such as push notifications, so we recommend setting this up now.

4. Enable Billing For Your Firestore Project

If you want to deploy functions (e.g. Braintree payments), you will need to enable billing for your project. Please follow these steps to enable billing:
  • From the Firebase dashboard of your project, navigate to the far left menu. Select Functions and then select Upgrade project.
  • 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.
Firebase setup is now complete. The last step is to finalize the setup in FlutterFlow.

5. Finalize Setup In FlutterFlow

The final step in setting up the Firebase is, connecting and autogenerating files for the project in Firebase.
To connect and autogenerate files:
  • From the Firebase dashboard from your project, navigate to the far left menu. Select Project Settings(
    ) --> Project Settings.
  • Under Your Project, look for Project ID. Right-click and copy the Project ID.
  • Return to FlutterFlow. From the Navigation Bar, select Settings & Integrations --> Firebase
  • Add your Firebase Project ID and select Connect. A green check will appear once this is complete.
  • Under Config Files, select Autogenerate Files and then select Generate Files.
Do not close or refresh the page while the files are being generated.
Congrats, you have completed Firebase Setup!
Manual Firebase setup has been deprecated and is no longer supported for new projects. For new projects, please use Automated Firebase Project setup.
​
Follow these steps to complete Manual Firebase Project Setup:

Create Your Firebase Project

  • Go to the Firebase console and sign in with your Google account.
  • Click Add project.
  • Enter a Project name (e.g. testproject), and click Continue.
  • (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.
  • Click Create project. Once the project is complete, select Continue.
You will be navigated to the Firebase dashboard (pictured below) for your project. Next, you will need to give FlutterFlow access to your project.

Enable Access To Your Project

  • From the Firebase dashboard from your project, navigate to the far left menu. Select Project Settings --> Users and Permissions.
  • Select Add Member.
  • Add [email protected] as an "Editor" for your project and select Done. Then select Add Member.
You will be navigated back to the Users and Permissions page for your project. Next, you will need to set up cloud permission
  • From the Users and Permissions page, select Advanced Permission Settings (small blue text below the table).
  • Find the row containing [email protected] and select Edit Member (pencil on the far right of the row).
  • Select + Add Another Role and
  • Under Select A Role, search for Cloud Functions Admin. Select Cloud Functions Admin.
  • Under Select A Role, search for Service Account User (you may need to scroll to find this). Select Service Account User.
  • Select Save.
You will be navigated back to the Users and Permissions page for your project. Next, you will need to configure your Firestore database.
Enable Access To Your Project

Setup iOS/Android/Web Platform Configurations

Android Configuration

Complete the Android configuration by following the steps below:
  • Select the Android icon from the Firebase dashboard
  • Enter the Android Package Name. You can find it in the Settings and Integrations section of FlutterFlow.
  • Select Register app.
  • Download the google-services.json file and select Next.
  • Select Next, under Add Firebase SDK step.
  • Select Continue to Console under Next Steps.
  • Return to FlutterFlow and go to Settings and Integrations > Firebase > Upload Configuration Files > Android Configuration.

iOS Configuration

Complete the iOS configuration by following the steps below:
  • Return to your Firebase project dashboard and select + Add App and then select the iOS icon.
  • Enter the iOS bundle ID. You can find it under Package Name in Settings and Integrations section of FlutterFlow (it's the same Package name you used to set up Android).
  • Select Next, under Add Firebase SDK step.
  • Select Next under Add Initialization Code.
  • Select Continue to Console under Next Steps.
  • Select Register app.
  • Download the GoogleService-Info.plist file.
  • Upload it to FlutterFlow by going to Settings and Integrations > Firebase> Upload Configuration Files > iOS Configuration.

Web Configuration

Make sure to complete this step to enable Run Mode.
Complete the Web configuration by following the steps below:
  • Return to your Firebase project dashboard and select + Add App and then select the Web Icon ( </>).
  • Add a project nickname (this can be anything), and click Register app.
  • Select Next, under Add Firebase SDK step.
  • From the Firebase dashboard, go to Project settings. Scroll down to the Your apps section, select your web app.
  • Select the Config button under SDK setup and configuration.
  • Select the copy button (bottom right of the gray square).
  • Return to FlutterFlow and open Settings and Integrations. Paste the configuration into the Firebase Web Config box.
Next, you will need to configure your Firestore database.

Configure Your Firestore Database

  • From the Firebase dashboard of your project, navigate to the far left menu. Select Firestore Database and then select Create Database (in the middle of the screen).
  • Next, you will need to set your Firebase security rules. To start you can select Start in test mode and select Next.
We recommend updating your Firebase security rules before deploying your app. Please see this link for additional information on Firestore security rules.
  • 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.
You will be navigated back to the Firestore Database page for your project. Next, you can enable billing (optional).

Enable Billing For Your Firestore Project

If you want to deploy functions (e.g. Braintree payments), you will need to enable billing for your project. Please follow these steps to enable billing:
  • From the Firebase dashboard of your project, navigate to the far left menu. Select Functions and then select Upgrade project.
  • 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.
Firebase setup is now complete. The last step is to finalize setup in FlutterFlow.

Finalize Setup In FlutterFlow

  • Find your Firebase Project ID. From the Firebase dashboard from your project, navigate to the far left menu. Select Project Settings --> Project Settings.
  • Under Your Project, look for Project ID. Right-click and copy the Project ID.
  • Return to FlutterFlow. From the Navigation Bar, select Settings & Integrations --> Firebase
  • Add your Firebase Project ID and select Connect. A green check will appear once this is complete.
  • Under Config Files, select Autogenerate Files and then select Generate Files.
Do not close or refresh the page while the files are being generated.
  • This will appear to let you know that setup is complete:
​
​
Last modified 2d ago