Adding email login to your FlutterFlow app using firebase

A step by step guide on how to add email login to your Flutterflow app

Please note that the tutorial is created from the perspective of a person who is completely new to development. If you’re a professional developer you may find that some sections are oversimplified, please be empathetic towards your fellow creators who are new to this. We have tried to add a skip button for the next section wherever possible.

This tutorial is divided into four main sections.

1. Set up login app.
2. Set Up Firebase.
3. Configuring app to use firebase.
4. Enabling Authentication.

1.Set up Login App

We are going to cover this whole process using a very simple example app using the following steps.

• Creating a login page with login and signup options.
• Creating a home page, with a logout button.
• Configuring actions for login, signup, and logout.

We are going to cover this whole process using a very simple example app. First, let’s create a login page and home page for our app. You can skip to the third step if you have already created your pages.

1.1 Creating a login page

To create a new login page, go to the page and component tab on the left pane and click on the Create New button at the bottom. (Refer screenshot 1.a)

1.a Creating a new page.

You will be taken to the Create Page section pop up. Here, first, give a name for the page you are creating. ( Hint — Try to give meaningful names like Login or LoginPage to avoid confusion later). You select a template from the list of available templates or Create new Blank page if you wish to create your page from scratch. For this example, we are going to use the *Legacy Login #1* template from the list of Login templates. Hover over the template and click on Use Template to create the page. You will be redirected to the page edit screen. (Refer screenshot 1.b)

1.b Creating a login page from template

1.2 Creating a home page

The primary purpose of creating a HomePage is to navigate the user inside the app upon successful login or signup event. This can be any page like profile, app features, etc … based on your requirement. But for this example, we are going to keep it simple and use the home page.

Every flutter flow app will have a HomePage created by default, so if you have not deleted the same you can use it as your default homepage. For this example, we are creating a very simple layout by adding an AppBar, a welcome text, and a logout option in the AppBar. Please refer to screenshot 1.c below to reference the widget tree and UI.

1.c Sample Home Page

1.3 Configuring actions for login, signup, and logout.

To set up actions for login and signup, let’s go back to the login page that we created earlier. If you used the same template above, you will see a UI with Username and Password fields along with Sign In and Sign Up buttons. If you did not use the template then make sure that your login page has at least these four items required for Sign Up and Sign In ( refer to screenshot 1.d below for a sample).

Now let’s configure the Sign Up action first. Click on the signup button in the layout to highlight it and then click on the Actions tab from the tab menu on the right side of the UI preview window. If you used an existing login template you see that the actions are configured already, you can confirm that they are correct by referring to the screenshot below.

If you created a custom page after selecting your SignUp button in the UI click on Add Action under the actions tab and add an On tap action to the button.

Make sure that your action is configured as given below.

• Choose *Authentication* for main action type.
• Choose Create Account for sub-action type.
• Choose Email for Auth Provider.
• Choose the email text field that you have created for email (username) input from the user for Email Field.
• Choose the password field that you have created for password input from the user for Password Field. You can select choose the confirm password field as well if you have one.

1.d Action configuration for Signup.

That’s it, we are all set to use the Sign Up action now. Now let’s configure the Sign In action well. Similar to the previous step, Click on the SignIn button in the layout to highlight it and then click on the Actions tab from the tab menu on the right side of the UI preview window. If you used an existing login template you see that the actions are configured already, you can confirm that they are correct by referring to the screenshot 1.e below.

If you created a custom page after selecting your SignIn button in the UI click on Add Action under the actions tab and add an On tap action to the button.

Make sure that your action is configured as given below.

• Choose *Authentication* for main action type.
• Choose Login for sub-action type.
• Choose Email for Auth Provider.
• Choose the email text field that you have created for email (username) input from the user for Email Field.
• Choose the password field that you have created for password input from the user for Password Field.

1.e Action configuration for SignIn.

Now finally let’s set up the Logout action on the home page. Navigate to HomePage UI and click on the Logout button in the layout to highlight it and then click on the Actions tab from the tab menu on the right side of the UI preview window. (Refer to screenshot 1.f below)

Make sure that your action is configured as given below.

• Choose *Authentication* for main action type.
• Choose Logout for sub-action type.

1.f Action for logout

That’s it, we will come back to flutter flow to configure firebase later. Now let’s move on to Firebase Setup.

2. Set Up Firebase

In this section, we are going to cover the following

• Creating a new firebase project,
• Adding android, ios & web apps to the project

2.1 Creating a new firebase Project

Let’s get started and create our firebase project. If you’re a developer who is familiar with creating a new firebase project, you can skip to the next step.

Login to your firebase console. And on the click on Add project to create a new project. (Refer to screenshot 2.a below)

2.a Add a project in firebase

Next, give your project a name. ( hint — give it something meaningful and closer to your app name). And click on continue. (Refer to screenshot 2.b below)

2.b Naming firebase project

In the next step, you will be asked if you wish to enable Google Analytics for the project. You can skip this step by turning it off (Refer to screenshot 2.c below)

2.c Disabling google analytics

You can enable it and continue to set up the same if you have an existing project. For the purpose of this tutorial, we are going to skip this step. Click on Create Project to complete creating your project. You will be greeted with the project creation screen with a loader. This may take 10–20 seconds, once the project is created click on Continue to navigate to your dashboard (Refer to screenshot 2.d below).

2.d Project Dashboard(right).

That’s it, you have successfully created the project. Now let’s move on to the next step and create our apps in firebase.

2.2 Adding Apps in Firebase

Before we can continue with this step, we need our app’s package information from FlutterFlow. To obtain this, first, go to your FlutterFlow app. Click on the settings and integration tab from the left pane. And copy the value under Package name, keep this handy as we’re gonna use this for adding apps to our firebase project. (Refer to screenshot 2.e below)

2.e Package information from the FlutterFlow app.

Now let’s create apps in our Firebase project. If you’re a developer familiar with this process you can skip this step, just make sure you create android, ios & web apps and download respective configuration files.

Adding iOS app

Let’s get started, go to the dashboard of your new project. You will be able to see buttons to create apps for iOS, Android, and Web under the get started. ( refer to screenshot 2.f below). Click on the iOS button to create your first app.

2.f Adding iOS app

You will be taken to the iOS register section. In the first step, under register app paste your app’s package name which we had copied earlier from FlutterFlow into the iOS bundle ID field. (Refer to screenshot 2.g below)

2.g Registering iOS app

The rest of the fields are optional, we can ignore them for now. Now click on Register app and wait for it to complete registration. Once it’s completed you will be taken to the Download config file step. Here click on the download button to download the iOS plist configuration file for your app ( do not rename the file and save it in a secure place). After downloading the file you can click on next and ignore steps 3 & 4 by clicking on next again.

If there are no errors ( which it will be), you will see the You’re ready! message and now your iOS app creation is successfully completed. You can click on Continue to console to take you back to the dashboard of the project.

Adding Android app

To add your android app, click on Add app from your dashboard and then click on the Android button from the available platforms. ( Refer to screenshots 2.h and 2.i below).

(left) 2.h Adding a new app (right) 2.i Adding an android app

You will be taken to the android app registration page. In the first step, under register app paste your app’s package name which we had copied earlier from FlutterFlow into the Android package name field. Just like iOS the rest of the fields are optional, we can ignore them for now.

Now click on Register app and wait for it to complete registration. Once it’s completed you will be taken to the Download config file step. Here click on the download button to download the Android google-services.json configuration file for your app. After downloading the file you can skip the next steps as we did for iOS to complete the registration to come back to the dashboard.

Adding Web app

This step is not a mandatory step. However if you intend to test your app using the run mode in flutter flow you should complete this step.

To add a web app, click on Add app from your dashboard and then click on Web button from the available platforms. ( Refer to screenshot 2.j below).

2.j Adding web app

You will be taken to the web app registration page. In the first step, under register app give a name for your web app in the App nickname field. You can leave the checkbox for firebase hosting uncheck and click on Register app. Just like our previous apps, skip the next step and go to the project dashboard once you’re done.

That’s it, you have now successfully created all 3 apps in your firebase project. Now let’s go back to flutter flow, to add the required configurations there.

3. Configuring app to use firebase

To add firebase configuration in FlutterFlow, navigate to Settings from the left pane and select the Firebase tab on the settings page. Under Firebase tab you can see the Upload Configuration Files section. You may have to scroll down if are unable to see it. (Refer to screenshot 3.a below)

3.a Uploading configuration files

Under Upload Configuration Files you can see fields to upload Android and iOS configuration files. Click on Upload File for Android and iOS and upload the google-services.jsonfile and GoogleService-Info.plistfiles for android and iOS respectively. For Web Config, we need to paste the config object from firebase. ( If you do not wish to use run mode in flutter flow you can skip web config and jump to the next step).

To get the web config object, go back to your firebase project dashboard click on apps to see the list of all apps in the project, and click on the settings icon for the web app.

You will be taken to the Web app configuration section. Here, make sure that you have selected config option under SDK setup and configuration and copy the code snippet that you see below it. (refer to screenshot 3.b ). Paste the object in the Firebase Web Config field below the android and iOS files we uploaded earlier and hit enter.

3.b Code snippet for web app config

Once you are done with all the steps your configuration section will look something like this.

We have now completed all the necessary configurations in firebase and FlutterFlow. Now let’s move on to enabling Authentication.

4. Enabling Authentication

All the necessary configuration for sign-in and signup is now completed. In this final step, we need to enable authentication for our app in FlutterFlow and firebase.

4.1 Enabling authentication in Firebase

To enable authentication in Firebase, navigate to the Authentication tab from the left menu and click on Get Started.

In the list of Sign-In methods, click on Email/Password to ensure that it is enabled, and hit save.

Enabling Email/Password authentication

4.2 Enabling authentication in FlutterFlow

Now we need to enable authentication for our FlutterFlow app. For this navigate for Settings and Integrations from the left pane. Go to the Authentication tab and make sure that the Authentication Enabled checkbox is selected. Under the Select Login and Home Screens section, choose the Login page and Home page that you have created for the app as Entry page and Home Page respectively. The Entry Page should always be the login page that contains the actual login/signup actions and the Home page can be any page you wish to navigate the user to upon successful login or signup.

Testing The app

We have successfully completed all the steps and configurations for using email sign-in with Firebase in our app. Now you can test the app using Run Mode in FlutterFlow or on your local machine. To confirm that everything is working as expected, you can try to create a new user on the login page. If everything was configured correctly you will be taken to the home page of the app. You can verify that the new user was added by going to the authentication tab in firebase and see the newly created user in the user's section.