auth.onAuthStateChanged on vue3 and firebase 9.0.0 beta.3 not working

** Update ** I got it to work with the following **main.js **

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { onAuthStateChanged} from "firebase/auth";
import { auth } from './firebase'

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

  if (user) {
    //store.dispatch('fetchUserProfile', user)
  }
})

** firebase.js **

// Firebase App (the core Firebase SDK) is always required and must be listed first
import { initializeApp } from 'firebase/app';

// Add the Firebase products that you want to use
import { getAuth } from "firebase/auth";
import { getFirestore, collection } from 'firebase/firestore';

const firebaseConfig = {
  // config settings
};
const firebaseApp = initializeApp(firebaseConfig);
// utils
const db = getFirestore();
const auth = getAuth(firebaseApp)
// collection references
const usersCollection = collection(db, "users")
const postsCollection = collection(db, "posts")
const commentsCollection = collection(db, "comments")
const likesCollection = collection(db, "likes")
export {
  db,
  auth,
  usersCollection,
  postsCollection,
  commentsCollection,
  likesCollection
};

** When created vue3 and npm run serves it works.**

But when add auth.onAuthStateChanged to main.js and npm run serve than it show blank page. I already try auth.auth().onAuthStateChanged not worked

** main.js **

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { auth } from './firebase'

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

  if (user) {
    //store.dispatch('fetchUserProfile', user)
  }
})

** firebase.js **

/* eslint-disable */
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';


const firebaseConfig = {
  //... config
};
firebase.initializeApp(firebaseConfig);

// utils
const db = firebase.firestore();
const auth = firebase.auth();
const authProvider = firebase.auth;

// collection references
const usersCollection = db.collection('users');
const postsCollection = db.collection('posts');
const commentsCollection = db.collection('comments');
const likesCollection = db.collection('likes');

// export utils/refs
export {
  db,
  auth,
  authProvider,
  firebase,
  usersCollection,
  postsCollection,
  commentsCollection,
  likesCollection
};

** I tried another way but not worked **

** main.js **

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { auth, authState } from './firebase';

let app
authState(auth, (user) => {
  if (!app) {
    app = createApp(App).use(store).use(router).mount('#app')
  }

  if (user) {
    //store.dispatch('fetchUserProfile', user)
  }
})

** firebase.js**

// Firebase App (the core Firebase SDK) is always required and must be listed first
import { initializeApp } from 'firebase/app';

// Add the Firebase products that you want to use
import { getAuth, onAuthStateChanged, GoogleAuthProvider } from "firebase/auth";
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  \\ config
};
const firebaseApp = initializeApp(firebaseConfig);

// utils
const db = getFirestore();
const auth = getAuth();
const authState = onAuthStateChanged();
const googleAuthProvider = GoogleAuthProvider();

// collection references
const usersCollection = db.collection('users');
const postsCollection = db.collection('posts');
const commentsCollection = db.collection('comments');
const likesCollection = db.collection('likes');

// export utils/refs
export {
  db,
  auth,
  authState,
  googleAuthProvider,
  firebaseApp,
  usersCollection,
  postsCollection,
  commentsCollection,
  likesCollection
};

** Another question ** Is it good practice to code like above

Thanks