capacitor firebase auth

2023-06-06 19:33:43 +02:00
parent cd807d7ff0
commit 882c55373b
11 changed files with 174 additions and 52 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,8 +11,7 @@ import {
 import { initializeSettings } from '@/composables/useSettings'
 import { windowIsMobile } from '@/utils/helpers'
 import SideBar from '@/components/SideBar.vue'
-import firebase from 'firebase/compat/app'
-import * as firebaseui from 'firebaseui'
+// import firebase from 'firebase/compat/app'
 import { useWindowSize } from '@vueuse/core'

 initializeSettings()
@@ -26,9 +25,9 @@ watch(width, () => (sideBarCollapsed.value = windowIsMobile()))
 // const ListView = defineAsyncComponent(() => import('@/components/ViewModes/ListView.vue'))
 // const Mindmap = defineAsyncComponent(() => import('@/components/ViewModes/Mindmap.vue'))

-const firebaseAuthUI =
-  firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth())
-provide('firebaseAuthUI', firebaseAuthUI)
+// const firebaseAuthUI =
+//   firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth())
+// provide('firebaseAuthUI', firebaseAuthUI)

 watch(
  [activeNotesSource, encryptionKey],
--- a/src/components/Auth.vue
+++ b/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>
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -21,12 +21,12 @@ const emit = defineEmits<{

 const searchActive = ref<boolean>(false)

-const authUI: any = inject('firebaseAuthUI')
-const authPending = ref<boolean>(authUI.isPendingRedirect())
+// const authUI: any = inject('firebaseAuthUI')
+// const authPending = ref<boolean>(authUI.isPendingRedirect())

 const handleSignIn = async (close: () => Promise<boolean>) => {
  await close()
-  authPending.value = false
+  // authPending.value = false
 }
 </script>
 <template>
@@ -50,7 +50,7 @@ const handleSignIn = async (close: () => Promise<boolean>) => {
        />
      </div>
      <div class="flex h-full flex-grow flex-row items-center gap-2 pl-5 pr-3">
-        <template v-if="!loading || authPending">
+        <template v-if="!loading">
          <SearchBar @active="(active) => (searchActive = active)" />
          <UIButton
            size="sm"
@@ -60,7 +60,7 @@ const handleSignIn = async (close: () => Promise<boolean>) => {
          >
            <i class="fa-fw fa-solid fa-plus-circle scale-[115%]" />
          </UIButton>
-          <UIModal v-if="(initialized && !user) || authPending" :open="authPending">
+          <UIModal v-if="(initialized && !user)">
            <template #activator="{ open }">
              <UIButton
                size="sm"
@@ -71,9 +71,9 @@ const handleSignIn = async (close: () => Promise<boolean>) => {
                Sign in
              </UIButton>
            </template>
-            <template #title>{{ authPending ? 'Signing in...' : 'Sign in' }}</template>
+            <template #title>Sign in</template>
            <template #default="{ close }">
-              <Auth @signedIn="handleSignIn(close)" :authenticating="authPending" />
+              <Auth @signedIn="handleSignIn(close)" />
            </template>
            <template #actions="{ close }">
              <UIButton size="sm" @click="close">Close</UIButton>
--- a/src/components/TopBar/Settings/AccountSettings.vue
+++ b/src/components/TopBar/Settings/AccountSettings.vue
@@ -66,31 +66,33 @@ const toggleEncryption = async () => {
        <UICard>
          <template #title>Account</template>
          <template #default>
-            <div class="w-full flex-row sm:flex">
-              <div class="font-bold sm:w-4/12">E-mail address</div>
-              <div>{{ user?.email }}</div>
-            </div>
-            <div class="w-full flex-row sm:flex">
-              <div class="font-bold sm:w-4/12">Account status</div>
-              <div class="col-auto">
-                <UIBadge :color="user?.emailVerified ? 'success' : 'warning'">
-                  {{ user?.emailVerified ? 'Verified' : 'Not yet verified' }}
-                </UIBadge>
-                <UIButton
-                  size="sm"
-                  class="ml-2"
-                  @click="sendVerificationMail"
-                  v-if="!user?.emailVerified"
-                  :disabled="verificationEmailSent"
-                >
-                  {{
-                    verificationEmailSent
-                      ? 'Verification email sent'
-                      : 'Request new verification email'
-                  }}
-                </UIButton>
+            <template v-if="user?.email">
+              <div class="w-full flex-row sm:flex">
+                <div class="font-bold sm:w-4/12">E-mail address</div>
+                <div>{{ user.email }}</div>
              </div>
-            </div>
+              <div class="w-full flex-row sm:flex">
+                <div class="font-bold sm:w-4/12">Account status</div>
+                <div class="col-auto">
+                  <UIBadge :color="user.emailVerified ? 'success' : 'warning'">
+                    {{ user.emailVerified ? 'Verified' : 'Not yet verified' }}
+                  </UIBadge>
+                  <UIButton
+                    size="sm"
+                    class="ml-2"
+                    @click="sendVerificationMail"
+                    v-if="!user.emailVerified"
+                    :disabled="verificationEmailSent"
+                  >
+                    {{
+                      verificationEmailSent
+                        ? 'Verification email sent'
+                        : 'Request new verification email'
+                    }}
+                  </UIButton>
+                </div>
+              </div>
+            </template>
            <div class="w-full flex-row sm:flex">
              <div class="font-bold sm:w-4/12">Account creation date</div>
              <div>