Comment on page
Firebase Setup
Firebase integration in FlutterFlow provides an effortless way to enhance your apps with powerful features such as user authentication, cloud storage, real-time databases, and more. This setup guide will walk you through integrating Firebase with FlutterFlow, empowering you to easily create feature-rich, scalable applications.
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:
- 1.First, create a new project, and while doing so, keep the Setup Firebase option enabled and click Next Step.
- 2.Click + Create Project. A popup will appear, allowing you to verify the Project Name and select the Firebase Project Region, typically based on where most of your users are located. Once you have confirmed these details, click Create or Sign in with Google to initiate the project creation on Firebase. Note that you can't change the project region after the project is created.
- 3.If asked, you must grant the access requested from 'flutterflow.io' to be able to create and configure the Firebase project on your behalf. Here, you can Select all and click Continue.
Granting access - 4.If you want to use the Firebase Authentication in your app or the Firebase Content Manager, you must enable the authentication in the Firebase console and enable the 'Email/Password' sign-in.
- 5.If you plan to use Firebase storage in your app, click on the Enable Storage on Firebase and enable it on Firebase console.
- 6.The configuration files are necessary when connecting to Firebase. It contains various settings and keys that enable your project to communicate with Firebase services. To generate those files, click on Auto Generate Config Files and then click Generate Files.
- 7.Turn on the Enable Authentication to allow users to log into your app using various sign-in methods, including email and password, social media providers, and even phone number. Note this step only enables authentication. You will need to complete an additional setup to implement authentication logic using these instructions.
- 8.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.
- 9.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.
- 10.Click Start Building.
- 11.Once the project is created, you might want to start with adding authentication. To avoid any permission issue, you must deploy the Firestore rules. Select Firebase (from Navigation menu) > Firestore Settings > Firestore Rules > click Deploy.
Deploy Firestore Rules
- 12.Optional: For certain functionalities, such as Braintree payments and Push Notifications, you will need to enable billing for your project. To do so:
- 1.From the Firebase dashboard of your project, navigate to Build, select Functions, and then select Upgrade project.
- 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)
To add a new Firebase project to an existing FlutterFlow project, select Settings & Integrations > Project Setup > Firebase and then continue with step number 2 from here.
If you already have a Firebase project created and want to connect with a FlutterFlow project, select Settings & Integrations > Project Setup > Firebase, click Firebase Setup Wizard (
), enable Setup Firebase, click Next Step, and then follow the steps below:
- 1.In the Firebase dashboard of your project, navigate to the far left menu. Select Project Settings() --> Users and Permissions.
- 2.Select Add Member from the top right.
- 3.Add [email protected] as an "Editor" for your project and select Done. Then press Add Member.
- 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.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.Select + Add Another Role.
- 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.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.
- 9.Select Save.
Configuring the Firestore Database helps you create collections and add documents directly from FlutterFlow.
To configure Firestore Database:
- 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).
Enable Firestore Database - 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.
- 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!
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.From the Firebase dashboard of your project, navigate to the far left menu. Under Build, select Functions and then select Upgrade project.
- 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)
To connect and autogenerate files:
- 1.From the Firebase dashboard from your project, navigate to the far left menu. Select Project Settings() --> Project Settings.
- 2.Under Your Project, look for Project ID. Right-click and copy the Project ID.
- 3.Return to FlutterFlow. Add your Firebase Project ID and click Connect. A green check will appear once this is complete.
- 4.Under Config Files, select Autogenerate Files and then select Generate Files.
Do not close or refresh the page while the files are being generated.
- 1.Turn on the Enable Authentication to allow users to log into your app using various sign-in methods, including email and password, social media providers, and even phone number. Note this step only enables authentication. You will need to complete an additional setup to implement authentication logic using these instructions.
- 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.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.Click Start Building.
Finalize the setup
Last Updated Date: November 10, 2023
Last modified 26d ago