Deprecated plugin boot.js

[amitkukadia]

The boot.js plugin is now deprecated, in favor of prefetch feature. However, it is not as effective as the boot.js plugin.
The migration guide is given below
https://medium.com/quasar-framework/updating-to-quasar-0-17-x-with-firebase-authentication-91c129606859
Still, with this method, I am not getting the same results. It suggests that we should add prefetch to every component for auth. I think there must be a better way. Can you try to integrate prefetch into this app keeping the results same?? Or at least suggest a better way here.

[steveclarke]

Yes I think the preFetch on every page is not very elegant. The way I understand the onAuthStateChanged observer is that it only needs to be registered once for the app. It's overkill to be registering this observer on every page. But maybe i'm mis-understanding the method.

I believe that this observer is what allows the app to automatically and instantly log the user out if their account is disabled form the Firebase console.

That preFetch could probably be extracted into a mixin, but it would still have to be mixed in to every page.

I like the use of the meta data in the routes because they allow me to easily see from my routes.js what pages require auth.

Feel free to fork and try moving it to preFetch. I'll have a look when I have a moment. I'm currently working on a sample Quasar app that authenticates against a Ruby on Rails API.

[steveclarke]

Ok check out the preFetch branch that I created:

https://github.com/steveclarke/quasar-firebase-example/tree/prefetch

This has the same problem that I had before I solved by using boot.js. After you authenticate to the site, when you reload the page it should automatically sign you in again from credentials stored locally by Firebase. This works, however there is a brief redirect to the authentication page, and then you're taken to the dashboard page again.

boot.js doesn't have this problem because it waits for the authentication to complete before launching the app.

I think the problem is in how Firebase .onAuthStateChanged works. Maybe there's a method that will explicitly try and authenticate the user from stored credentials that returns a promise. An observer just isn't working in this scenario.

[steveclarke]

Can you submit a pull request with that change in it? I'd like to give it a try.

[amitkukadia]

I have made those change in a project I am working on. Give me a day. I will do it

[razbakov]

You can store userId in localstorage and init app and then call firebase onAuthStateChanged to update user info

[Larceniii]

I'm guessing that pull request never happened huh.... @amitkukadia

[justice47]

I'm looking forward to solve that issue, @steveclarke solution with login page redirect on every reload is not preferable.
Any news on this one?

[justice47]

Seems that

Router.beforeEach((to, from, next) => {
    firebase.auth().onAuthStateChanged(user => {
      const currentUser = firebase.auth().currentUser
      const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
      console.log(currentUser)
      console.log(requiresAuth)

      if (requiresAuth && !currentUser) next('/login')
      else if (!requiresAuth && currentUser) next('/')
      else next()
   })
})

is worked for me

UPD:

This is not so, because every time I'm adding new listener, but not removing old one. So it leads to uncontrollable listeners breeding. Will investigate further.

UPD2:

So, I came up with a solution. Not sure whether it elegant or even correct, but it works.
Lets assign our observer to var:

  let firebaseListener

  Router.beforeEach((to, from, next) => {
    firebaseListener = firebase.auth().onAuthStateChanged(user => {
      const currentUser = firebase.auth().currentUser
      const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
      console.log(currentUser)
      console.log(requiresAuth)

      if (requiresAuth && !currentUser) next('/login')
      else if (!requiresAuth && currentUser) next('/')
      else next()
    })
  })

And then remove it in afterEach hook:

  Router.afterEach((to, from) => {
    firebaseListener()
  })