fix: #893 fix immediate lock timer

app/actions/user/index.js

@@ -1,3 +1,37 @@
+// Constants
+export const LOCKED_APP = 'LOCKED_APP';
+export const AUTH_SUCCESS = 'AUTH_SUCCESS';
+export const AUTH_ERROR = 'AUTH_ERROR';
+export const INTERRUPT_BIOMETRICS = 'INTERRUPT_BIOMETRICS';
+export const LOGIN = 'LOGIN';
+export const LOGOUT = 'LOGOUT';
+
+export function interruptBiometrics() {
+  return {
+    type: INTERRUPT_BIOMETRICS,
+  };
+}
+
+export function lockApp() {
+  return {
+    type: LOCKED_APP,
+  };
+}
+
+export function authSuccess(bioStateMachineId) {
+  return {
+    type: AUTH_SUCCESS,
+    payload: { bioStateMachineId },
+  };
+}
+
+export function authError(bioStateMachineId) {
+  return {
+    type: AUTH_ERROR,
+    payload: { bioStateMachineId },
+  };
+}
+
 export function passwordSet() {
   return {
     type: 'PASSWORD_SET',
@@ -73,13 +107,13 @@ export function setNftDetectionDismissed() {
 
 export function logIn() {
   return {
-    type: 'LOGIN',
+    type: LOGIN,
   };
 }
 
 export function logOut() {
   return {
-    type: 'LOGOUT',
+    type: LOGOUT,
   };
 }
 

app/components/Nav/App/index.js

@@ -86,6 +86,8 @@ import EditAccountName from '../../Views/EditAccountName/EditAccountName';
 import WC2Manager, {
   isWC2Enabled,
 } from '../../../../app/core/WalletConnect/WalletConnectV2';
+import NavigationService from '../../../core/NavigationService';
+import LockScreen from '../../Views/LockScreen';
 
 const clearStackNavigatorOptions = {
   headerShown: false,
@@ -240,7 +242,7 @@ const App = ({ userLoggedIn }) => {
       const existingUser = await AsyncStorage.getItem(EXISTING_USER);
       try {
         if (existingUser && selectedAddress) {
-          await Authentication.appTriggeredAuth(selectedAddress);
+          await Authentication.appTriggeredAuth({ selectedAddress });
           // we need to reset the navigator here so that the user cannot go back to the login screen
           navigator.reset({ routes: [{ name: Routes.ONBOARDING.HOME_NAV }] });
         }
@@ -410,6 +412,7 @@ const App = ({ userLoggedIn }) => {
   const setNavigatorRef = (ref) => {
     if (!prevNavigator.current) {
       setNavigator(ref);
+      NavigationService.setNavigationRef(ref);
     }
   };
 
@@ -646,6 +649,11 @@ const App = ({ userLoggedIn }) => {
               component={AddNetworkFlow}
               options={{ animationEnabled: true }}
             />
+            <Stack.Screen
+              name={Routes.LOCK_SCREEN}
+              component={LockScreen}
+              options={{ gestureEnabled: false }}
+            />
           </Stack.Navigator>
         </NavigationContainer>
         {renderSplash()}

app/components/Nav/Main/MainNavigator.js

@@ -26,7 +26,6 @@ import { RevealPrivateCredential } from '../../Views/RevealPrivateCredential';
 import WalletConnectSessions from '../../Views/WalletConnectSessions';
 import OfflineMode from '../../Views/OfflineMode';
 import QrScanner from '../../Views/QRScanner';
-import LockScreen from '../../Views/LockScreen';
 import EnterPasswordSimple from '../../Views/EnterPasswordSimple';
 import ChoosePassword from '../../Views/ChoosePassword';
 import ResetPassword from '../../Views/ResetPassword';
@@ -652,7 +651,6 @@ const MainNavigator = () => (
     <Stack.Screen name="AddBookmarkView" component={AddBookmarkView} />
     <Stack.Screen name="OfflineModeView" component={OfflineModeView} />
     <Stack.Screen name={Routes.QR_SCANNER} component={QrScanner} />
-    <Stack.Screen name="LockScreen" component={LockScreen} />
     <Stack.Screen name="PaymentRequestView" component={PaymentRequestView} />
     <Stack.Screen
       name={Routes.FIAT_ON_RAMP_AGGREGATOR.ID}

app/components/Nav/Main/index.js

@@ -23,7 +23,6 @@ import Engine from '../../../core/Engine';
 import AppConstants from '../../../core/AppConstants';
 import PushNotification from 'react-native-push-notification';
 import I18n, { strings } from '../../../../locales/i18n';
-import LockManager from '../../../core/LockManager';
 import FadeOutOverlay from '../../UI/FadeOutOverlay';
 import Device from '../../../util/device';
 import BackupAlert from '../../UI/BackupAlert';
@@ -51,7 +50,6 @@ import { createStackNavigator } from '@react-navigation/stack';
 import ReviewModal from '../../UI/ReviewModal';
 import { useTheme } from '../../../util/theme';
 import RootRPCMethodsUI from './RootRPCMethodsUI';
-import usePrevious from '../../hooks/usePrevious';
 import { colors as importedColors } from '../../../styles/common';
 import {
   getNetworkImageSource,
@@ -99,13 +97,10 @@ const Main = (props) => {
 
   const backgroundMode = useRef(false);
   const locale = useRef(I18n.locale);
-  const lockManager = useRef();
   const removeConnectionStatusListener = useRef();
 
   const removeNotVisibleNotifications = props.removeNotVisibleNotifications;
 
-  const prevLockTime = usePrevious(props.lockTime);
-
   useEnableAutomaticSecurityChecks();
   useMinimumVersions();
 
@@ -261,9 +256,6 @@ const Main = (props) => {
       initForceReload();
       return;
     }
-    if (prevLockTime !== props.lockTime) {
-      lockManager.current && lockManager.current.updateLockTime(props.lockTime);
-    }
   });
 
   // Remove all notifications that aren't visible
@@ -276,7 +268,6 @@ const Main = (props) => {
       'change',
       handleAppStateChange,
     );
-    lockManager.current = new LockManager(props.navigation, props.lockTime);
     PushNotification.configure({
       requestPermissions: false,
       onNotification: (notification) => {
@@ -318,7 +309,6 @@ const Main = (props) => {
 
     return function cleanup() {
       appStateListener.remove();
-      lockManager.current.stopListening();
       removeConnectionStatusListener.current &&
         removeConnectionStatusListener.current();
     };
@@ -400,10 +390,6 @@ Main.propTypes = {
    * Object that represents the navigator
    */
   navigation: PropTypes.object,
-  /**
-   * Time to auto-lock the app after it goes in background mode
-   */
-  lockTime: PropTypes.number,
   /**
    * Dispatch showing a transaction notification
    */
@@ -444,7 +430,6 @@ Main.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  lockTime: state.settings.lockTime,
   thirdPartyApiMode: state.privacy.thirdPartyApiMode,
   providerType: selectProviderType(state),
 });

app/components/UI/DrawerView/index.js

@@ -533,7 +533,7 @@ class DrawerView extends PureComponent {
           'ManualBackupStep2',
           'ManualBackupStep3',
           'Webview',
-          'LockScreen',
+          Routes.LOCK_SCREEN,
         ].includes(route)
       ) {
         this.state.showProtectWalletModal &&
@@ -581,7 +581,7 @@ class DrawerView extends PureComponent {
     if (
       pendingDeeplink &&
       KeyringController.isUnlocked() &&
-      route !== 'LockScreen'
+      route !== Routes.LOCK_SCREEN
     ) {
       DeeplinkManager.expireDeeplink();
       DeeplinkManager.parse(pendingDeeplink, {

app/components/Views/LockScreen/__snapshots__/index.test.tsx.snap

@@ -32,6 +32,6 @@ exports[`LockScreen should render correctly 1`] = `
     }
   }
 >
-  <Component />
+  <LockScreenFCWrapper />
 </ContextProvider>
 `;

app/components/Views/LockScreen/index.js

@@ -75,93 +75,73 @@ class LockScreen extends PureComponent {
      * The navigator object
      */
     navigation: PropTypes.object,
-    /**
-     * Boolean flag that determines if password has been set
-     */
-    passwordSet: PropTypes.bool,
     selectedAddress: PropTypes.string,
     appTheme: PropTypes.string,
+    /**
+     * ID associated with each biometric session.
+     * This is used by the biometric sagas to handle actions with the matching ID.
+     */
+    bioStateMachineId: PropTypes.string,
   };
 
   state = {
     ready: false,
   };
 
-  appState = 'active';
   locked = true;
   timedOut = false;
   firstAnimation = React.createRef();
   secondAnimation = React.createRef();
   animationName = React.createRef();
   opacity = new Animated.Value(1);
-  unlockAttempts = 0;
   appStateListener;
 
   componentDidMount() {
-    // Check if is the app is launching or it went to background mode
-    this.appState = 'background';
     this.appStateListener = AppState.addEventListener(
       'change',
       this.handleAppStateChange,
     );
-    this.mounted = true;
   }
 
   handleAppStateChange = async (nextAppState) => {
-    // Try to unlock when coming from the background
-    if (
-      this.locked &&
-      this.appState !== 'active' &&
-      nextAppState === 'active'
-    ) {
+    // Trigger biometrics
+    if (nextAppState === 'active') {
       this.firstAnimation?.play();
-      this.appState = nextAppState;
-      // Avoid trying to unlock with the app in background
       this.unlockKeychain();
+      this.appStateListener?.remove();
     }
   };
 
   componentWillUnmount() {
-    this.mounted = false;
     this.appStateListener?.remove();
   }
 
-  lock = async () => {
-    await Authentication.lockApp(false);
-    this.props.navigation.navigate(Routes.ONBOARDING.LOGIN);
+  lock = () => {
+    // Replace action reverts the nav state back to original state prior to logging in.
+    // Replace is used intentionally. Do not use navigate.
+    this.props.navigation.replace(Routes.ONBOARDING.LOGIN);
+    // Do not need to await since it's the last action.
+    Authentication.lockApp(false);
   };
 
   async unlockKeychain() {
-    this.unlockAttempts++;
+    const { bioStateMachineId } = this.props;
     try {
       // Retreive the credentials
       Logger.log('Lockscreen::unlockKeychain - getting credentials');
-      await Authentication.appTriggeredAuth(this.props.selectedAddress);
-      this.locked = false;
+      await Authentication.appTriggeredAuth({
+        selectedAddress: this.props.selectedAddress,
+        bioStateMachineId,
+        disableAutoLogout: true,
+      });
       this.setState({ ready: true });
       Logger.log('Lockscreen::unlockKeychain - state: ready');
-      this.secondAnimation?.play();
-      this.animationName?.play();
-      Logger.log('Lockscreen::unlockKeychain - playing animations');
-
-      if (!this.props.passwordSet) {
-        this.props.navigation.navigate('OnboardingRootNav', {
-          screen: Routes.ONBOARDING.NAV,
-          params: { screen: 'Onboarding' },
-        });
-      }
-      this.props.navigation.navigate(Routes.ONBOARDING.HOME_NAV);
     } catch (error) {
-      if (this.unlockAttempts <= 3) {
-        this.unlockKeychain();
-      } else {
-        trackErrorAsAnalytics(
-          'Lockscreen: Max Attempts Reached',
-          error?.message,
-          `Unlock attempts: ${this.unlockAttempts}`,
-        );
-        this.lock();
-      }
+      this.lock();
+      trackErrorAsAnalytics(
+        'Lockscreen: Authentication failed',
+        error?.message,
+      );
     }
   }
 
@@ -173,7 +153,9 @@ class LockScreen extends PureComponent {
         useNativeDriver: true,
         isInteraction: false,
       }).start(() => {
-        this.props.navigation.goBack();
+        this.props.navigation.navigate(Routes.ONBOARDING.HOME_NAV, {
+          screen: Routes.WALLET_VIEW,
+        });
       });
     }, 100);
   };
@@ -246,11 +228,31 @@ class LockScreen extends PureComponent {
 }
 
 const mapStateToProps = (state) => ({
-  passwordSet: state.user.passwordSet,
   selectedAddress: selectSelectedAddress(state),
   appTheme: state.user.appTheme,
 });
 
 LockScreen.contextType = ThemeContext;
 
-export default connect(mapStateToProps)(LockScreen);
+const ConnectedLockScreen = connect(mapStateToProps)(LockScreen);
+
+// Wrapper that forces LockScreen to re-render when bioStateMachineId changes.
+const LockScreenFCWrapper = (props) => {
+  const { bioStateMachineId } = props.route.params;
+  return (
+    <ConnectedLockScreen
+      key={bioStateMachineId}
+      bioStateMachineId={bioStateMachineId}
+      {...props}
+    />
+  );
+};
+
+LockScreenFCWrapper.propTypes = {
+  /**
+   * Navigation object that holds params including bioStateMachineId.
+   */
+  route: PropTypes.object,
+};
+
+export default LockScreenFCWrapper;

app/components/Views/Login/index.js

@@ -449,7 +449,9 @@ class Login extends PureComponent {
     const { current: field } = this.fieldRef;
     field?.blur();
     try {
-      await Authentication.appTriggeredAuth(this.props.selectedAddress);
+      await Authentication.appTriggeredAuth({
+        selectedAddress: this.props.selectedAddress,
+      });
       const onboardingWizard = await DefaultPreference.get(ONBOARDING_WIZARD);
       if (!onboardingWizard) this.props.setOnboardingWizardStep(1);
       this.props.navigation.replace(Routes.ONBOARDING.HOME_NAV);

app/components/Views/RestoreWallet/WalletRestored.tsx

@@ -49,7 +49,7 @@ const WalletRestored = () => {
 
   const finishWalletRestore = useCallback(async (): Promise<void> => {
     try {
-      await Authentication.appTriggeredAuth(selectedAddress);
+      await Authentication.appTriggeredAuth({ selectedAddress });
       navigation.replace(Routes.ONBOARDING.HOME_NAV);
     } catch (e) {
       // we were not able to log in automatically so we will go back to login