FlutterFlow Docs
Troubleshooting GuidesDocs Feedback
Search
⌃K
Links

Email

Firebase email authentication is a secure and easy way to allow users to sign up and log in to your app using their email and password.

Prerequisites

Before getting started with this section, ensure you have,
  1. 1.
    Completed all steps in the Firebase Setup.
  2. 2.
    Completed Initial setup required for authentication. (Please note: Skip if you have already enabled authentication and created 'users' collection while creating your project with Firebase Setup.)

Adding email authentication

Let's see how to add a Firebase email authentication by building an example that looks like this:
Email auth demo
The steps to add Firebase email authentication are as follows:

1. Enabling email auth in Firebase

To enable email authentication in the Firebase:
  1. 1.
    Open the Firebase console and click on Authentication.
  2. 2.
    Click on the Get started button (this may not be visible if you have already set up other forms of Authentication).
  3. 3.
    Select the Sign-in method tab.
  4. 4.
    Click on Email/Password (Under the 'Native providers' section). If you have already added any other provider, click on Add new provider and then click on Email/Password.
  5. 5.
    Find the Email/Password switch and enable it.
  6. 6.
    Click on the Save button.

2. Building pages

Let's add a page that allows users to create accounts and log in. To speed up, you can add a page from the template. Here is the page added from the templates, and after some modification, it looks the below:
Also, see how to build a page layout in case you want to build a page from scratch.
'Auth-2' template

3. Adding create account action

You can create users account using the 'Create Account' action. Here's how you do it:
  1. 1.
    Select the widget (e.g., Button) on which you want to add the action.
  2. 2.
    Select Actions from the properties panel (the right menu) and select Add Action.
  3. 3.
    Search and select the Create Account (under Backend/Database > Firebase Authentication) action.
  4. 4.
    Set Auth Provider to Email.
  5. 5.
    Set the Email Field dropdown to the widget name that accepts email (e.g., TextFieldEmail).
  6. 6.
    Set the Password Field dropdown to the widget name that accepts a password (e.g., TextFieldPassword).
  7. 7.
    Similarly, If you have a confirm password field in your UI, set the Confirm Password Field to the appropriate one; otherwise, leave it empty.
  8. 8.
    The Create User Document is enabled by default. That means a user document (if it does not already exist with details like email and uid) will be created after the user is authenticated. Typically this will be added to the 'users' collection.
    1. 1.
      To create a user document in a different collection, set the Created Document > Collection dropdown to the one you need.
    2. 2.
      If you need more details at signup, such as name, age, and birthday, click on the + Add Field and set its value. Ensure that you have already created these fields in a 'users' collection.
Optionally you can also send an e-mail verification link right after adding this action.

4. Adding login action

To allow users to log in with their credentials, you can use the 'Login' action. Here's how you do it:
  1. 1.
    Select the widget (e.g., Button) on which you want to add the action.
  2. 2.
    Select Actions from the properties panel (the right menu), If it's the first action, click + Add Action button. Otherwise, click the "+" button below the previous action tile (inside Action Flow Editor) and select Add Action.
  3. 3.
    Search and select the Login (under Backend/Database > Firebase Authentication) action.
  4. 4.
    Set Auth Provider to Email.
  5. 5.
    Set the Email Field dropdown to the widget name that accepts email (e.g., TextFieldEmail).
  6. 6.
    Set the Password Field dropdown to the widget name that accepts a password (e.g., TextFieldPassword).

5. Adding logout action

To let users log out of your app, you can use this action.

6. Verify user creation

To verify that you have successfully added the email authentication and that users are being created, you can head over to your Firebase project > Authentication > Users and verify the user entries.
Verify user creation in the Firebase console

Want to see more email sign-in examples?

Check out our Sample Apps or view our App Showcase.
Last Updated Date: August 10, 2023
Previous
Initial Setup
Next
Password Resets
Last modified 1mo ago