feat: manual biometrics and background lock

apps/easypid/src/app/_layout.tsx

@@ -1,4 +1,10 @@
-import { NoInternetToastProvider, Provider, useTransparentNavigationBar } from '@package/app'
+import {
+  BackgroundLockProvider,
+  DeeplinkHandler,
+  NoInternetToastProvider,
+  Provider,
+  useTransparentNavigationBar,
+} from '@package/app'
 import { SecureUnlockProvider } from '@package/secure-store/secureUnlock'
 import { DefaultTheme, ThemeProvider } from '@react-navigation/native'
 import { Slot } from 'expo-router'
@@ -28,9 +34,13 @@ export default function RootLayout() {
             },
           }}
         >
-          <NoInternetToastProvider>
-            <Slot />
-          </NoInternetToastProvider>
+          <BackgroundLockProvider>
+            <NoInternetToastProvider>
+              <DeeplinkHandler>
+                <Slot />
+              </DeeplinkHandler>
+            </NoInternetToastProvider>
+          </BackgroundLockProvider>
         </ThemeProvider>
       </SecureUnlockProvider>
     </Provider>

apps/easypid/src/app/authenticate.tsx

@@ -3,7 +3,15 @@ import { Redirect } from 'expo-router'
 import { WalletInvalidKeyError } from '@credo-ts/core'
 import { initializeAppAgent, useSecureUnlock } from '@easypid/agent'
 import { secureWalletKey } from '@package/secure-store/secureUnlock'
-import { FlexPage, Heading, HeroIcons, PinDotsInput, type PinDotsInputRef, YStack } from '@package/ui'
+import {
+  FlexPage,
+  Heading,
+  HeroIcons,
+  PinDotsInput,
+  type PinDotsInputRef,
+  YStack,
+  useToastController,
+} from '@package/ui'
 import * as SplashScreen from 'expo-splash-screen'
 import { useEffect, useRef, useState } from 'react'
 import { Circle } from 'tamagui'
@@ -15,17 +23,19 @@ import { useResetWalletDevMenu } from '../utils/resetWallet'
 export default function Authenticate() {
   useResetWalletDevMenu()
 
+  const toast = useToastController()
   const secureUnlock = useSecureUnlock()
   const pinInputRef = useRef<PinDotsInputRef>(null)
   const [isInitializingAgent, setIsInitializingAgent] = useState(false)
   const isLoading =
     secureUnlock.state === 'acquired-wallet-key' || (secureUnlock.state === 'locked' && secureUnlock.isUnlocking)
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: canTryUnlockingUsingBiometrics not needed
   useEffect(() => {
     if (secureUnlock.state === 'locked' && secureUnlock.canTryUnlockingUsingBiometrics) {
       secureUnlock.tryUnlockingUsingBiometrics()
     }
-  }, [secureUnlock])
+  }, [])
 
   useEffect(() => {
     if (secureUnlock.state !== 'acquired-wallet-key') return
@@ -62,6 +72,18 @@ export default function Authenticate() {
 
   void SplashScreen.hideAsync()
 
+  const unlockUsingBiometrics = async () => {
+    if (secureUnlock.state === 'locked') {
+      secureUnlock.tryUnlockingUsingBiometrics()
+    } else {
+      toast.show('You PIN is required to unlock the app', {
+        customData: {
+          preset: 'danger',
+        },
+      })
+    }
+  }
+
   const unlockUsingPin = async (pin: string) => {
     if (secureUnlock.state !== 'locked') return
     await secureUnlock.unlockUsingPin(pin)
@@ -82,6 +104,7 @@ export default function Authenticate() {
         ref={pinInputRef}
         pinLength={6}
         onPinComplete={unlockUsingPin}
+        onBiometricsTap={unlockUsingBiometrics}
         useNativeKeyboard={false}
       />
     </FlexPage>

packages/app/src/provider/BackgroundLockProvider.tsx

@@ -0,0 +1,39 @@
+import type { PropsWithChildren } from 'react'
+
+import { useSecureUnlock } from '@package/secure-store/secure-wallet-key/SecureUnlockProvider'
+import { useEffect, useRef } from 'react'
+import React from 'react'
+import { AppState, type AppStateStatus } from 'react-native'
+
+const BACKGROUND_TIME_THRESHOLD = 3000 // FIXME
+
+export function BackgroundLockProvider({ children }: PropsWithChildren) {
+  const secureUnlock = useSecureUnlock()
+  const backgroundTimeRef = useRef<Date | null>(null)
+
+  useEffect(() => {
+    const handleAppStateChange = (nextAppState: AppStateStatus) => {
+      if (nextAppState === 'background' || nextAppState === 'inactive') {
+        backgroundTimeRef.current = new Date()
+      } else if (nextAppState === 'active') {
+        if (backgroundTimeRef.current) {
+          const timeInBackground = new Date().getTime() - backgroundTimeRef.current.getTime()
+
+          if (timeInBackground > BACKGROUND_TIME_THRESHOLD && secureUnlock.state === 'unlocked') {
+            console.log('App was in background for more than 30 seconds, locking')
+            secureUnlock.lock()
+          }
+          backgroundTimeRef.current = null
+        }
+      }
+    }
+
+    const subscription = AppState.addEventListener('change', handleAppStateChange)
+
+    return () => {
+      subscription.remove()
+    }
+  }, [secureUnlock])
+
+  return <>{children}</>
+}

packages/app/src/provider/index.ts

@@ -2,3 +2,4 @@ export * from './Provider'
 export * from './ToastViewport'
 export * from './NoInternetToastProvider'
 export * from './ModalProvider'
+export * from './BackgroundLockProvider'

packages/app/src/utils/DeeplinkHandler.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
 import type { ReactNode } from 'react'
 
-import { InvitationQrTypes, type InvitationType } from '@package/agent'
+import { InvitationQrTypes } from '@package/agent'
 import { useToastController } from '@package/ui'
 import { CommonActions } from '@react-navigation/native'
 import * as Linking from 'expo-linking'

packages/ui/src/components/PinDotsInput.tsx

@@ -17,6 +17,7 @@ interface PinDotsInputProps {
   onPinComplete: (pin: string) => void
   isLoading?: boolean
   useNativeKeyboard?: boolean
+  onBiometricsTap?: () => void
 }
 
 export interface PinDotsInputRef {
@@ -28,7 +29,7 @@ export interface PinDotsInputRef {
 
 export const PinDotsInput = forwardRef(
   (
-    { onPinComplete, pinLength, isLoading, useNativeKeyboard = true }: PinDotsInputProps,
+    { onPinComplete, pinLength, isLoading, useNativeKeyboard = true, onBiometricsTap }: PinDotsInputProps,
     ref: ForwardedRef<PinDotsInputRef>
   ) => {
     const [pin, setPin] = useState('')
@@ -95,6 +96,11 @@ export const PinDotsInput = forwardRef(
         return
       }
 
+      if (character === PinValues.Biometrics && onBiometricsTap) {
+        onBiometricsTap()
+        return
+      }
+
       setPin((currentPin) => {
         const newPin = currentPin + character
 
@@ -156,7 +162,11 @@ export const PinDotsInput = forwardRef(
             secureTextEntry
           />
         ) : (
-          <PinPad onPressPinNumber={onPressPinNumber} disabled={isInLoadingState} />
+          <PinPad
+            onPressPinNumber={onPressPinNumber}
+            disabled={isInLoadingState}
+            useBiometricsPad={!!onBiometricsTap}
+          />
         )}
       </YStack>
     )

packages/ui/src/components/PinPad.tsx

@@ -1,4 +1,4 @@
-import { Text, useTheme } from 'tamagui'
+import { Text } from 'tamagui'
 import { Stack, XStack, YStack } from '../base'
 import { HeroIcons } from '../content'
 
@@ -12,10 +12,12 @@ export enum PinValues {
   Seven = '7',
   Eight = '8',
   Nine = '9',
-  Empty = '',
   Zero = '0',
   Backspace = 'backspace',
+  Empty = '',
+  Biometrics = 'biometrics',
 }
+
 const letterMap: Record<PinValues, string> = {
   [PinValues.One]: '',
   [PinValues.Two]: 'abc',
@@ -27,6 +29,7 @@ const letterMap: Record<PinValues, string> = {
   [PinValues.Eight]: 'tuv',
   [PinValues.Nine]: 'wxyz',
   [PinValues.Zero]: '',
+  [PinValues.Biometrics]: '',
   [PinValues.Empty]: '',
   [PinValues.Backspace]: '',
 }
@@ -41,9 +44,10 @@ const PinNumber = ({ character, onPressPinNumber, disabled }: PinNumberProps) =>
       fg={1}
       jc="center"
       ai="center"
-      backgroundColor={character === PinValues.Backspace ? '$grey-200' : '$white'}
+      backgroundColor={
+        [PinValues.Backspace, PinValues.Biometrics, PinValues.Empty].includes(character) ? '$grey-200' : '$white'
+      }
       pressStyle={{ opacity: 0.5, backgroundColor: '$grey-100' }}
-      opacity={character === PinValues.Empty ? 0 : 1}
       onPress={() => onPressPinNumber(character)}
       disabled={disabled}
       h="$6"
@@ -53,6 +57,8 @@ const PinNumber = ({ character, onPressPinNumber, disabled }: PinNumberProps) =>
     >
       {character === PinValues.Backspace ? (
         <HeroIcons.Backspace color="$grey-900" size={24} />
+      ) : character === PinValues.Biometrics ? (
+        <HeroIcons.FingerPrint color="$grey-900" size={24} />
       ) : (
         <YStack ai="center" gap="$1">
           {/* NOTE: using fontSize $ values will crash on android due to an issue with react-native-reanimated (it seems the string value is sent to the native side, which shouldn't happen) */}
@@ -71,15 +77,16 @@ const PinNumber = ({ character, onPressPinNumber, disabled }: PinNumberProps) =>
 
 export interface PinPadProps {
   onPressPinNumber: (character: PinValues) => void
+  useBiometricsPad?: boolean
   disabled?: boolean
 }
 
-export const PinPad = ({ onPressPinNumber, disabled }: PinPadProps) => {
+export const PinPad = ({ onPressPinNumber, useBiometricsPad, disabled }: PinPadProps) => {
   const pinValues = [
     [PinValues.One, PinValues.Two, PinValues.Three],
     [PinValues.Four, PinValues.Five, PinValues.Six],
     [PinValues.Seven, PinValues.Eight, PinValues.Nine],
-    [PinValues.Empty, PinValues.Zero, PinValues.Backspace],
+    [useBiometricsPad ? PinValues.Biometrics : PinValues.Empty, PinValues.Zero, PinValues.Backspace],
   ]
 
   const pinNumbers = pinValues.map((rowItems, rowIndex) => (