Implement Biometrics Authentication

android/app/src/main/AndroidManifest.xml

@@ -15,6 +15,8 @@
   <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
   <uses-permission android:name="android.permission.VIBRATE"/>
   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+  <uses-permission android:name="android.permission.USE_BIOMETRIC" />
+  <uses-permission android:name="android.permission.USE_FINGERPRINT" />
   <queries>
     <intent>
       <action android:name="android.intent.action.VIEW"/>
@@ -28,7 +30,7 @@
     <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
     <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
     <meta-data android:name="expo.modules.updates.EXPO_UPDATE_URL" android:value="https://exp.host/@nlpaolo/mosip-resident-app"/>
-    <activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustPan" android:theme="@style/Theme.App.SplashScreen" android:screenOrientation="portrait">
+   <activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustPan" android:theme="@style/Theme.App.SplashScreen" android:screenOrientation="portrait">
       <intent-filter>
         <action android:name="android.intent.action.MAIN"/>
         <category android:name="android.intent.category.LAUNCHER"/>

machines/auth.ts

@@ -1,4 +1,5 @@
 import { ContextFrom, EventFrom, send, StateFrom } from 'xstate';
+import { log } from 'xstate/lib/actions';
 import { createModel } from 'xstate/lib/model';
 import { AppServices } from '../shared/GlobalContext';
 import { StoreEvents, StoreResponseEvent } from './store';
@@ -13,7 +14,7 @@ const model = createModel(
   {
     events: {
       SETUP_PASSCODE: (passcode: string) => ({ passcode }),
-      SETUP_BIOMETRICS: () => ({}),
+      SETUP_BIOMETRICS: (biometrics: string) => ({  biometrics }),
       LOGOUT: () => ({}),
       LOGIN: () => ({}),
       STORE_RESPONSE: (response?: unknown) => ({ response }),
@@ -23,6 +24,9 @@ const model = createModel(
 
 export const AuthEvents = model.events;
 
+
+type SetupBiometricsEvent = EventFrom<typeof model, 'SETUP_BIOMETRICS'>;
+
 export const authMachine = model.createMachine(
   {
     tsTypes: {} as import('./auth.typegen').Typegen0,
@@ -55,6 +59,7 @@ export const authMachine = model.createMachine(
       checkingAuth: {
         always: [
           { cond: 'hasPasscodeSet', target: 'unauthorized' },
+          { cond: 'hasBiometricSet', target: 'unauthorized' },
           { target: 'settingUp' },
         ],
       },
@@ -64,9 +69,9 @@ export const authMachine = model.createMachine(
             target: 'authorized',
             actions: ['setPasscode', 'storeContext'],
           },
-          // TODO: biometrics login
           SETUP_BIOMETRICS: {
-            target: 'authorized',
+            // Note! dont authorized yet we need to setup passcode too as discuss
+            // target: 'authorized',
             actions: ['setBiometrics', 'storeContext'],
           },
         },
@@ -79,6 +84,9 @@ export const authMachine = model.createMachine(
       authorized: {
         on: {
           LOGOUT: 'unauthorized',
+          SETUP_BIOMETRICS: {
+            actions: ['setBiometrics', 'storeContext'],
+          },
         },
       },
     },
@@ -109,14 +117,19 @@ export const authMachine = model.createMachine(
       }),
 
       setBiometrics: model.assign({
-        biometrics: '', // TODO
+        biometrics: (_, event: SetupBiometricsEvent) => event.biometrics,
       }),
     },
 
     guards: {
       hasData: (_, event: StoreResponseEvent) => event.response != null,
 
-      hasPasscodeSet: (context) => context.passcode !== '',
+      hasPasscodeSet: (context) => {
+        return context.passcode !== ''
+      },
+      hasBiometricSet: (context) => {
+        return context.biometrics !== ''
+      }
     },
   }
 );

machines/auth.typegen.ts

@@ -24,6 +24,7 @@ export interface Typegen0 {
   'eventsCausingGuards': {
     hasData: 'STORE_RESPONSE';
     hasPasscodeSet: '';
+    hasBiometricSet: '';
   };
   'eventsCausingDelays': {};
   'matchesStates':

machines/biometrics.ts

@@ -0,0 +1,278 @@
+import { createModel } from "xstate/lib/model";
+import * as LocalAuthentication from 'expo-local-authentication';
+import { assign, EventFrom, MetaObject, StateFrom } from "xstate";
+
+
+// ----- CREATE MODEL ---------------------------------------------------------
+const model = createModel(
+  {
+    isAvailable : false,
+    authTypes   : [],
+    isEnrolled  : false,
+    status      : null,
+    retry       : false,
+  },
+  {
+    events: {
+      SET_IS_AVAILABLE: (data: boolean) => ({ data }),
+      SET_AUTH: (data: any[]) => ({ data }),
+      SET_IS_ENROLLED: (data: boolean) => ({ data }),
+      SET_STATUS: (data: boolean) => ({ data }),
+
+      AUTHENTICATE: () => ({}),
+      RETRY_AUTHENTICATE: () => ({})
+    }
+  }
+);
+// ----------------------------------------------------------------------------
+
+
+// ----- CREATE MACHINE -------------------------------------------------------
+export const biometricsMachine = model.createMachine(
+  {
+    id: 'biometrics',
+    context: model.initialContext,
+    initial: 'init',
+    states: {
+
+      // Initializing biometrics states
+      init: {
+        invoke: {
+          src: LocalAuthentication.hasHardwareAsync,
+          onError: 'failure',
+          onDone: {
+            target: 'initAuthTypes',
+            actions: ['setIsAvailable'],
+          }
+        }
+      },
+
+      initAuthTypes: {
+        invoke: {
+          src: LocalAuthentication.supportedAuthenticationTypesAsync,
+          onError: 'failure',
+          onDone: {
+            target: 'initEnrolled',
+            actions: ['setAuthTypes'],
+          }
+        }
+      },
+
+      initEnrolled: {
+        invoke: {
+          src: LocalAuthentication.isEnrolledAsync,
+          onError: 'failure',
+          onDone: {
+            target: 'checking',
+            actions: ['setIsEnrolled']
+          }
+        }
+      },
+
+      // Checks whether we need to proceed if its available otherwise it gets to failure
+      checking: {
+        always: [
+          {
+            target: 'available',
+            cond: 'checkIfAvailable'
+          },
+          {
+            target: 'failure.unavailable',
+            cond: 'checkIfUnavailable'
+          },
+          {
+            target: 'failure.unenrolled',
+            cond: 'checkIfUnenrolled'
+          }
+        ]
+      },
+
+
+      // if available then wait for any event
+      available: {
+        on: {
+          AUTHENTICATE: 'authenticating'
+        }
+      },
+
+      // authenticating biometrics
+      authenticating: {
+        invoke: {
+          src: () => async () => {
+            let res = await LocalAuthentication.authenticateAsync({
+              promptMessage: 'Biometric Authentication',
+
+              // below can only works for IOS not android
+              // disableDeviceFallback: true,
+              // fallbackLabel: 'Invalid fingerprint attempts, Please try again.'
+            })
+            return res.success;
+          },
+          onError: 'failure',
+          onDone: {
+            target: 'authentication',
+            actions: ['setStatus']
+          }
+        },
+      },
+
+      reauthenticating: {
+        always: [
+          {
+            target: 'authenticating',
+            cond: 'checkIfAvailable'
+          },
+          {
+            target: 'failure.unenrolled'
+          }
+        ]
+      },
+
+      // checks authentication status
+      authentication: {
+        always: [
+          {
+            target: 'success',
+            cond: 'isStatusSuccess'
+          },
+          {
+            target: 'failure.failed',
+            cond: 'isStatusFail'
+          }
+        ]
+      },
+
+      success: {
+        type: 'final'
+      },
+
+      failure: {
+        initial: 'error',
+        states: {
+          unavailable: {
+            meta: {
+              message: 'Device does not support Biometrics'
+            }
+          },
+          unenrolled: {
+            meta: {
+              message: 'To use Biometrics, please enroll your fingerprint in your device settings',
+            },
+            on: {
+              RETRY_AUTHENTICATE: {
+                //actions: assign({retry: (context, event) => true}),
+                actions: ['setRetry'],
+                target: [
+                  '#biometrics.initEnrolled',
+                  '#biometrics.reauthenticating'
+                ]
+              }
+            }
+          },
+          failed: {
+            after: {
+              // after 1 seconds, transition to available
+              1000: '#biometrics.available'
+            },
+            meta: {
+              message: 'Failed to authenticate with Biometrics'
+            }
+          },
+          error: {
+            meta: {
+              message: 'There seems to be an error in Biometrics authentication'
+            }
+          },
+        }
+      }
+
+    }
+  },
+
+  {
+    actions: {
+
+      setIsAvailable: model.assign({
+        isAvailable: (_, event: SetIsAvailableEvent) => event.data
+      }),
+
+      setAuthTypes: model.assign({
+        authTypes: (_, event: SetAuthTypesEvent) => event.data
+      }),
+
+      setIsEnrolled: model.assign({
+        isEnrolled: (_, event: SetIsEnrolledEvent) => event.data
+      }),
+
+      setStatus: model.assign({
+        status: (_, event: SetStatusEvent) => event.data
+      }),
+
+      setRetry: model.assign({
+        retry: () => true
+      }),
+    },
+    guards: {
+      isStatusSuccess: ctx => ctx.status,
+      isStatusFail: ctx => !ctx.status,
+      checkIfAvailable: ctx => ctx.isAvailable && ctx.isEnrolled,
+      checkIfUnavailable: ctx => !ctx.isAvailable,
+      checkIfUnenrolled: ctx => !ctx.isEnrolled
+    }
+  }
+
+);
+
+// ----------------------------------------------------------------------------
+
+
+
+// ----- TYPES ----------------------------------------------------------------
+
+type SetStatusEvent = EventFrom<typeof model, 'SET_STATUS'>;
+type SetIsAvailableEvent = EventFrom<typeof model, 'SET_IS_AVAILABLE'>;
+type SetAuthTypesEvent = EventFrom<typeof model, 'SET_AUTH'>;
+type SetIsEnrolledEvent = EventFrom<typeof model, 'SET_IS_ENROLLED'>;
+type State = StateFrom<typeof biometricsMachine>;
+
+
+
+
+// ----- OTHER EXPORTS --------------------------------------------------------
+export const BiometricsEvents = model.events;
+
+
+export function selectFailMessage(state: State) {
+  return Object.values(state.meta)
+               .map((m: MetaObject) => m.message)
+               .join(', ');
+}
+
+export function selectIsEnabled(state: State) {
+  return state.matches('available') ||
+        state.matches({ failure: 'unenrolled' });
+}
+
+export function selectIsAvailable(state: State) {
+  return state.matches('available');
+}
+
+export function selectIsUnvailable(state: State) {
+  return state.matches({ failure: 'unavailable' });
+}
+
+export function selectIsUnenrolled(state: State) {
+  return state.matches({ failure: 'unenrolled' });
+}
+
+export function selectIsSuccess(state: State) {
+  return state.matches('success');
+}
+
+export function selectError(state: State) {
+  return state.matches({failure: 'error'}) ? selectFailMessage(state) : '';
+}
+
+export function selectUnenrolledNotice(state: State) {
+  return state.matches({ failure: 'unenrolled' }) && state.context.retry ? selectFailMessage(state) : '';
+}