FlutterFlow Docs
Search
⌃K

Email

Email/Password Sign-In allows a user to authenticate using an email address and password.
Email sign-in demo

Prerequisites

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

Adding Email sign-in

Adding Email Sign-In comprises of the following steps:

1. Enabling email authentication in Firebase

To enable Email and Password authentication in the Firebase:
  1. 1.
    Open the Firebase console, and click on Authentication (
     in the left side menu).
  2. 2.
    Click on the Get started button.
  3. 3.
    Select the Sign-in method tab.
  4. 4.
    Click on the Email/Password (Under the Native Providers section).
  5. 5.
    Inside the Sign-in providers section, find the Email/Password switch and enable it.
  6. 6.
    Click on the Save button.
Enabling email authentication in Firebase

2. Creating a sign-in/signup page

FlutterFlow provides a collection of account creation templates. You can either choose from the templates or create from scratch.
You can continue reading here to see how to create authentication pages from scratch or click here to move on to the next section.
Here's an example of how you can create a page with TabBar for sign-in and sign-up:
  1. 1.
    Click on the Select Page or Component from the Navigation Menu (left side of your screen).
  2. 2.
    Click on + Create New, Give it a name.
  3. 3.
    Click on the + Create New button under the Blank Page template.
  4. 4.
    Click on the Widget Tree from the Navigation Menu.
  5. 5.
    Add the TabBar widget from the Layout Elements tab (in the Widget Panel) or add it directly from the widget tree.
  6. 6.
    Select any Tab from the widget tree or from the canvas area and hit the Delete button (or right-click and select cut) to remove one of the tabs.
  7. 7.
    Select the First Tab and change the Tab Label to Sign In.
  8. 8.
    Select the Second Tab and change the Tab Label to Sign Up.
  9. 9.
    Set the TabBar Padding to 20 for all sides.
Adding TabBar for sign-in and sign-up form

2.1 Creating a sign-In form

To create a Sign In form inside the Tab:
  1. 1.
    Select the first TabBar Page from the widget tree or from the canvas area.
  2. 2.
    Inside the TabBar Page, replace the Text widget with the Column widget.
  3. 3.
    Add the TextField widget inside the Column and change its Hint Text to Email. Change the widget's name to Email by clicking the edit icon (
     top right corner).
  4. 4.
    Add another TextField widget below and change its Hint Text to Password.
  5. 5.
    Find and checkmark the Password Field property (under Textfield Properties).
  6. 6.
    Change the name to Password by clicking the edit icon.
  7. 7.
    Finally, add the Button widget from the Base Elements tab and change the Text to Login. Change the name to Button-Login by clicking the edit icon.
Creating a sign-In form

2.2 Adding a sign-In login action

See how to add login action.

2.3 Creating a sign-up form

To create a Signup form inside the Tab:
  1. 1.
    Select the TabBar widget from the widget tree or from the canvas area.
  2. 2.
    Move to Property Editor and find the Active Tab dropdown and change it to Sign up.
  3. 3.
    Inside the TabBar Page, replace the Text widget with the Column widget.
  4. 4.
    Add the TextField widget inside the Column and change its Hint Text to Name. Change the name to Name by clicking the edit icon (
     top right corner).
  5. 5.
    Add one more TextField widget below and change its Hint Text to Age. Change the name to Age by clicking the edit icon.
  6. 6.
    Add the TextField widget below and change its Hint Text to EmailSignup Change the name to EmailSignup by clicking the edit.
  7. 7.
    Add another TextField widget below and change its Hint Text to PasswordSignup. Find and checkmark the Password Field property. Change the name to PasswordSignup by clicking the edit icon.
  8. 8.
    Finally, add the Button widget from the Base Elements tab and change the Text to Signup. Change the name to Button-Signup by clicking the edit icon.
Creating a sign-up form

2.4 Adding a create account action

See how to add create account action.
This action should be added after the create account action.

3. Create an action to logout

To log out, you need to add a logout action. This could be a button on your settings page, an icon button on your AppBar, or another location.
See how to add logout action.

4. Testing authentication

You can test the Email/Password authentication on a device/emulator as well as in Run Mode. To use Run Mode, make sure you have completed the Firebase setup.
To test authentication in Run Mode:
  1. 1.
    Click on the Run button (top right corner of your screen)
  2. 2.
    Open the signup form and enter the credentials for creating a user.
  3. 3.
    Click on the Logout button.
  4. 4.
    Switch to the sign-in form and enter the credentials for the previously created user.
  5. 5.
    Click on the Logout button.
Testing authentication

5. Verify user creation in Firebase

To verify the creation of a new user in Firebase:
  1. 1.
    Open the Firebase console, and click on Authentication.
  2. 2.
    Select the Users tab.
  3. 3.
    Find the email for the newly created user in the identifier column.
  4. 4.
    Now click on the Firestore Database in the left side menu.
  5. 5.
    Select the users collection and find the entry for the new user.
Verify user creation in Firebase

Want to see more email sign-in examples?

Check out our Sample Apps or view our App Showcase.
Previous
Initial Setup
Next
Password Resets
Last modified 12d ago