Quasar v2 + Firebase onAuthStateChanged mount

[RobbeVorsselmans]

Hi all

I'm experiencing the following problem.
When I reload the page and a user is already signed in, my route guards redirect to the login page.
This happens because when checking, the connection to Firebase (which handles the existance of an authenticated user) is not ready yet.
I found the solution to handle this in Vue 3 online as:

let app;

auth.onAuthStateChanged(() => {
  if (!app) {
    app = createApp(App).use(store).use(router).mount('#app')
  }
})

with onAuthStateChanged a function provided by Firebase

However, Quasar uses a different approach in the app.js file (which also states that it should not be edited)

const app = createAppFn(RootComponent)
app.config.devtools = true
app.use(Quasar, quasarUserOptions)
return {
    app,
    store,
    router
}

Can anyone help me merging the suggestion using onAuthStateChanged with Quasar?

Thanks in advance!
Robbe

[dost-mmg]

@RobbeVorsselmans did you get an answer? I'm having trouble with the same.

[RobbeVorsselmans]

I used an approach similar to @nachoalcazar.
His is newer (Modular, web version 9) so I'd definately use his. Thanks @nachoalcazar!

[nachoalcazar]

Firebase.js

import { boot } from 'quasar/wrappers'
import { initializeApp } from 'firebase/app'
// import { getFirestore } from 'firebase/firestore'
import { getAuth, signOut } from 'firebase/auth'

// Your web app's Firebase configuration
const firebaseConfig = {
 ...
}

// Initialize Firebase
const app = initializeApp(firebaseConfig)
// const db = getFirestore(app)
const auth = getAuth(app)

const checkAuthStatus = () => {
  // console.log('running checkAuthStatus()')

  return new Promise((resolve, reject) => {
    try {
      auth
        .onAuthStateChanged(user => {
          console.log('userChecked:', user)
          resolve(user)
        })
    } catch {
      reject('api failed')
    }
  })
}

Autologin.js

import { boot } from 'quasar/wrappers'
import { checkAuthStatus } from 'boot/firebase'


export default boot(async ({ store }/* { app, router, ... } */) => {
  console.log('Recuperando sesion previa')

  const user = await checkAuthStatus()
  if (user) {
    await store.dispatch('user/setUser', user)
  }
})

[BenJackGill]

This is the best and cleanest answer I have found to this problem. Thank you!