How to add Firebase Email Verification to your Flutter App

This article is a continuation of my previous article (Step by Step guide on how to authenticate your flutter app with Firebase (PART 1)). If you want to code along, I would recommend you read it here or clone the repo here.

In our previous app, a user can sign up with an email that doesn't exist (You don't want that in your live app). Lets add email verification to our app, so as to prevent users from entering invalid emails.

EMAIL VERIFICATION

Open SignUp.dart file, Our signup method is inside the RaisedButton, lets extract that into a separate method, instead of using a callback we would call the method instead. create a new method and name it signUp, copy the extracted code into it. You would notice we have an error, the context inside our routing right?. This is because our class is a stateless widget and since we have extracted our logic from our UI, its can't get the current context, we can solve this easily by making our class a statefull widget. click on the signUp class then hold ctrl + ., then click on convert to stateful widget. (There you go). Now call your method inside the onPressed property of RaisedButton. Your SignUp method should look like this.

 Future signUp() async {
    _formKey.currentState.save();
    try {
      final new_user = await _auth.createUserWithEmailAndPassword(
          email: _email, password: _password);
      if (new_user != null) {
        Navigator.pushNamed(context, HomepageScreen.id);
      }
    } catch (e) {
      print(e);
    }
  }

Your RaisedButton should now look like this.

RaisedButton(
       onPressed: signUp,
       child: Text(
      'Submit',
       style: TextStyle(fontSize: 18),
   ),
),

You see our code now looks cleaner. Inside our signUp function, underneath CreateUserWithEmailAndPassword function add this code await newUser.user.sendEmailVerification(). This function would trigger firebase to send a confirmation email to the user upon signup, all this are done under the hood, easy right? lolx. lets move on.

We need to prevent users from signing in, if they haven't verified their email. We also have to navigate them to Confirm Email Screen instead of the Homepage, So they don't have access to our app until they are verified. Now open the SignIn Class, extract the signin method like we did above, or if you like leave it like that. Instead of checking if user exist, we would be checking if the user is verified. delete if (user != null)' replace with if (user.user.emailVerified). Now lets create our Confirm Email Screen. Create a new file and name it ConfirmEmail then add this code.

import 'package:flutter/material.dart';
static String id = 'confirm-email';

class ConfirmEmail extends StatelessWidget {
  const ConfirmEmail({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
          child: Text(
        'An email has just been sent to you, Click the link provided to complete registration',
        style: TextStyle(color: Colors.white, fontSize: 16),
      )),
    );
  }
}

Its just a basic screen no styling or whatsoever, lolx. Moving On, We have to add our ConfirmEmail route, open main.dart underneath our routes add this ConfirmEmail.id: (context) => ConfirmEmail(),

Now go back to your signin method and change HomepageScreen.id to ConfirmEmail.id. Your SignIn method should look like this.

Future signIn() async {
    _formKey.currentState.save();
    try {
      final user = await _auth.signInWithEmailAndPassword(
          email: _email, password: _password);
      if (user.user.emailVerified) {
        Navigator.pushNamed(context, ConfirmEmail.id);
      }
    } catch (e) {
      print(e);
    }
  }

Restart your app and test, A confirmation email should be sent to you after registration, Try signing In before confirmation to check if the verification is working, All this should work fine if you follow along correctly.

Feel free to check my future articles where I would walk you through on How to add Forget Password and Reset Password to your Flutter Apps. Thanks for reading, I hope its helps.