feat: Feat/add touch id face id passkey

android/app/capacitor.build.gradle

@@ -11,6 +11,8 @@ apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
     implementation project(':capacitor-community-file-opener')
     implementation project(':capacitor-filesystem')
+    implementation project(':capgo-capacitor-native-biometric')
+    implementation project(':capacitor-secure-storage-plugin')
 
 }
 

android/app/src/main/AndroidManifest.xml

@@ -35,4 +35,5 @@
     <uses-permission android:name="android.permission.CAMERA" />
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
     <uses-permission android:name="android.permission.VIBRATE" />
+    <uses-permission android:name="android.permission.USE_BIOMETRIC" />
 </manifest>

android/capacitor.settings.gradle

@@ -7,3 +7,9 @@ project(':capacitor-community-file-opener').projectDir = new File('../node_modul
 
 include ':capacitor-filesystem'
 project(':capacitor-filesystem').projectDir = new File('../node_modules/@capacitor/filesystem/android')
+
+include ':capgo-capacitor-native-biometric'
+project(':capgo-capacitor-native-biometric').projectDir = new File('../node_modules/@capgo/capacitor-native-biometric/android')
+
+include ':capacitor-secure-storage-plugin'
+project(':capacitor-secure-storage-plugin').projectDir = new File('../node_modules/capacitor-secure-storage-plugin/android')

package.json

@@ -43,6 +43,7 @@
     "@capacitor/android": "^7.3.0",
     "@capacitor/core": "^7.3.0",
     "@capacitor/filesystem": "^7.1.1",
+    "@capgo/capacitor-native-biometric": "^7.1.13",
     "@emoji-mart/data": "^1.2.1",
     "@klayr/codec": "^0.5.1",
     "@klayr/cryptography": "^4.1.1",
@@ -62,6 +63,7 @@
     "bitcoinjs-lib": "^6.1.7",
     "buffer": "^6.0.3",
     "bytebuffer": "^5.0.1",
+    "capacitor-secure-storage-plugin": "^0.12.0",
     "coininfo": "^5.2.1",
     "copy-to-clipboard": "^3.3.3",
     "core-js": "^3.40.0",

src/assets/styles/components/_login-form.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use '../settings/_colors.scss';
+@use '@/assets/styles/generic/_variables.scss';
 
 /**
  * Centering input text and label.

src/components/Container.vue

@@ -52,6 +52,7 @@ export default defineComponent({
   }
 
   @media #{map.get(settings.$display-breakpoints, 'sm-and-down')} {
+    margin-bottom: 40px;
     &--padding {
       padding: 0 16px 0 24px;
     }

src/components/SignInOptionsDialog.vue

@@ -0,0 +1,160 @@
+<template>
+  <v-dialog v-model="show" width="320">
+    <v-card>
+      <v-card-title class="a-text-header">
+        {{ t('login.signin_options.title') }}
+      </v-card-title>
+
+      <v-divider class="a-divider" />
+
+      <v-card-text class="pa-0">
+        <v-list>
+          <template v-for="option in authOptions" :key="option.method">
+            <v-list-item
+              avatar
+              :disabled="!option.available"
+              @click="selectAuthMethod(option.method)"
+            >
+              <template #prepend>
+                <v-icon :icon="option.icon" />
+              </template>
+
+              <v-list-item-title>{{ option.title }}</v-list-item-title>
+              <v-list-item-subtitle class="a-text-explanation-enlarged">{{
+                option.subtitle
+              }}</v-list-item-subtitle>
+            </v-list-item>
+          </template>
+        </v-list>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Capacitor } from '@capacitor/core'
+import { mdiFingerprint, mdiKeyVariant, mdiLock } from '@mdi/js'
+
+import { AuthenticationMethod } from '@/lib/auth/types'
+import { db as isIDBSupported } from '@/lib/idb'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  }
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'select-auth-method', method: AuthenticationMethod): void
+}>()
+
+const { t } = useI18n()
+
+const show = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+
+const biometricOption = computed(() => {
+  const isNative = Capacitor.isNativePlatform()
+
+  if (!isNative) {
+    return {
+      available: false,
+      subtitle: t('login.signin_options.biometric.only_native')
+    }
+  }
+
+  return {
+    available: true,
+    subtitle: t('login.signin_options.biometric.device_touchid_faceid')
+  }
+})
+
+const passkeyOption = computed(() => {
+  const isNative = Capacitor.isNativePlatform()
+  const hasWebAuthn = !!(navigator.credentials && window.PublicKeyCredential)
+
+  if (isNative) {
+    return {
+      available: false,
+      subtitle: t('login.signin_options.passkey.only_web')
+    }
+  }
+
+  if (!hasWebAuthn) {
+    return {
+      available: false,
+      subtitle: t('login.signin_options.not_available')
+    }
+  }
+
+  return {
+    available: true,
+    subtitle: t('login.signin_options.passkey.secure_login')
+  }
+})
+
+const isPasswordAvailable = ref(true)
+
+const passwordOption = computed(() => {
+  return {
+    available: isPasswordAvailable.value,
+    subtitle: isPasswordAvailable.value
+      ? t('login.signin_options.password.secure_login')
+      : t('login.signin_options.not_available')
+  }
+})
+
+const authOptions = computed(() => [
+  {
+    method: AuthenticationMethod.Biometric,
+    icon: mdiFingerprint,
+    title: t('login.signin_options.biometric.title'),
+    available: biometricOption.value.available,
+    subtitle: biometricOption.value.subtitle
+  },
+  {
+    method: AuthenticationMethod.Passkey,
+    icon: mdiKeyVariant,
+    title: t('login.signin_options.passkey.title'),
+    available: passkeyOption.value.available,
+    subtitle: passkeyOption.value.subtitle
+  },
+  {
+    method: AuthenticationMethod.Password,
+    icon: mdiLock,
+    title: t('login.signin_options.password.title'),
+    available: passwordOption.value.available,
+    subtitle: passwordOption.value.subtitle
+  }
+])
+
+onMounted(async () => {
+  try {
+    await isIDBSupported
+    isPasswordAvailable.value = true
+  } catch {
+    isPasswordAvailable.value = false
+  }
+})
+
+const selectAuthMethod = (method: AuthenticationMethod) => {
+  emit('select-auth-method', method)
+  show.value = false
+}
+</script>
+
+<style scoped>
+:deep(.v-list-item-subtitle) {
+  display: block;
+}
+</style>