capacitor firebase auth

src/components/Auth.vue

@@ -2,6 +2,13 @@
 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'
 
 const props = defineProps<{
   authenticating?: boolean
@@ -11,12 +18,16 @@ const emit = defineEmits<{
   signedIn: [authResult: any]
 }>()
 
-const ui: any = inject('firebaseAuthUI')
+// const ui: any = inject('firebaseAuthUI')
+const firebaseAuthUI =
+  firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth())
+
+
 
 const uiConfig = {
   signInOptions: [
-    firebase.auth.EmailAuthProvider.PROVIDER_ID,
-    firebase.auth.GoogleAuthProvider.PROVIDER_ID
+    firebase.auth.EmailAuthProvider.PROVIDER_ID
+    // firebase.auth.GoogleAuthProvider.PROVIDER_ID
   ],
   // signInFlow: 'popup',
   signInFlow: 'redirect',
@@ -39,12 +50,67 @@ const uiConfig = {
   }
   // Other config options...
 }
-onMounted(() => ui.start('#auth', uiConfig))
+// onMounted(() => ui.start('#auth', uiConfig))
+
+interface Provider {
+  name: 'google' | 'microsoft' | 'github'
+  icon: string
+  auth: (options?: SignInOptions) => Promise<SignInResult>
+}
+
+const providers: Provider[] = [
+  {
+    name: 'google',
+    icon: 'fa-brands fa-google',
+    auth: FirebaseAuthentication.signInWithGoogle
+  },
+  {
+    name: 'microsoft',
+    icon: 'fa-brands fa-microsoft',
+    auth: FirebaseAuthentication.signInWithMicrosoft
+  },
+  {
+    name: 'github',
+    icon: 'fa-brands fa-github',
+    auth: FirebaseAuthentication.signInWithGithub
+  }
+]
+// type Provider = (typeof providers)[number]
+const signInWithProvider = async (provider: Provider) => {
+  const signInOptions: SignInWithOAuthOptions = {
+    mode: 'redirect'
+  }
+  await provider.auth(signInOptions)
+}
+
+const signingInWithEmail = ref(false)
+const signInWithEmail = () => {
+  firebaseAuthUI.start('#auth', uiConfig)
+  signingInWithEmail.value = true
+}
 </script>
 <template>
-  <div id="auth" v-show="!props.authenticating"></div>
-  <progress
+  <div class="space-y-2">
+    <template v-if="!signingInWithEmail">
+      <UIButton
+        class="mx-auto block w-[225px]"
+        size="sm"
+        @click="signInWithProvider(provider)"
+        v-for="provider in providers"
+        :key="provider.name"
+      >
+        <i class="fa-fw mr-2" :class="provider.icon"></i>
+        Sign in with {{ provider.name }}
+      </UIButton>
+      <UIButton class="mx-auto block w-[225px]" size="sm" @click="signInWithEmail">
+        <i class="fa-fw fa-regular fa-envelope mr-2"></i>
+        Sign in with email
+      </UIButton>
+    </template>
+    <div id="auth"></div>
+    <!-- <progress
     v-show="props.authenticating"
     class="dui-progress dui-progress-primary w-full"
-  ></progress>
+  ></progress> -->
+  </div>
 </template>