How to Send a User Verification Mail in Web and Firebase ?

Last Updated : 02 Aug, 2024

In this article, we will see how to send the user verification email to the user, so that only verified users can be signed In to their account using Email Password Authentication.

The Drawback of email password authentication is that, when a user signs up using an arbitrary email, firebase allows them to sign up and sign in, Unlike email is arbitrary.

So, A verification email sends to the user, so that we can verify that the email really belongs to that user.

A sample video gives you an idea of what we are going to implement in this article:

Syntax: Send User a Verification Email:

function VerificationEmail() {
   firebase.auth().currentUser.sendEmailVerification()
       .then(() => {
           // Email verification sent!
           console.log('Email Verification sent! Check your mail box');
           // ...
       });
}

Example: Below is the implementation to Send a user Verification mail in Web and Firebase

index.html: The HTML file contains only two buttons that call the respective method, showUserProfile, and VerificationEmail.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>samplefirebaseforweb</title>
    <script src=
"https://www.gstatic.com/firebasejs/3.7.4/firebase.js">
  </script>
</head>

<body>
    <script src="/app.js"></script>
    <button onclick="showUserProfile1()"> 
      Show user Profile data using provider</button>
    <div>
        <button onclick="VerificationEmail()">
          Sent Verification Email</button>
    </div>
</body>

</html>

script.js: Javascript file contains the firebase configure file and the Function definition for the method showUserProfile and VerificationEmail.

JavaScript

const firebaseConfig = {
    //your configuration code here
};

// Initialize Firebase
const app = firebase.initializeApp(firebaseConfig);

function showUserProfile1() {
    const user = firebase.auth().currentUser;

    if (user !== null) {
        user.providerData.forEach((profile) => {
            console.log("Sign-in provider: " + profile.providerId);
            console.log(" Provider-specific UID: " + profile.uid);
            console.log(" Name: " + profile.displayName);
            console.log(" Email: " + profile.email);
            console.log(" Photo URL: " + profile.photoURL);
        });
    }
}
// Method to send the user verification mail
function VerificationEmail() {
    firebase.auth().currentUser.sendEmailVerification()
        .then(() => {
            // Email verification sent!
            console.log('Email Verification sent! Check your mail box');
            // ...
        });
}

Output:

Check out your Mailbox to verify the mail, If you did not find the email, check the junk folder, Spam:

Now your firebase application only allows signing in to the user who has the verified email.