Firebase Configuration not working in VueJs - firebase

Question

I am trying to use firebase in an app. However, I am trying to render routes based on user authentication status but for some reason, firebase tells me the user is logged in but the user isn't. Here is my store/index.js file. I am using vuex.
getRoutes (state) {
let mRoutes = []
firebase.auth().onAuthStateChanged(function (User) {
if (User) {
console.log('Not loggedin')
mRoutes = state.authenticatedUserRoutes
} else {
console.log('Loggedin' + mRoutes)
mRoutes = state.unAuthenticatedUserRoutes
}
})
return mRoutes
}
I have already initiated firebase inthe main.js file as shown below
import * as firebase from 'firebase'
import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
new Vue({
router,
store,
vuetify,
created () {
firebase.initializeApp({
apiKey: '#################',
authDomain: '######################',
databaseURL: '######################',
projectId: '######################',
storageBucket: '######################',
messagingSenderId: '######################',
appId: '######################',
measurementId: 'G-SEPRYKF81S'
})
},
render: h => h(App)
}).$mount('#app')

Answer 1

Seems like this could be because you're using onAuthStateChanged which is an observer that fires when the auth state changes.
https://firebase.google.com/docs/reference/js/firebase.auth.Auth#on-auth-state-changed
Adds an observer for changes to the user's sign-in state.
Prior to 4.0.0, this triggered the observer when users were signed in, signed out, or when the user's ID token changed in situations such as token expiry or password change. After 4.0.0, the observer is only triggered on sign-in or sign-out.
you should probably check the state manually first.