FlutterFlow Docs
Search…
Actions
Email Sign-In
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 user collection while creating your project with Firebase Setup.)

Adding Email sign-in

Adding Email Sign-In comprises of following steps:

1. Enabling email authentication in Firebase

To enable Email and Password authentication in the Firebase:
  • Open the Firebase console, and click on Authentication (
    in the left side menu).
  • Click on the Get started button.
  • Select the Sign-in method tab.
  • Click on the Email/Password (Under the Native Providers section).
  • Inside the Sign-in providers section, find the Email/Password switch and enable it.
  • 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:
  • Click on the Select Page or Component from the Navigation Menu (left side of your screen).
  • Click on + Create New, Give it a name.
  • Click on the + Create New button under the Blank Page template.
  • Click on the Widget Tree from the Navigation Menu.
  • Add the TabBar widget from the Layout Elements tab (in the Widget Panel) or add it directly from the widget tree.
  • 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.
  • Select the First Tab and change the Tab Label to Sign In.
  • Select the Second Tab and change the Tab Label to Sign Up.
  • Set the TabBar Padding to 20 for all the 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:
  • Select the first TabBar Page from the widget tree or from the canvas area.
  • Inside the TabBar Page, replace the Text widget with the Column widget.
  • 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).
  • Add another TextField widget below and change its Hint Text to Password.
  • Find and checkmark the Password Field property (under Textfield Properties).
  • Change the name to Password by clicking the edit icon.
  • 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

To login a user on click of Login button:
  • Select Button-Login from the widget tree or from the canvas area.
  • Click on the Actions tab (on the right side of your screen).
  • Click on + Add Action and select the On Tap option.
  • Find the Action Type dropdown and change it to Authentication.
  • Find another Action Type dropdown below, and change it to the Login.
  • Click on the Auth Provider dropdown and set it to Email.
  • Click on the Unset under the Email Field dropdown and set it to Email.
  • Finally, Click on the Unset under the Password Field dropdown and set it to Password
Adding a sign-In login action

2.3 Creating a sign-up form

To create a Signup form inside the Tab:
  • Select the TabBar widget from the widget tree or from the canvas area.
  • Move to Property Editor and find the Active Tab dropdown and change it to Sign up.
  • Inside the TabBar Page, replace the Text widget with the Column widget.
  • 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).
  • Add one more TextField widget below and change its Hint Text to Age. Change the name to Age by clicking the edit icon.
  • Add the TextField widget below and change its Hint Text to EmailSignup Change the name to EmailSignup by clicking the edit.
  • 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.
  • 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

Use these steps to automatically create a new account when a user selects the Create Account button:
  • Select the Button-Signup button from the widget tree or from the canvas area.
  • Click on the Actions tab (on the right side of your screen).
  • Click on + Add Action and select the On Tap option.
  • Find the Action Type dropdown and change it to Authentication.
  • Find another Action Type dropdown below, and change it to the Create Account.
  • Click on the Auth Provider dropdown and set it to Email.
  • Click on the Unset under the Email Field dropdown and set it to EmailSignup.
  • Click on the Unset under the Password Field dropdown and set it to Password Signup.
  • Now, checkmark the Create User Document checkbox.
  • Under the Created Record section, find the collection dropdown menu and set it to users collection.
Adding a create account action
Follow the steps to send a verification link on the email given by the users while signing up:
  • Click on + Add Action and select the On Tap option.
  • Find the Action Type dropdown and change it to Authentication.
  • Find another Action Type dropdown below, and change it to the Send E-mail Verification Link.
This action should be added after the create account action.
Adding a send e-mail verification link action

3. Collect additional data during account creation

If you only plan to collect a user's email at sign-up, you don't need to set fields and can skip this section.
In case you need more details at signup such as name, age, birthday, etc, you need to set the fields in the "Create Account" action. Setting the fields allows you to add additional data to your users collection.
In the next steps we'll set fields for name and age so that when a user enters name and age while creating an account, it will be stored in users collection in addition to email. You need to first create any custom fields you want to set in the users collection, in this case, we've created name (String) and age (integer).
To create a user account with extra information (apart from email and password) such as name and age:
  • If you haven't already done so, add the additional fields to your users collection.
  • Click on the + Field button until you see the display_name field.
  • Click on the display_name.
  • Scroll down to find the Value Source dropdown and change it to From Variable.
  • Find the Source dropdown and change it to Widget State.
  • Find the Available Options dropdown and set it to Name.
  • Similarly, add the field for the Age by clicking on the + Field button until you see the age field.
Collect additional data during account creation

4. 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.
To add a Logout action:
  • Click on the Select Page or Component from the Navigation Menu (left side of your screen).
  • Select your home page from the Pages panel.
  • Click on the UI Builder from the Navigation Menu.
  • Add the Button widget from the Base Elements tab or add it directly from the widget tree.
  • Move to the Property Editor (on the right side of your screen) and scroll down to the Button Text section. Find the Text property and change it to Logout.
  • To bring the button in the center, scroll down to the Alignment section. Adjust the position by using the slider or entering a value.
  • Select the Button and click on the Actions tab (on the right side of your screen).
  • Find the Action Type dropdown and change it to Authentication.
  • Find another Action Type dropdown below, and change it to the Logout.
Create an action to logout

5. 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:
  • Click on the Run button (top right corner of your screen)
  • Open the signup form and enter the credentials for creating a user.
  • Click on the Logout button.
  • Switch to the sign-in form and enter the credentials for the previously created user.
  • Click on the Logout button.
Testing authentication

6. Verify user creation in Firebase

To verify the creation of a new user in Firebase:
  • Open the Firebase console, and click on Authentication.
  • Select the Users tab.
  • Find the email for the newly created user in the identifier column.
  • Now click on the Firestore Database in the left side menu.
  • 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.