From 69255d0734ef9e72d8ab2cf25f16082c0fbbce1b Mon Sep 17 00:00:00 2001
From: Marco Crapts <mcrapts@gmail.com>
Date: Tue, 6 Jun 2023 20:19:50 +0200
Subject: [PATCH] complete capacitor firebase integration

---
 src/App.vue                                   |  1 -
 src/components/Auth.vue                       |  4 +-
 .../TopBar/Settings/AccountSettings.vue       |  3 +-
 src/composables/useFirebase.ts                | 49 ++++++++++++++++---
 4 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 2048f4e..0783521 100644
--- a/src/App.vue
+++ b/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()
diff --git a/src/components/Auth.vue b/src/components/Auth.vue
index d88fe76..67d98bf 100644
--- a/src/components/Auth.vue
+++ b/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: [
diff --git a/src/components/TopBar/Settings/AccountSettings.vue b/src/components/TopBar/Settings/AccountSettings.vue
index 07ba2de..f93e265 100644
--- a/src/components/TopBar/Settings/AccountSettings.vue
+++ b/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
 }
 
diff --git a/src/composables/useFirebase.ts b/src/composables/useFirebase.ts
index c44bf2c..83db00d 100644
--- a/src/composables/useFirebase.ts
+++ b/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() })
     })
   )