feat: add authetification via password/biometric/passkey

Author: Linhead

adamant-wallets

@@ -11,6 +11,7 @@ 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')
 
 }
 

android/app/capacitor.build.gradle

@@ -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/app/src/main/AndroidManifest.xml

@@ -7,3 +7,6 @@ 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')

android/capacitor.settings.gradle

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

package-lock.json

@@ -0,0 +1,99 @@
+<template>
+  <div class="biometric-login-form">
+    <v-row align="center" justify="center" no-gutters>
+      <v-col cols="12" class="text-center">
+        <v-icon icon="mdi-fingerprint" size="64" :color="iconColor" class="mb-4" />
+
+        <h3 class="mb-4">{{ statusText }}</h3>
+
+        <v-btn v-if="showRetryButton" class="a-btn-primary" @click="authenticate">
+          {{ t('biometric_login.try_again') }}
+        </v-btn>
+
+        <div class="text-center mt-6">
+          <h3 class="a-text-regular">
+            {{ t('biometric_login.use_passphrase_hint') }}
+          </h3>
+          <v-btn class="a-btn-link mt-2" variant="text" size="small" @click="switchToPassphrase">
+            {{ t('biometric_login.use_passphrase') }}
+          </v-btn>
+        </div>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { biometricAuth } from '@/lib/auth'
+import { AuthenticationResult } from '@/lib/auth/types'
+import { useStore } from 'vuex'
+
+const { t } = useI18n()
+const store = useStore()
+
+const emit = defineEmits<{
+  (e: 'login'): void
+  (e: 'error', error: string): void
+}>()
+
+const isAuthenticating = ref(false)
+const showRetryButton = ref(false)
+const hasError = ref(false)
+
+const iconColor = computed(() => {
+  if (isAuthenticating.value) return 'primary'
+  if (hasError.value) return 'error'
+  return 'primary'
+})
+
+const statusText = computed(() => {
+  if (isAuthenticating.value) return t('biometric_login.authenticating')
+  if (hasError.value) return t('biometric_login.authentication_failed')
+  return t('biometric_login.touch_sensor')
+})
+
+const handleAuthError = (errorMessage: string) => {
+  showRetryButton.value = true
+  hasError.value = true
+  emit('error', errorMessage)
+}
+
+const authenticate = async () => {
+  isAuthenticating.value = true
+  showRetryButton.value = false
+  hasError.value = false
+
+  try {
+    const biometricResult = await biometricAuth.authorizeUser()
+
+    if (biometricResult === AuthenticationResult.Cancel) {
+      showRetryButton.value = true
+      return
+    }
+
+    if (biometricResult !== AuthenticationResult.Success) {
+      handleAuthError(t('biometric_login.authentication_failed'))
+      return
+    }
+
+    await store.dispatch('loginViaAuthentication')
+
+    emit('login')
+  } catch (error) {
+    handleAuthError(error instanceof Error ? error.message : t('biometric_login.authentication_failed'))
+  } finally {
+    isAuthenticating.value = false
+  }
+}
+
+const switchToPassphrase = () => {
+  store.commit('options/updateOption', { key: 'stayLoggedIn', value: false })
+  store.commit('options/updateOption', { key: 'authenticationMethod', value: null })
+}
+
+onMounted(() => {
+  authenticate()
+})
+</script>

package.json

@@ -0,0 +1,99 @@
+<template>
+  <div class="passkey-login-form">
+    <v-row align="center" justify="center" no-gutters>
+      <v-col cols="12" class="text-center">
+        <v-icon icon="mdi-key" size="64" :color="iconColor" class="mb-4" />
+
+        <h3 class="mb-4">{{ statusText }}</h3>
+
+        <v-btn v-if="showRetryButton" class="a-btn-primary" @click="authenticate">
+          {{ t('passkey_login.try_again') }}
+        </v-btn>
+
+        <div class="text-center mt-6">
+          <h3 class="a-text-regular">
+            {{ t('passkey_login.use_passphrase_hint') }}
+          </h3>
+          <v-btn class="a-btn-link mt-2" variant="text" size="small" @click="switchToPassphrase">
+            {{ t('passkey_login.use_passphrase') }}
+          </v-btn>
+        </div>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { passkeyAuth } from '@/lib/auth'
+import { AuthenticationResult } from '@/lib/auth/types'
+import { useStore } from 'vuex'
+
+const { t } = useI18n()
+const store = useStore()
+
+const emit = defineEmits<{
+  (e: 'login'): void
+  (e: 'error', error: string): void
+}>()
+
+const isAuthenticating = ref(false)
+const showRetryButton = ref(false)
+const hasError = ref(false)
+
+const iconColor = computed(() => {
+  if (isAuthenticating.value) return 'primary'
+  if (hasError.value) return 'error'
+  return 'primary'
+})
+
+const statusText = computed(() => {
+  if (isAuthenticating.value) return t('passkey_login.authenticating')
+  if (hasError.value) return t('passkey_login.authentication_failed')
+  return t('passkey_login.touch_sensor')
+})
+
+const handleAuthError = (errorMessage: string) => {
+  showRetryButton.value = true
+  hasError.value = true
+  emit('error', errorMessage)
+}
+
+const authenticate = async () => {
+  isAuthenticating.value = true
+  showRetryButton.value = false
+  hasError.value = false
+
+  try {
+    const passkeyResult = await passkeyAuth.authorizeUser()
+
+    if (passkeyResult === AuthenticationResult.Cancel) {
+      showRetryButton.value = true
+      return
+    }
+
+    if (passkeyResult !== AuthenticationResult.Success) {
+      handleAuthError(t('passkey_login.authentication_failed'))
+      return
+    }
+
+    await store.dispatch('loginViaAuthentication')
+
+    emit('login')
+  } catch (error) {
+    handleAuthError(error instanceof Error ? error.message : t('passkey_login.authentication_failed'))
+  } finally {
+    isAuthenticating.value = false
+  }
+}
+
+const switchToPassphrase = () => {
+  store.commit('options/updateOption', { key: 'stayLoggedIn', value: false })
+  store.commit('options/updateOption', { key: 'authenticationMethod', value: null })
+}
+
+onMounted(() => {
+  authenticate()
+})
+</script>

src/components/auth/BiometricLoginForm.vue

@@ -2,7 +2,6 @@
   <v-form ref="form" :class="classes.root" @submit.prevent="submit">
     <v-row no-gutters>
       <slot>
-        <!--     Todo: check src/components/PasswordSetDialog.vue component and consider the possibility to move common code to new component  -->
         <v-text-field
           ref="passphraseInput"
           v-model="passphrase"
@@ -63,7 +62,6 @@ import { isAxiosError } from 'axios'
 import { isAllNodesOfflineError, isAllNodesDisabledError } from '@/lib/nodes/utils/errors'
 import { mdiEye, mdiEyeOff } from '@mdi/js'
 import { useSaveCursor } from '@/hooks/useSaveCursor'
-import { NodeStatusResult } from '@/lib/nodes/abstract.node'
 
 const className = 'login-form'
 const classes = {

src/components/auth/PasskeyLoginForm.vue

@@ -60,6 +60,7 @@ import { mdiEye, mdiEyeOff } from '@mdi/js'
 import { useSaveCursor } from '@/hooks/useSaveCursor'
 import { useConsiderOffline } from '@/hooks/useConsiderOffline'
 import { NodeStatusResult } from '@/lib/nodes/abstract.node'
+import { passwordAuth } from '@/lib/auth'
 
 const className = 'login-form'
 const classes = {
@@ -106,8 +107,8 @@ const admNodesDisabled = computed(() => admNodes.value.some((node) => node.statu
 const submit = () => {
   showSpinner.value = true
 
-  return store
-    .dispatch('loginViaPassword', password.value)
+  return passwordAuth
+    .authorizeUser(password.value)
     .then(() => {
       emit('login')
     })