How to prevent user authentication in Firebase/Vue.js BEFORE email is verified

Question

I am building a Vue.js/Firebase authentication interface that includes an email verification component. So far, I have been able to successfully set up my interface so that the user is prevented from logging in until he/she clicks the verification link in the email sent to the inbox tied to the inputted address. I am noticing, however, that the email address still renders in the Firebase authentication portal, even BEFORE clicking the link in the verification email. This also seems to be the case with fake email addresses, which obviously can't be verified. I would really like to have email addresses render in the authentication portal only AFTER clicking the link in the verification email. How can I achieve this? Here is my current code. Thanks!

<template>
  <div>
    <div class="container">
      <input type="email" id="txtEmail" v-model="authInput.txtEmail" placeholder="Email">
      <input type="Password" id="txtPassword" v-model="authInput.txtPassword" placeholder="Password">
    </div>

    <div class="container">
      <button id="btnLogin" v-on:click="Login()">Log in</button>
      <button id="btnSignUp" v-on:click="SignUp()">Sign Up</button>
      <button id="btnLogout" v-on:click="LogOut()" style="display:none">Log out</button>
    </div>
    <p id="verifyMessage"></p>
  </div>
</template>

<script>
    import Firebase from 'firebase'
    export default {
        data() {
            return {
                authInput: {
                    txtEmail: '',
                    txtPassword: ''
                }
            }
        },
        methods: {
            Login: function(event) {
                const email = this.authInput.txtEmail;
                const pass = this.authInput.txtPassword;
                const auth = Firebase.auth();
                const promise = auth.signInWithEmailAndPassword(email, pass);
                this.authInput.txtEmail = '';
                this.authInput.txtPassword = '';
                promise.catch(event => console.log(event.message));

                auth.onAuthStateChanged(newUser => {
                  if (newUser) {
                      if (newUser.emailVerified == true) {
                          console.log('login success');
                          document.getElementById('btnLogout').style.display = '';
                          document.getElementById('btnLogin').style.display = 'none';
                          document.getElementById('btnSignUp').style.display = 'none';
                          document.getElementById("verifyMessage").innerHTML = "You are now logged in!";
                      } else {
                          document.getElementById('btnLogout').style.display = 'none';
                      }
                  } else {
                      console.log('not logged in');
                      document.getElementById('btnLogout').style.display = 'none';
                      document.getElementById('btnLogin').style.display = '';
                      document.getElementById('btnSignUp').style.display = '';
                  }
                })
            },
            SignUp: function(event) {
                const email = this.authInput.txtEmail;
                const pass = this.authInput.txtPassword;
                const auth = Firebase.auth();
                const promise = auth.createUserWithEmailAndPassword(email, pass);
                this.authInput.txtEmail = '';
                this.authInput.txtPassword = '';
                promise.catch(event => console.log(event.message));

                auth.onAuthStateChanged(firebaseUser => {
                    if (firebaseUser) {
                        firebaseUser.sendEmailVerification().then(function() {
                            console.log('send Verification');
                            document.getElementById("verifyMessage").innerHTML = "Check your inbox for verification email!";
                        }, function(error) {
                            console.log('not send Verification');
                        });
                    } else {
                        console.log('not logged in');
                        document.getElementById('btnLogout').style.display = 'none';
                    }
                })
            },
            LogOut: function() {
                Firebase.auth().signOut();
                document.getElementById("verifyMessage").innerHTML = "You are now logged out!";
            }
        }
    }
</script>

<style media="screen">
  .container {
    margin: 10px;
  }
</style>

Answer 1

This has been discussed quite a few times already: there is currently no way to prevent a user from signing in with an unverified email address. But you can check the verification status both in your client-side code, and in your back-end code (or security rules) to ensure that only users with a verified email address have access to your resources.

See:

• How do I lock down Firebase Database to any user from a specific (email) domain?
• Firebase Prevent Creating Account Before Email Verification
• more similar questions