Vue JS if statement returns both outcomes - vue.js

Question

I am making a website with a login function. However, when you successfully log in, it tells you both that the login failed and that it succeeded. Here is the code that handles the login message:
log () {
const self = this
firebase.auth().signInWithEmailAndPassword(this.regname, this.passname).catch(function (error) {
console.log(error.code, error.message)
})
firebase.auth().onAuthStateChanged(function (user) {
const huser = !!user
if (huser === true) {
self.$router.push('/firstlogged')
self.$q.notify({
color: 'positive',
spinner: true,
timeout: 5000,
progress: true,
message: 'Login Success!',
actions: [
{ label: 'Dismiss', color: 'white', handler: () => { /* ... */ } }
]
})
} else if (huser === false) {
self.$q.notify({
timeout: 5000,
progress: true,
color: 'negative',
message: 'Login Failed, check your input',
actions: [
{ label: 'Dismiss', color: 'white', handler: () => { /* ... */ } }
]
})
}
})
},
Obviously, it should only send one of these messages. It does however work if you put in the wrong login details. Any fixes to this?