Quasar Vue 3 Firebase - How to load Vue App after firebase initialized?

Question

I am using Quasar v2 and VueJS 3 with Firebase. I've read all of the comments and answers on internet to resolve this but none worked. boot/firebase.js is initializing firebase (and firestore, functions etc.) but I need sth (as Vue main.js) to load Vue app after onAuthstateChanged. I don't want to protect my routes(Please don't refer me the regular examples like beforeEnter or befaoreEach gurads).

I just want Vue app to load after firebase auth and firestore etc. initialized and loaded properly. I use boot/firebase.js and also add some Auth logic in it. Still router is working before boot file process finished. I put console.log(username) both firebase.js and route-guard. route guard returns null then firebase returns username 1 after 500ms. I need to solve this problem. Again, I don't want to check user is authenticated or not. Because I have /:username routes and also /home /about routes.

I also use Vuex store and LocalStorage but when Logout and then signup, signup push me to /:username page and username beforeEnter route guard load before username set to state and Localstorage. I use sleep(2000) async await but still same.

How can I manipulate Vue App on Quasar?

Answer 1

the answer thanks to Sy3d

How to mount quasar app to dom after firebase connection is initialized?

src/boot/auth.js

import { auth } from 'src/boot/firebase'

export default async ({ app, router, store }) => {
    return new Promise(resolve => {
        const unsubscribe = authService.onAuthStateChanged(() => {
            resolve()
            unsubscribe()
        })
    })
}