How to verify your users email address with Firebase Auth

Libraries and Versions

Last Reviewed: Sep 13, 2020

Do you know how to prevent people from enter someone else's email when signing up for your up?

Firebase offers a handy tool for that called email verification link, and it's a link you send to your users' emails, they can click it, and it will verify their emails inside of Firebase Authentication.

Then you can decide to only give access to verified users, or run a cleaning tool to remove non-verified users after set period of time.

Let's get coding

To set up a verification link you first need to decide on when you want to ask for the verification, in this example, you'd want to send the email as soon as the user signs up, that way you can give access only after they verify their emails.

For that you need to go to your signup function, here's an example of mine, I'll break down what it's doing:

constructor(private afAuth: AngularFireAuth){}

async signup(
  email: string,
  password: string
): Promise<firebase.auth.UserCredential> {
  try {
    const newUserCredential: firebase.auth.UserCredential = await this.afAuth.createUserWithEmailAndPassword(
      email,
      password
    );
    await this.firestore
      .doc(`userProfile/${newUserCredential.user.uid}`)
      .set({ email });

    return newUserCredential;
  } catch (error) {
    throw error;
  }
}

First, the function takes an email and password and sends it to the createUserWithEmailAndPassword() function (I think that's one of the most descriptive function names I've seen :-P).

The function returns a UserCredential object, inside of it we can find the user object, where we have the user's ID, email, etc.

Then it's creating a new database record for that user, storing the only information we have about them, their email.

For our case, we want to call the send email verification utility right after we create the database record, so our new function would look like this:

constructor(private afAuth: AngularFireAuth){}

async signup(
  email: string,
  password: string
): Promise<firebase.auth.UserCredential> {
  try {
    const newUserCredential: firebase.auth.UserCredential = await this.afAuth.createUserWithEmailAndPassword(
      email,
      password
    );
    await this.firestore
      .doc(`userProfile/${newUserCredential.user.uid}`)
      .set({ email });
    /*
      Here we add the functionality to send the email.
    */
    await newUserCredential.user.sendEmailVerification();

    return newUserCredential;
  } catch (error) {
    throw error;
  }
}

If you take a closer look to the function, we added this line of code:

await newUserCredential.user.sendEmailVerification();

It goes into the newUserCredential object, then into the user object, and then it calls the sendEmailVerification() method.

And that's it, every new user you create will get an email to verify their accounts, you can then decide on how you'll handle their access.

Do let me know if you have any questions!