Flutter & Firebase App Tutorial — Part 7 Firebase Sign In and Register With Email

3 min readOct 30, 2021

Create a flutter authenticate app in 10 mins by using firebase as the back-end. You will learn how to enable Firebase Sign In with Email and then use Stream and Provider in Flutter to direct users to the right screen.

More Tutorials:

Flutter & Firebase App Tutorial — Lumei Digital

Enable Firebase signInWithEmailAndPassword()
Create Sign-In Form in Flutter
Create Sign Up Form in Flutter

Step 1️⃣: Enable Firebase signInWithEmailAndPassword() in the service auth_service.dartfile

//sing in with email & password
  Future signIn(String email, String password) async{
    try{
      return await _auth.signInWithEmailAndPassword(email: email, password: password);
    }
    catch(e){
      print(e.toString());
      return null;
    }
  }

Step2️⃣: Create Sign In Form in Flutter

✅ Create a TextFormField for the email. Inside the TextFormField, we specify what is going to happen when this form field changes by adding a onChangedproperty.

The onChangedproperty is equal to a function that takes in the value and then inside the onChangedfunction, we use setStateto let the emailproperty be equal to the value.

✅ Create a TextFormField for the password.

Inside the TextFormField, we add a obscureTextproperty so the password will not be shown while typing.

We take the password state and set it to whatever the value currently is inside the TextFormField.

SizedBox(height: 20.0),
TextFormField(               
   validator: (value) => value!.length < 6 ? 'Enter a password 6+ charts long': null,
   obscureText: true,
   onChanged: (value){
   setState(() => password = value);
   },
),

✅ A Sign Inbutton that integrates the icon button with the Firebase signInWithEmailAndPassword() in the service.

Next, we will do the same for the registration form in the Sign_up.dartfile.

Flutter & Firebase App Tutorial — Part 7 Firebase Sign In and Register With Email

More Tutorials:

Table of Contents

More Tutorials:

Written by Jumei Lin