FlutterFlow Docs
Search…
Email Sign-In
Email/Password Sign-In allows a user to authenticate using an email address and password.
Adding Email Sign-In comprises of following steps:

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. (Skip if you have already enabled authentication and created user collection while creating your project with Firebase Setup.)

1. Enabling Email Authentication in Firebase

To enable Email and Password authentication in the Firebase:
  • Open the Firebase console, 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 Native Providers section).
  • Inside the Sign-in providers section, find the Email/Password switch and enable it.
  • Click on the Save button.

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.

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.

2.2 Adding The 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

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.

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.
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.

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 if 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.

4. Set The Initial Entry Pages

You can set initial entry pages based on whether or not a user is logged in:
  • Entry Page will be loaded if the user is not logged in to your app, this is usually used to display the onboarding flow of the app or to provide the login/sign-up page.
  • Logged In Page will be loaded if the user is already logged in to your app. Users are automatically navigated to the page you specify here on a successful sign-in attempt.
To set the entry and logged In page:
  • Click on the Settings and Integration from the Navigation Menu (left side of your screen).
  • Click on the General tab.
  • Scroll down to the Initial Page Settings section.
  • Find the Entry Page dropdown, Click on the No Page Selected, and then select your login page.
  • Now, Find the Logged In Page dropdown, Click on the No Page Selected, and then select your home page.

5. Create An Action To Logout

To log out a user, you need to add a logout action. This could be a button on your settings page, an icon button on your AppBar, or other 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.

6. 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 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.

7. Verify User Creation in Firebase

To verify the creation of a new user in Firebase:
  • Open the Firebase console, 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.

Want To See More Email Sign-In Examples?

Check out our Sample Apps or view our App Showcase.
Last modified 1d ago