I am currently working on a Vue.js and Firebase authentication interface with an email verification feature. The setup is such that the user cannot log in until they click the verification link sent to the email address provided during the login process. However, I have observed that the email addresses are still displayed in the Firebase authentication portal even before the verification link is clicked. This holds true for fake email addresses as well, which obviously cannot be verified. I am seeking a solution to ensure that email addresses only appear in the authentication portal after the user has clicked the verification link in the email. Below is my current code snippet. Your help is greatly appreciated!
<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>