Sending Verification email to existing users

Question

I am working on a web app with an existing user base. Email verification was not initially implemented in the sign in flow.
I have successfully added code for sending verification email for all new sign ups but I also wanted to make a small page (or modal) where current users would be shown a button that would send the verification link to their inbox

The current sign up flow where I created the user with createUserWithEmailAndPassword I was able to get access to the user.user.sendEmailVerification method to do so, but cannot find any way to access this method to implement the feature for existing users.

Is there a way to access the sendEmailVerification method after the user has been created?

I am assuming that it would be available within the onAuthStateChange trigger but implementing that would lead to a bad UX (as I do not want to prompt the users everytime they login)

Edit:

I know the documentation states that we can use the firebase.auth().currentUser to get the current user but that, for some reason did not work. Also, I found references online suggesting to no longer use that method and they mentioned to use the onAuthStateChange method instead, which is why I was looking into that approach

score 1 · Answer 1 · answered Feb 09 '21 at 08:58

1

You can try this method:

const btnVerifyEmail = document.getElementById("btn-verify-id")
btnVerifyEmail.onclick = function () {
  const user = firebase.auth().currentUser;

  user.sendEmailVerification().then(function() {
    // Email sent.
    console.log("Email Sent")
  }).catch(function(error) {
    // An error happened.
    console.log(error)
  });
}

It's mentioned in the documentation right here

answered Feb 09 '21 at 08:58

Dharmaraj

47,845
8
52
84

I know it is mentioned there but that does not work. Later found most people have this problem and it is generally recommended to not use it this way but rather use the `onAuthStateChange`. Edited the question to explain the same – nsrCodes Feb 09 '21 at 12:46

score 1 · Answer 2 · answered Feb 09 '21 at 09:14

The sendEmailVerification() should not be called in the onAuthStateChanged event because it would blast out an email on every page load if the user's email isn't verified.

You should instead display a notification on the page if User.emailVerified is false that contains a link to send the user an email.

Here's a working example:

// On page load watch for auth state changes
firebase.auth().onAuthStateChanged(function(user) {
    // If the user is logged in
    if (user) {
        // If the user's email isn't verified
        if (!user.emailVerified) {
            // Show the notification bar that informs the user that they need to validate
            // their email by clicking a link.  Let's pretend the link looks like this:
            // <a href="#" onclick="sendEmailVerification">Send me a verification email</a>
            showNotification();
        }
    }
});

// Function attached to your link's onclick event
function sendEmailVerification() {
    // Retrieve the current user
    const user = firebase.auth().currentUser;

    // If user's email is already verified, exit
    if (user.emailVerified) {
        return;
    }

    // Tell Firebase to send the verification email and discard the promise
    user.sendEmailVerification().then().catch();
}

Dharmaraj's answer is good but this is a full example.

Sending Verification email to existing users

Edit:

2 Answers2

Linked