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/android/app/capacitor.build.gradle
+++ b/android/app/capacitor.build.gradle
@@ -9,6 +9,7 @@ android {

 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
+    implementation project(':capacitor-firebase-authentication')
    implementation project(':capacitor-dialog')
    implementation project(':capacitor-haptics')
    implementation project(':capacitor-keyboard')
--- a/android/capacitor.settings.gradle
+++ b/android/capacitor.settings.gradle
@@ -2,6 +2,9 @@
 include ':capacitor-android'
 project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')

+include ':capacitor-firebase-authentication'
+project(':capacitor-firebase-authentication').projectDir = new File('../node_modules/@capacitor-firebase/authentication/android')
+
 include ':capacitor-dialog'
 project(':capacitor-dialog').projectDir = new File('../node_modules/@capacitor/dialog/android')

--- a/android/variables.gradle
+++ b/android/variables.gradle
@@ -13,4 +13,5 @@ ext {
    androidxJunitVersion = '1.1.5'
    androidxEspressoCoreVersion = '3.5.1'
    cordovaAndroidVersion = '10.1.1'
-}
+    rgcfaIncludeGoogle = true
+}
--- a/capacitor.config.ts
+++ b/capacitor.config.ts
@@ -10,6 +10,10 @@ const config: CapacitorConfig = {
  plugins: {
    Keyboard: {
      resize: 'native'
+    },
+    FirebaseAuthentication: {
+      skipNativeAuth: false,
+      providers: ['google.com']
    }
  }
 }
--- a/ios/App/Podfile
+++ b/ios/App/Podfile
@@ -11,6 +11,7 @@ install! 'cocoapods', :disable_input_output_paths => true
 def capacitor_pods
  pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
  pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
+  pod 'CapacitorFirebaseAuthentication', :path => '../../node_modules/@capacitor-firebase/authentication'
  pod 'CapacitorDialog', :path => '../../node_modules/@capacitor/dialog'
  pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics'
  pod 'CapacitorKeyboard', :path => '../../node_modules/@capacitor/keyboard'
@@ -20,8 +21,21 @@ end
 target 'App' do
  capacitor_pods
  # Add your Pods here
+  pod 'CapacitorFirebaseAuthentication/Google', :path => '../../node_modules/@capacitor-firebase/authentication'
 end

 post_install do |installer|
  assertDeploymentTarget(installer)
 end
+
+post_install do |installer|
+  installer.pods_project.targets.each do |target|
+      target.build_configurations.each do |config|
+          if target.respond_to?(:product_type) and target.product_type == "com.apple.product-type.bundle"
+              target.build_configurations.each do |config|
+                  config.build_settings['CODE_SIGNING_ALLOWED'] = 'NO'
+              end
+          end
+      end
+  end
+end
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
      "name": "contexted-v3",
      "version": "0.1.0",
      "dependencies": {
+        "@capacitor-firebase/authentication": "^5.0.0",
        "@capacitor/android": "^5.0.4",
        "@capacitor/core": "^5.0.4",
        "@capacitor/dialog": "^5.0.2",
@@ -33,7 +34,7 @@
        "@vueuse/core": "^10.1.2",
        "crypto-js": "^4.1.1",
        "cytoscape": "^3.25.0",
-        "daisyui": "^3.0.2",
+        "daisyui": "^3.0.3",
        "date-fns": "^2.29.3",
        "dompurify": "^3.0.2",
        "file-saver": "^2.0.5",
@@ -124,6 +125,30 @@
        "node": ">=6.0.0"
      }
    },
+    "node_modules/@capacitor-firebase/authentication": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@capacitor-firebase/authentication/-/authentication-5.0.0.tgz",
+      "integrity": "sha512-Dj41lzpMyvB5IzoGxrs7RCi8JZUblTZSzs8c/LdF34V7OVq1SqIX4kejtW6DawUJRbZE43xAe3DMNtusYxLaCg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/capawesome-team/"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/capawesome"
+        }
+      ],
+      "peerDependencies": {
+        "@capacitor/core": "^5.0.0",
+        "firebase": "^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "firebase": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@capacitor/android": {
      "version": "5.0.4",
      "resolved": "https://registry.npmjs.org/@capacitor/android/-/android-5.0.4.tgz",
@@ -4812,9 +4837,9 @@
      }
    },
    "node_modules/daisyui": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.0.2.tgz",
-      "integrity": "sha512-0X+0PkgTIWevt5m4AZCCgvqI5pKRormTEhdfmc31dwfLNq6uY4wENCXAtcXzZMKt7JBKcVTWlj/uDrOjj6XpUQ==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.0.3.tgz",
+      "integrity": "sha512-RSbXsEBj2LonvjOKEI0I64F5xFJrFrthPgxRNeAZKmACQ3NoIoP45lO6UXLW3bm8PVOUGpKf1Br2SWwc1NqnHQ==",
      "dependencies": {
        "colord": "^2.9",
        "css-selector-tokenizer": "^0.8",
@@ -13278,6 +13303,12 @@
      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.4.tgz",
      "integrity": "sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw=="
    },
+    "@capacitor-firebase/authentication": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@capacitor-firebase/authentication/-/authentication-5.0.0.tgz",
+      "integrity": "sha512-Dj41lzpMyvB5IzoGxrs7RCi8JZUblTZSzs8c/LdF34V7OVq1SqIX4kejtW6DawUJRbZE43xAe3DMNtusYxLaCg==",
+      "requires": {}
+    },
    "@capacitor/android": {
      "version": "5.0.4",
      "resolved": "https://registry.npmjs.org/@capacitor/android/-/android-5.0.4.tgz",
@@ -16776,9 +16807,9 @@
      }
    },
    "daisyui": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.0.2.tgz",
-      "integrity": "sha512-0X+0PkgTIWevt5m4AZCCgvqI5pKRormTEhdfmc31dwfLNq6uY4wENCXAtcXzZMKt7JBKcVTWlj/uDrOjj6XpUQ==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.0.3.tgz",
+      "integrity": "sha512-RSbXsEBj2LonvjOKEI0I64F5xFJrFrthPgxRNeAZKmACQ3NoIoP45lO6UXLW3bm8PVOUGpKf1Br2SWwc1NqnHQ==",
      "requires": {
        "colord": "^2.9",
        "css-selector-tokenizer": "^0.8",
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
    "deploy": "npm run build && firebase deploy --only hosting:contexted-v3"
  },
  "dependencies": {
+    "@capacitor-firebase/authentication": "^5.0.0",
    "@capacitor/android": "^5.0.4",
    "@capacitor/core": "^5.0.4",
    "@capacitor/dialog": "^5.0.2",
@@ -40,7 +41,7 @@
    "@vueuse/core": "^10.1.2",
    "crypto-js": "^4.1.1",
    "cytoscape": "^3.25.0",
-    "daisyui": "^3.0.2",
+    "daisyui": "^3.0.3",
    "date-fns": "^2.29.3",
    "dompurify": "^3.0.2",
    "file-saver": "^2.0.5",
--- 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>