From 159dbfe8d49cb27d8cf0ecd7dcfc79c073bde617 Mon Sep 17 00:00:00 2001
From: Nichole Martinez <101313323+nicholemnl@users.noreply.github.com>
Date: Mon, 21 Mar 2022 13:19:12 +0800
Subject: [PATCH] Fix auth with Biometrics logic and validations

---
 machines/auth.ts                     |  5 +-
 machines/biometrics.ts               | 10 ++--
 screens/AuthScreen.tsx               | 16 +++++-
 screens/AuthScreenController.ts      | 78 ++++++++++++++++++++--------
 screens/BiometricScreen.tsx          | 68 ++++--------------------
 screens/BiometricScreenController.ts | 48 +++++++++--------
 screens/WelcomeScreenController.ts   |  5 +-
 7 files changed, 117 insertions(+), 113 deletions(-)

diff --git a/machines/auth.ts b/machines/auth.ts
index 20e2a381..17b1631f 100644
--- a/machines/auth.ts
+++ b/machines/auth.ts
@@ -55,6 +55,7 @@ export const authMachine = model.createMachine(
       checkingAuth: {
         always: [
           { cond: 'hasPasscodeSet', target: 'unauthorized' },
+          { cond: 'hasBiometricSet', target: 'unauthorized' },
           { target: 'settingUp' },
         ],
       },
@@ -64,7 +65,6 @@ export const authMachine = model.createMachine(
             target: 'authorized',
             actions: ['setPasscode', 'storeContext'],
           },
-          // TODO: biometrics login
           SETUP_BIOMETRICS: {
             target: 'authorized',
             actions: ['setBiometrics', 'storeContext'],
@@ -109,7 +109,7 @@ export const authMachine = model.createMachine(
       }),
 
       setBiometrics: model.assign({
-        biometrics: '', // TODO
+        biometrics: () => 'true',
       }),
     },
 
@@ -117,6 +117,7 @@ export const authMachine = model.createMachine(
       hasData: (_, event: StoreResponseEvent) => event.response != null,
 
       hasPasscodeSet: (context) => context.passcode !== '',
+      hasBiometricSet: (context) => context.biometrics !== ''
     },
   }
 );
diff --git a/machines/biometrics.ts b/machines/biometrics.ts
index b2cb648d..65fa5b6f 100644
--- a/machines/biometrics.ts
+++ b/machines/biometrics.ts
@@ -1,6 +1,6 @@
 import { createModel } from "xstate/lib/model";
 import * as LocalAuthentication from 'expo-local-authentication';
-import { assign, send, StateFrom } from "xstate";
+import { assign, StateFrom } from "xstate";
 
 
 // --- CREATE MODEL -----------------------------------------------------------
@@ -90,9 +90,11 @@ export const biometricsMachine = model.createMachine(
       authenticating: {
         invoke: {
           src: () => async () => {
-            console.log('authenticating invoked');
-            let res = await LocalAuthentication.authenticateAsync()
-            console.log("authenticating result", res)
+            console.log('[BIOMETRIC_MACHINE] authenticating invoked');
+            let res = await LocalAuthentication.authenticateAsync({
+              promptMessage: 'Biometric Authentication',
+            })
+            console.log("[BIOMETRIC_MACHINE] authenticating result", res)
             return res.success;
           },
           onError: 'failure',
diff --git a/screens/AuthScreen.tsx b/screens/AuthScreen.tsx
index 7ffc6563..51ad24f5 100644
--- a/screens/AuthScreen.tsx
+++ b/screens/AuthScreen.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Icon } from 'react-native-elements';
+import { MessageOverlay } from '../components/MessageOverlay';
 import { Button, Centered, Column, Text } from '../components/ui';
 import { Colors } from '../components/ui/styleUtils';
 import { RootRouteProps } from '../routes';
@@ -7,9 +8,15 @@ import { useAuthScreen } from './AuthScreenController';
 
 export const AuthScreen: React.FC<RootRouteProps> = (props) => {
   const controller = useAuthScreen(props);
-  console.log('-------->CONTROLLER', controller)
+  // console.log('-------->CONTROLLER', controller)
+
   return (
     <Column fill padding="32" backgroundColor={Colors.White}>
+      <MessageOverlay
+        isVisible={controller.hasAlertMsg != null}
+        onBackdropPress={controller.hideAlert}
+        title={controller.hasAlertMsg}
+      />
       <Column>
         <Text align="center">
           Would you like to use biometrics{'\n'}to unlock the application?
@@ -19,7 +26,12 @@ export const AuthScreen: React.FC<RootRouteProps> = (props) => {
         <Icon name="fingerprint" size={180} color={Colors.Orange} />
       </Centered>
       <Column>
-        <Button title="Use biometrics" margin="0 0 8 0" disabled={!controller.hasBiometric} onPress={controller.useBiometrics} />
+        <Button
+          title="Use biometrics"
+          margin="0 0 8 0"
+          disabled={!controller.enableBiometric}
+          onPress={controller.useBiometrics}
+        />
         <Button
           type="clear"
           title="I'd rather use a passcode"
diff --git a/screens/AuthScreenController.ts b/screens/AuthScreenController.ts
index e8aa3eef..4162d2d0 100644
--- a/screens/AuthScreenController.ts
+++ b/screens/AuthScreenController.ts
@@ -1,40 +1,74 @@
-import { useSelector } from '@xstate/react';
+import { useInterpret, useMachine, useSelector } from '@xstate/react';
 import { useContext, useEffect, useState } from 'react';
-import * as LocalAuthentication from 'expo-local-authentication';
-import { selectSettingUp } from '../machines/auth';
+import { AuthEvents, selectSettingUp, selectAuthorized } from '../machines/auth';
 import { RootRouteProps } from '../routes';
 import { GlobalContext } from '../shared/GlobalContext';
+import { biometricsMachine, selectIsEnabled } from '../machines/biometrics';
 
 export function useAuthScreen(props: RootRouteProps) {
   const { appService } = useContext(GlobalContext);
   const authService = appService.children.get('auth');
-  const [hasBiometric, setHasBiometric] = useState(null);
+  const [hasAlertMsg, setHasAlertMsg] = useState(null);
 
   const isSettingUp = useSelector(authService, selectSettingUp);
+  const isAuthorized = useSelector(authService, selectAuthorized);
+
+  const biometricService = useInterpret(biometricsMachine);
+  const [biometricState, biometricSend] = useMachine(biometricsMachine);
+
+  const enableBiometric:boolean = useSelector(biometricService, selectIsEnabled);
 
   useEffect(() => {
-    (async () => {
-      const response = await LocalAuthentication.hasHardwareAsync();
-      console.log('-------> biometrics response', response);
-      setHasBiometric(response);
-      const available = await LocalAuthentication.supportedAuthenticationTypesAsync();
-      console.log('-------> biometrics supported', available);
-      const enrolled = await LocalAuthentication.isEnrolledAsync();
-      console.log('-------> biometrics enrolled', enrolled);
-      const enrollLevel = await LocalAuthentication.getEnrolledLevelAsync();
-      console.log('-------> biometrics enrollLevel', enrollLevel);
-    })();
-  }, [])
+
+    if (isAuthorized) {
+      props.navigation.reset({
+        index: 0,
+        routes: [{ name: 'Main' }],
+      });
+      return
+    }
+
+    console.log("[BIOMETRICS] value", biometricState.value);
+    console.log("[BIOMETRICS] context", biometricState.context);
+
+    // if biometic state is success then lets send auth service BIOMETRICS
+    if (biometricState.matches('success')) {
+      authService.send(AuthEvents.SETUP_BIOMETRICS());
+      return;
+    }
+
+    // handle biometric failure
+    if (biometricState.matches('failure')) {
+
+      // we dont need to see this page to user once biometric is unavailable on its device
+      if (biometricState.matches({ failure: 'unavailable' })) {
+        props.navigation.navigate('Passcode', { setup: isSettingUp });
+        return;
+      }
+
+      // show alert message whenever biometric state gets failure
+      setHasAlertMsg(Object.values(biometricState.meta).join(', '));
+    }
+
+  }, [isAuthorized, biometricState]);
+
+
+  const useBiometrics = () => {
+    biometricSend({ type: 'AUTHENTICATE' });
+  };
+
+  const hideAlert = () => {
+    setHasAlertMsg(null);
+  }
 
   return {
     isSettingUp,
-
-    hasBiometric,
-    useBiometrics: () => {
-      props.navigation.navigate('Biometric', { setup: isSettingUp });
-    },
+    hasAlertMsg,
+    enableBiometric,
+    hideAlert,
+    useBiometrics,
     usePasscode: () => {
       props.navigation.navigate('Passcode', { setup: isSettingUp });
-    },
+    }
   };
 }
diff --git a/screens/BiometricScreen.tsx b/screens/BiometricScreen.tsx
index 75df3cc9..d136d502 100644
--- a/screens/BiometricScreen.tsx
+++ b/screens/BiometricScreen.tsx
@@ -1,74 +1,24 @@
-import React, { useEffect, useState } from 'react';
-import { View, StyleSheet, TouchableOpacity, Alert, Platform } from 'react-native';
-import Constants  from 'expo-constants';
-import  * as  LocalAuthentication from 'expo-local-authentication';
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
 import { Icon } from 'react-native-elements';
-import { Column, Text } from '../components/ui';
+import { Centered, Column } from '../components/ui';
 import { Colors } from '../components/ui/styleUtils';
 import { RootRouteProps } from '../routes';
 import { useBiometricScreen } from './BiometricScreenController';
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'space-around',
-    paddingTop: Constants.statusBarHeight,
-    backgroundColor: '#ecf0f1',
-  },
-  text: {
-    fontSize: 18,
-    textAlign: 'center',
-  },
-  button: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: 150,
-    height: 60,
-    backgroundColor: '#056ecf',
-    borderRadius: 5,
-  },
-  buttonText: {
-    fontSize: 30,
-    color: '#fff',
-  },
-});
 
 export const BiometricScreen: React.FC<RootRouteProps> = (props) => {
   const controller = useBiometricScreen(props);
-  const [savedFingerprints, setSavedFingerprints] = useState(null);
-  const [results, setResults] = useState(null)
-
-  const handleBiometricAuth = async () => {
-    const savedBiometrics = await LocalAuthentication.isEnrolledAsync();
-    setSavedFingerprints(savedBiometrics)
-  }
-
-  const scanFingerprint = async () => {
-    let results = await LocalAuthentication.authenticateAsync();
-    console.log('---------->RESULTS', results)
-    if (results.success) {
-      alert("success!");
-    } else {
-      alert("fail");
-    }
-  };
 
   return (
     <Column fill padding="32" backgroundColor={Colors.White}>
-      <Text>Scan your finger</Text>
-      <View style={styles.container}>
-        <Text style={styles.text}>
-          Fingerprints Saved?{' '}
-          {savedFingerprints === true ? 'True' : 'False'}
-        </Text>
-        <TouchableOpacity
-          onPress={scanFingerprint}
-          style={styles.button}>
-          <Text style={styles.buttonText}>SCAN</Text>
+
+      <Centered fill>
+        <TouchableOpacity onPress={controller.useBiometrics}>
+          <Icon name="fingerprint" size={180} color={Colors.Orange} />
         </TouchableOpacity>
-        <Text>{results}</Text>
-      </View>
+      </Centered>
+
     </Column>
   );
 };
diff --git a/screens/BiometricScreenController.ts b/screens/BiometricScreenController.ts
index 4e5be164..94da7fd8 100644
--- a/screens/BiometricScreenController.ts
+++ b/screens/BiometricScreenController.ts
@@ -1,17 +1,17 @@
-import { useSelector } from '@xstate/react';
-import { useContext, useEffect, useState } from 'react';
-import { AuthEvents, selectAuthorized, selectBiometrics } from '../machines/auth';
-import { RouteProps } from '../routes';
+import { useMachine, useSelector } from '@xstate/react';
+import { useContext, useEffect } from 'react';
+import { AuthEvents, selectAuthorized } from '../machines/auth';
+import { RootRouteProps } from '../routes';
 import { GlobalContext } from '../shared/GlobalContext';
+import { biometricsMachine } from '../machines/biometrics';
 
-export function useBiometricScreen(props: RouteProps) {
+export function useBiometricScreen(props: RootRouteProps) {
   const { appService } = useContext(GlobalContext);
   const authService = appService.children.get('auth');
 
-  const isAuthorized = useSelector(authService, selectAuthorized);
+  const [biometricState, biometricSend] = useMachine(biometricsMachine);
 
-  const [biometric, setBiometric] = useState('');
-  const [error, setError] = useState('');
+  const isAuthorized = useSelector(authService, selectAuthorized);
 
   useEffect(() => {
     if (isAuthorized) {
@@ -19,23 +19,25 @@ export function useBiometricScreen(props: RouteProps) {
         index: 0,
         routes: [{ name: 'Main' }],
       });
+      return;
     }
-  }, [isAuthorized]);
+
+    console.log("[BIOMETRICS] value", biometricState.value);
+    console.log("[BIOMETRICS] context", biometricState.context);
+
+    // if biometic state is success then lets send auth service BIOMETRICS
+    if (biometricState.matches('success')) {
+      authService.send(AuthEvents.LOGIN());
+      return;
+    }
+
+  }, [isAuthorized, biometricState]);
+
+  const useBiometrics = () => {
+    biometricSend({ type: 'AUTHENTICATE' });
+  };
 
   return {
-    biometric,
-    setBiometric,
-    error,
-    setError,
-
-    storedBiometric: useSelector(authService, selectBiometrics),
-
-    LOGIN: () => {
-      authService.send(AuthEvents.LOGIN());
-    },
-
-    SETUP_BIOMETRIC: () => {
-      authService.send(AuthEvents.SETUP_BIOMETRIC(biometric));
-    },
+    useBiometrics
   };
 }
diff --git a/screens/WelcomeScreenController.ts b/screens/WelcomeScreenController.ts
index ee1201a1..f03ddd5e 100644
--- a/screens/WelcomeScreenController.ts
+++ b/screens/WelcomeScreenController.ts
@@ -1,6 +1,6 @@
 import { useSelector } from '@xstate/react';
 import { useContext } from 'react';
-import { selectPasscode, selectSettingUp } from '../machines/auth';
+import { selectBiometrics, selectPasscode, selectSettingUp } from '../machines/auth';
 import { RootRouteProps } from '../routes';
 import { GlobalContext } from '../shared/GlobalContext';
 
@@ -10,6 +10,7 @@ export function useWelcomeScreen(props: RootRouteProps) {
 
   const isSettingUp = useSelector(authService, selectSettingUp);
   const passcode = useSelector(authService, selectPasscode);
+  const biometrics = useSelector(authService, selectBiometrics);
 
   return {
     isSettingUp,
@@ -17,6 +18,8 @@ export function useWelcomeScreen(props: RootRouteProps) {
     unlockPage: () => {
       if (!isSettingUp && passcode !== '') {
         props.navigation.navigate('Passcode', { setup: isSettingUp });
+      } else if (!isSettingUp && biometrics) {
+        props.navigation.navigate('Biometric', { setup: isSettingUp });
       } else {
         props.navigation.navigate('Auth');
       }