bug fixes

src/components/Auth.vue

@@ -1,23 +1,25 @@
 <script setup lang="ts">
-import { firebaseAuth } from '@/composables/useFirebase'
 import firebase from 'firebase/compat/app'
 import 'firebase/compat/auth'
 import 'firebaseui/dist/firebaseui.css'
 import * as firebaseui from 'firebaseui'
 import {
   FirebaseAuthentication,
-  type SignInOptions,
-  type SignInResult,
-  type SignInWithOAuthOptions
 } from '@capacitor-firebase/authentication'
+import {
+  getAuth,
+  GoogleAuthProvider,
+  OAuthProvider,
+  signInWithCredential,
+} from 'firebase/auth'
 
 const emit = defineEmits<{
   signedIn: [authResult: any]
 }>()
 
 // const ui: any = inject('firebaseAuthUI')
-const firebaseAuthUI =
-  firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebaseAuth)
+const auth = getAuth()
+const firebaseAuthUI = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(auth)
 
 const uiConfig = {
   signInOptions: [
@@ -50,32 +52,56 @@ const uiConfig = {
 interface Provider {
   name: 'google' | 'microsoft' | 'github'
   icon: string
-  auth: (options?: SignInOptions) => Promise<SignInResult>
+  signin: () => Promise<void>
+  // (options?: SignInOptions) => Promise<SignInResult>
 }
 
 const providers: Provider[] = [
   {
     name: 'google',
     icon: 'fa-brands fa-google',
-    auth: FirebaseAuthentication.signInWithGoogle
+    signin: async () => {
+      const result = await FirebaseAuthentication.signInWithGoogle({
+        mode: 'redirect'
+      })
+      const credential = GoogleAuthProvider.credential(result.credential?.idToken)
+      await signInWithCredential(auth, credential)
+    }
   },
   {
     name: 'microsoft',
     icon: 'fa-brands fa-microsoft',
-    auth: FirebaseAuthentication.signInWithMicrosoft
+    signin: async () => {
+      const result = await FirebaseAuthentication.signInWithMicrosoft({
+        mode: 'redirect'
+      })
+      const provider = new OAuthProvider('microsoft.com')
+      const credential = provider.credential({
+        idToken: result.credential?.idToken,
+        rawNonce: result.credential?.nonce
+      })
+      await signInWithCredential(auth, credential)
+    }
   },
   {
     name: 'github',
     icon: 'fa-brands fa-github',
-    auth: FirebaseAuthentication.signInWithGithub
+    signin: async () => {
+      const result = await FirebaseAuthentication.signInWithGithub({
+        mode: 'redirect'
+      })
+      const provider = new OAuthProvider('github.com')
+      const credential = provider.credential({
+        idToken: result.credential?.idToken,
+        rawNonce: result.credential?.nonce
+      })
+      await signInWithCredential(auth, credential)
+    }
   }
 ]
 // type Provider = (typeof providers)[number]
 const signInWithProvider = async (provider: Provider) => {
-  const signInOptions: SignInWithOAuthOptions = {
-    mode: 'redirect'
-  }
-  await provider.auth(signInOptions)
+  provider.signin()
 }
 
 const signingInWithEmail = ref(false)

src/composables/useFirebase.ts

@@ -17,7 +17,7 @@ import {
   signOut as firebaseSignOut
 } from 'firebase/auth'
 import { type FirebaseApp } from 'firebase/app'
-import { type User, type Auth } from '@firebase/auth'
+import { type User } from '@firebase/auth'
 import type { Firestore } from 'firebase/firestore'
 
 // import { getAnalytics } from "firebase/analytics";
@@ -39,13 +39,11 @@ const firebaseConfig = {
 
 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 = async () => firebaseSignOut(firebaseAuth)
+export const signOut = async () => firebaseSignOut(getAuth())
 
 export const db = ref<Firestore>()
 
@@ -67,8 +65,8 @@ export const initializeFirebase = async () => {
   //   // console.log(firebaseUser)
   //   user.value = firebaseUser
   // })
-  firebaseAuth = await getFirebaseAuth(firebaseApp)
-  onAuthStateChanged(firebaseAuth, (firebaseUser) => {
+  const auth = await getFirebaseAuth(firebaseApp)
+  onAuthStateChanged(auth, (firebaseUser) => {
     user.value = firebaseUser
   })
   // firebase.auth().onAuthStateChanged((firebaseUser) => {