I'm currently working on creating a method to verify a user's login status using firebase's
firebase.auth().onAuthStateChanged()Presently, I am utilizing a Vue.observable store to define the value of the signed-in state.
store.js
export const store = Vue.observable({
signedIn: false,
});
export const mutations = {
setSignedIn(bool) {
store.signedIn = bool;
},
};
Upon initializing my app, I invoke the check auth function
App.vue
import {mutations} from './store'
this.$firebase.auth().onAuthStateChanged((user) => {
if (user) {
mutations.setSignedIn(true);
} else {
mutations.setSignedIn(false);
}
});
Subsequently, within one of my child components, I examine the store to determine the signedIn status. Depending on this status, I will either utilize chrome.storage if not logged in, or firebase if logged in.
List.js
import {store} from './store'
if (store.signedIn) {
// use firebase
} else {
// use chrome storage
}
The main obstacle I'm facing is that the
firebase.auth().onAuthStateChanged()asynchronously, causing my store.signedIn value to remain unchanged and not reflect updates.
My objective is to synchronize with the completion of the onAuthStateChanged event before checking the store.signedIn variable, but my attempts have been unsuccessful thus far.