Skip to content

bobby_dreamer

Firebase email verification

javascript, web-development, firebase1 min read

There are couple of methods for sending verification emails in firebase

  1. Calling sendEmailVerification() from the Firebase client
  2. Calling generateEmailVerificationLink() to generate link from Admin SDK(Server side) and send email using any Email Delivery Service of your choice. (e.g., SendGrid)

Here we are going to have a look at the first method.

Working example can be found in Firebase Experiments : Authentication and its a single page example, so source code is just there.

# Sending verification emails via Firebase

  1. Email verification template can be found by following path

    1Firebase console --> Authentication(In Build left sidebar)
    2 --> Templates ( Tab on right next to Sign-in method)
  2. Currently i am making no changes to the format.

    Firebase Console : Authentication Template

  3. Here for testing purposes, i have logged in gmail using Email Password mechanism, if i login via gmail, it will be automatically verified. So i am going for this approach.

  • Typing the email and password(doesn't have to be the actual gmail password) and click Register & Login Application UI

  • In Firebase Authentication Users tabs you can see the new user added with provider as email Firebase Authentication Users Tab

  1. Sending verification email. Notice the false, thats the value in emailVerified field Application UI

    Here is the code behind the Send verification mail button

    1btnSVE.addEventListener("click", fbSendVerificationEmail, false);
    2
    3/* Send verification email
    4––––––––––––––––––––––––––––––––––––––––––––––––––----------------------- */
    5function fbSendVerificationEmail(){
    6 const auth = firebase.auth().currentUser;
    7 auth.sendEmailVerification().then(function() {
    8 // Email sent.
    9 txtVEA.innerHTML = 'Verification email sent to ' + auth.email;
    10 }).catch(function(error) {
    11 // An error happened.
    12 txtVEA.innerHTML = 'Error occured';
    13 });
    14}

Once i click the button, i get the following output when the functione executed successfully

Application UI

  1. Received the verification email as below, Gmail

  2. On clicking the link Click the verification link

  3. On refreshing the page again. Notice the true, thats the value in emailVerified field now. Application UI

# Other firebase posts

# References