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>

score 0 · Answer 1 · answered Jun 27 '19 at 04:59

0

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:

answered Jun 27 '19 at 04:59

Frank van Puffelen

565,676
79
828
807

thanks for the clarification. In my code, I use "if (newUser.emailVerified == true) {}" to prevent a user from signing in with an unverified email address, and that seems to work. Is there some technical reason that this would not be sufficient for preventing unverified users from logging in? – JS_is_awesome18 Jun 27 '19 at 13:24
They're logged in to Firebase Authentication, as otherwise you couldn't check `newUser.emailVerified` to begin with. Whether the current check is enough depends purely on your requirements. You'll typically want to also protect the backend resources, as shown in the answers to the first two questions I linked. – Frank van Puffelen Jun 27 '19 at 20:09

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

1 Answers1

Linked