capacitor firebase auth

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')

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')
 

android/variables.gradle

@@ -13,4 +13,5 @@ ext {
     androidxJunitVersion = '1.1.5'
     androidxEspressoCoreVersion = '3.5.1'
     cordovaAndroidVersion = '10.1.1'
-}
+    rgcfaIncludeGoogle = true
+}

capacitor.config.ts

@@ -10,6 +10,10 @@ const config: CapacitorConfig = {
   plugins: {
     Keyboard: {
       resize: 'native'
+    },
+    FirebaseAuthentication: {
+      skipNativeAuth: false,
+      providers: ['google.com']
     }
   }
 }

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

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",
+      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.0.3.tgz",
-      "integrity": "sha512-0X+0PkgTIWevt5m4AZCCgvqI5pKRormTEhdfmc31dwfLNq6uY4wENCXAtcXzZMKt7JBKcVTWlj/uDrOjj6XpUQ==",
+      "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",
+      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.0.3.tgz",
-      "integrity": "sha512-0X+0PkgTIWevt5m4AZCCgvqI5pKRormTEhdfmc31dwfLNq6uY4wENCXAtcXzZMKt7JBKcVTWlj/uDrOjj6XpUQ==",
+      "integrity": "sha512-RSbXsEBj2LonvjOKEI0I64F5xFJrFrthPgxRNeAZKmACQ3NoIoP45lO6UXLW3bm8PVOUGpKf1Br2SWwc1NqnHQ==",
       "requires": {
         "colord": "^2.9",
         "css-selector-tokenizer": "^0.8",

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",

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 firebase from 'firebase/compat/app'
-import * as firebaseui from 'firebaseui'
 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 =
+// const firebaseAuthUI =
-  firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth())
+//   firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth())
-provide('firebaseAuthUI', firebaseAuthUI)
+// provide('firebaseAuthUI', firebaseAuthUI)
 
 watch(
   [activeNotesSource, encryptionKey],

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.EmailAuthProvider.PROVIDER_ID
-    firebase.auth.GoogleAuthProvider.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>
+  <div class="space-y-2">
-  <progress
+    <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>

src/components/TopBar.vue

@@ -21,12 +21,12 @@ const emit = defineEmits<{
 
 const searchActive = ref<boolean>(false)
 
-const authUI: any = inject('firebaseAuthUI')
+// const authUI: any = inject('firebaseAuthUI')
-const authPending = ref<boolean>(authUI.isPendingRedirect())
+// 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>

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">
+            <template v-if="user?.email">
-              <div class="font-bold sm:w-4/12">E-mail address</div>
+              <div class="w-full flex-row sm:flex">
-              <div>{{ user?.email }}</div>
+                <div class="font-bold sm:w-4/12">E-mail address</div>
-            </div>
+                <div>{{ user.email }}</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>
+              <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>