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
}

Thank you, some things in the GitHub repo are different to get this thing working. An official example from Quasar Team would be great. Or even an quasar build -m ssr:firebase command.

Currently I do not find any working tutorials to deploy an ssr app to firebase hosting working with the quasar framework. Isn’t there any official doc?

Okay, what also works is using the QHeader and QFooter, which automatically apply the safe-area-insets

@yosa @metalsadman could you please share a more complete code example? I struggle with the same problem and wonder which element I need to apply the fixSafeArea(t, e) function? Where do you call the function, what exactly is your wrapper? Thx

Would be awesome if you share this directly next time

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
}