complete capacitor firebase integration

src/composables/useFirebase.ts

@@ -1,11 +1,23 @@
 // import { initializeApp } from 'firebase/app'
-import firebase from 'firebase/compat/app'
-import type { User } from '@firebase/auth-types'
+import { Capacitor } from '@capacitor/core'
+// import firebase from 'firebase/compat/app'
+// import type { User } from '@firebase/auth-types'
+import { initializeApp } from 'firebase/app'
+
 import {
   initializeFirestore,
   persistentLocalCache,
   persistentMultipleTabManager
 } from 'firebase/firestore'
+import {
+  getAuth,
+  indexedDBLocalPersistence,
+  initializeAuth,
+  onAuthStateChanged,
+  signOut as firebaseSignOut
+} from 'firebase/auth'
+import { type FirebaseApp } from 'firebase/app'
+import { type User, type Auth } from '@firebase/auth'
 import type { Firestore } from 'firebase/firestore'
 
 // import { getAnalytics } from "firebase/analytics";
@@ -25,22 +37,45 @@ const firebaseConfig = {
   measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID
 }
 
+export let firebaseApp: FirebaseApp
+
+export let firebaseAuth: Auth
+
 export const user = ref<User | null>()
 
 export const initialized = computed<boolean>(() => user.value !== undefined)
 
-export const signOut = () => firebase.auth().signOut()
+export const signOut = async () => firebaseSignOut(firebaseAuth)
 
 export const db = ref<Firestore>()
 
+const getFirebaseAuth = async (app: FirebaseApp) => {
+  if (Capacitor.isNativePlatform()) {
+    return initializeAuth(app, {
+      persistence: indexedDBLocalPersistence
+    })
+  } else {
+    return getAuth()
+  }
+}
+
 // Initialize Firebase
-export const initializeFirebase = () => {
-  const app = firebase.initializeApp(firebaseConfig)
-  firebase.auth().onAuthStateChanged((firebaseUser) => {
+export const initializeFirebase = async () => {
+  firebaseApp = initializeApp(firebaseConfig)
+  // const auth = initializeAuth(app)
+  // onAuthStateChanged(auth, (firebaseUser) => {
+  //   // console.log(firebaseUser)
+  //   user.value = firebaseUser
+  // })
+  firebaseAuth = await getFirebaseAuth(firebaseApp)
+  onAuthStateChanged(firebaseAuth, (firebaseUser) => {
     user.value = firebaseUser
   })
+  // firebase.auth().onAuthStateChanged((firebaseUser) => {
+  //   user.value = firebaseUser
+  // })
   db.value = markRaw(
-    initializeFirestore(app, {
+    initializeFirestore(firebaseApp, {
       localCache: persistentLocalCache({ tabManager: persistentMultipleTabManager() })
     })
   )