Firebase Setup

For each project you build in FlutterFlow, you will first need to set up Firebase. You can use either Automated Setup (recommended) or Manual Setup.

You can follow the written instructions below or watch this training video.

Automated Firebase Project Setup (recommended)
Manual Firebase Project Setup
Automated Firebase Project Setup (recommended)

Follow these steps to complete Automated 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

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:

Manual 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: