complete capacitor firebase integration

src/App.vue

@@ -11,7 +11,6 @@ import {
 import { initializeSettings } from '@/composables/useSettings'
 import { windowIsMobile } from '@/utils/helpers'
 import SideBar from '@/components/SideBar.vue'
-// import firebase from 'firebase/compat/app'
 import { useWindowSize } from '@vueuse/core'
 
 initializeSettings()

src/components/Auth.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { firebaseAuth } from '@/composables/useFirebase'
 import firebase from 'firebase/compat/app'
 import 'firebase/compat/auth'
 import 'firebaseui/dist/firebaseui.css'
@@ -16,8 +17,7 @@ const emit = defineEmits<{
 
 // const ui: any = inject('firebaseAuthUI')
 const firebaseAuthUI =
-  firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth())
+  firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebaseAuth)
-
 
 const uiConfig = {
   signInOptions: [

src/components/TopBar/Settings/AccountSettings.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { sendEmailVerification } from 'firebase/auth'
 import { user } from '@/composables/useFirebase'
 import { encryptionKey, enableEncryption, disableEncryption } from '@/composables/useEncryption'
 import { notes } from '@/composables/useNotes'
@@ -9,7 +10,7 @@ import FileSaver from 'file-saver'
 const verificationEmailSent = ref(false)
 const sendVerificationMail = () => {
   if (!user.value) throw Error("User doesn't exist, can't send verification email")
-  user.value.sendEmailVerification()
+  sendEmailVerification(user.value)
   verificationEmailSent.value = true
 }
 

src/composables/useFirebase.ts

@@ -1,11 +1,23 @@
 // import { initializeApp } from 'firebase/app'
-import firebase from 'firebase/compat/app'
+import { Capacitor } from '@capacitor/core'
-import type { User } from '@firebase/auth-types'
+// 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 = () => {
+export const initializeFirebase = async () => {
-  const app = firebase.initializeApp(firebaseConfig)
+  firebaseApp = initializeApp(firebaseConfig)
-  firebase.auth().onAuthStateChanged((firebaseUser) => {
+  // 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() })
     })
   )