Firebase Setup

You can connect to your Firebase project by entering the Firebase project ID. After a successful connection, you can generate the config files. You can also regenerate the config files from here after making changes to your Firebase project such as adding the SHA-1 key (that is required for Google/Phone sign-in).
You can set up the Firebase for your app in two ways:
​Create a new project with a Firebase setup​
​Add Firebase to an existing project​
Create a new project with a Firebase setup
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 a FlutterFlow project​
2.​Create and configure the Firebase project​
1.​Create a Firebase project​
2.​Enable access to your project​
3.​Configure your Firestore Database​
4.​Enable billing (optional)​
3.​Copy project ID To FlutterFlow​
4.​Generate the config files​
5.​Finalize the setup​
1. Create a 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.
Keep the Setup Firebase toggle enabled and click on the Next Step.
Now, you need to enter the Firebase Project ID. You can get the Firebase project ID by creating and configuring the Firebase project. First, follow Step 2 to get the project ID, and then continue with Step 3 to enter the project ID.
Creating new project with Firebase setup
2. Create and configure the Firebase project
Creating and configuring the Firebase project comprises the following steps:
1.Create a Firebase project
2.Enable access to your project
3.Configure your Firestore Database
4.Enable billing (optional)
2.1 Create a 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 completed, select Continue. 
Creating Firebase project
2.2 Enable access to your project
In the Firebase dashboard of 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.
Under Select A Role, search for Service Account User (you may need to scroll to find this). Select Service Account User.
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.
Select Save.
Enabling access to 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:
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 get started quickly 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.
Configuring Firestore Database
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:
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.
Enable billing
3. 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 Project ID and then click Connect.
Copy Project ID to FlutterFlow
If you have already created a project in FlutterFlow, Go to the 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 config files
If you have already created a project in FlutterFlow, Go to the 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
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. This collection will be used to store logged-in user's details such as email and password.
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.
Click Start Building.
Finalize setup
Add Firebase to an existing project
To add Firebase to an existing project, the setup instructions are as follows:
First, follow steps 2.1, 2.2, 2.3, and 2.4 from the create a new project with a Firebase setup section.
Now, the final step is connecting and autogenerating the config files.
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 > Project Setup > Firebase.
Add your Firebase Project ID and click 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.
Connect to Firebase
Congrats! you have completed Firebase Setup!
Last modified 1mo ago