Firebase onAuthStateChanged and beforeEach (Navigation Guard)



  • I am seeing an issue in my Quasar app with regards to browser refresh and firebase authentication.

    When a user logs in and then clicks on the browser refresh, then the firebase.auth().currentUser returns null (as this executes asynchronously). This means that when the beforeEach gets executed the currentUser is null and the user is prompted with the logon page. However I see that when the callback to onAuthStateChanged() is getting invoked the user is getting set correctly.

    Is there any pattern by which, in a Quasar app, the onAuthStateChanged() can be used in navigation process so that existing user session is reused?

    // router/index.js 
    ...
    firebase.auth().onAuthStateChanged(user => {
      console.log('onAuthStateChanged Invoked => ' + user);
    });
    
    router.beforeEach((to, from, next) => {
      let currentUser = firebase.auth().currentUser; 
      let requiresAuth = to.matched.some(record => record.meta.requiresAuth);
    
      if (requiresAuth && !currentUser) {
        next('signin');
      } else {
        if (requiresAuth && currentUser.emailVerified === false) {
          next('signin');
        } else {
          next();
        }
      }
    });
    ...
    

    One pattern that is used in Vue applications is to initialize the app within the onAuthStateChanged callback. From the Quasar docs, I dont see how this can be done.



  • Came across this solution in the Vuejs forum https://forum.vuejs.org/t/vue-routes-firebase-auth-sync-problem/4470

    Solution is to wrap the firebase.auth().currentUser within a Promise and then execute the logic within the beforeEach based on the resolution of the Promise.



  • Hi Venkyvb,

    I’m a little late to the party, but I’m having the same issue-- in boot. Its kind of works but I got boot errors and extensions are not working. Would you mind posting a quick excerpt of your completed solution?

    I’m currently mounting handleAuthStateChange in App.vue and triggering it from the store which is causing refresh issues.



  • This would be useful for me too



  • Hi, I also struggled a lot with this one (with other frameworks also…), but my solution with Quasar seems to work. It is the promised-based approach which I include in the my Router index.js, not in any boot file.

    If changes to the user state are made, I dispatch the new state to vuex only from the Router, because if my user logs in s/he is redirected to a dashboard and if logged out redirected to another page.

    export default function ({ store }) {
      const router = new VueRouter({
        ...
      })
    
      router.beforeEach(async (to, from, next) => {
        const user = await new Promise((resolve, reject) => {
          firebaseAuth.onAuthStateChanged(user => {
            store.dispatch('myFirebaseUserAction', user.toJSON())
            resolve(user)
          })
        })
    
        const requiresAuth = to.matched.some(recordedRoute => recordedRoute.meta.requiresAuth)
    
        if (requiresAuth && !user) {
          next({ path: 'login', query: { from: to.path } })
        } else {
          next()
        }
      })
      return router
    }
    


  • Yep, I arrived at almost an identical solution too 🆒



  • Would be awesome if you share this directly next time 💪🏻


Log in to reply