From dfcc774a90346e4e46100184b54499f09cda0825 Mon Sep 17 00:00:00 2001
From: RohanSasne <rohansasne30@gmail.com>
Date: Tue, 30 Jan 2024 13:02:58 +0530
Subject: [PATCH 01/21] Add isExtraSmallScreenWidth Prop

---
 src/hooks/useWindowDimensions/index.native.ts | 2 ++
 src/hooks/useWindowDimensions/index.ts        | 2 ++
 src/hooks/useWindowDimensions/types.ts        | 1 +
 3 files changed, 5 insertions(+)

diff --git a/src/hooks/useWindowDimensions/index.native.ts b/src/hooks/useWindowDimensions/index.native.ts
index 5d556234aeb9..5b389e8aa2e1 100644
--- a/src/hooks/useWindowDimensions/index.native.ts
+++ b/src/hooks/useWindowDimensions/index.native.ts
@@ -12,6 +12,7 @@ export default function (): WindowDimensions {
     const isSmallScreenWidth = true;
     const isMediumScreenWidth = false;
     const isLargeScreenWidth = false;
+    const isExtraSmallScreenWidth = windowWidth <= variables.extraSmallMobileResponsiveWidthBreakpoint;
 
     return {
         windowWidth,
@@ -20,5 +21,6 @@ export default function (): WindowDimensions {
         isSmallScreenWidth,
         isMediumScreenWidth,
         isLargeScreenWidth,
+        isExtraSmallScreenWidth,
     };
 }
diff --git a/src/hooks/useWindowDimensions/index.ts b/src/hooks/useWindowDimensions/index.ts
index b0a29e9f901b..625bbc3c7845 100644
--- a/src/hooks/useWindowDimensions/index.ts
+++ b/src/hooks/useWindowDimensions/index.ts
@@ -14,6 +14,7 @@ export default function (): WindowDimensions {
     const isSmallScreenWidth = windowWidth <= variables.mobileResponsiveWidthBreakpoint;
     const isMediumScreenWidth = windowWidth > variables.mobileResponsiveWidthBreakpoint && windowWidth <= variables.tabletResponsiveWidthBreakpoint;
     const isLargeScreenWidth = windowWidth > variables.tabletResponsiveWidthBreakpoint;
+    const isExtraSmallScreenWidth = windowWidth <= variables.extraSmallMobileResponsiveWidthBreakpoint;
 
     return {
         windowWidth,
@@ -22,5 +23,6 @@ export default function (): WindowDimensions {
         isSmallScreenWidth,
         isMediumScreenWidth,
         isLargeScreenWidth,
+        isExtraSmallScreenWidth,
     };
 }
diff --git a/src/hooks/useWindowDimensions/types.ts b/src/hooks/useWindowDimensions/types.ts
index 9b59d4968935..5793e8f2c806 100644
--- a/src/hooks/useWindowDimensions/types.ts
+++ b/src/hooks/useWindowDimensions/types.ts
@@ -5,6 +5,7 @@ type WindowDimensions = {
     isSmallScreenWidth: boolean;
     isMediumScreenWidth: boolean;
     isLargeScreenWidth: boolean;
+    isExtraSmallScreenWidth: boolean;
 };
 
 export default WindowDimensions;

From e9ca05234e0f137629b11228622a0b706fddacb4 Mon Sep 17 00:00:00 2001
From: RohanSasne <rohansasne30@gmail.com>
Date: Tue, 30 Jan 2024 13:14:46 +0530
Subject: [PATCH 02/21] Convert steps to typescriopt

---
 .../Steps/{CodesStep.js => CodesStep.tsx}     | 63 ++++++++++--------
 .../{DisabledStep.js => DisabledStep.tsx}     |  0
 .../Steps/{EnabledStep.js => EnabledStep.tsx} |  0
 .../Steps/{SuccessStep.js => SuccessStep.tsx} | 22 +++----
 .../Steps/{VerifyStep.js => VerifyStep.tsx}   | 64 ++++++++-----------
 5 files changed, 74 insertions(+), 75 deletions(-)
 rename src/pages/settings/Security/TwoFactorAuth/Steps/{CodesStep.js => CodesStep.tsx} (74%)
 rename src/pages/settings/Security/TwoFactorAuth/Steps/{DisabledStep.js => DisabledStep.tsx} (100%)
 rename src/pages/settings/Security/TwoFactorAuth/Steps/{EnabledStep.js => EnabledStep.tsx} (100%)
 rename src/pages/settings/Security/TwoFactorAuth/Steps/{SuccessStep.js => SuccessStep.tsx} (83%)
 rename src/pages/settings/Security/TwoFactorAuth/Steps/{VerifyStep.js => VerifyStep.tsx} (77%)

diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
similarity index 74%
rename from src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
rename to src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
index 420d976dcd26..f124565db39b 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
@@ -1,7 +1,7 @@
-import React, {useEffect, useState} from 'react';
-import {ActivityIndicator, ScrollView, View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
+import React, { useEffect, useState } from 'react';
+import { ActivityIndicator, ScrollView, View } from 'react-native';
+import { withOnyx } from 'react-native-onyx';
+import type { Route } from '@src/ROUTES';
 import Button from '@components/Button';
 import FixedFooter from '@components/FixedFooter';
 import FormHelpMessage from '@components/FormHelpMessage';
@@ -18,23 +18,29 @@ import Clipboard from '@libs/Clipboard';
 import localFileDownload from '@libs/localFileDownload';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
-import {defaultAccount, TwoFactorAuthPropTypes} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
+import type TwoFactorAuthOnyxProps from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
 import * as Session from '@userActions/Session';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type { TranslationPaths } from '@src/languages/types';
 
-function CodesStep({account = defaultAccount, backTo}) {
+type CodesStepProps = TwoFactorAuthOnyxProps & {
+    /** The route to go back to when the user cancels */
+    backTo: Route | undefined;
+}
+
+function CodesStep({ account, backTo }: CodesStepProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
-    const {translate} = useLocalize();
-    const {isExtraSmallScreenWidth, isSmallScreenWidth} = useWindowDimensions();
+    const { translate } = useLocalize();
+    const { isExtraSmallScreenWidth, isSmallScreenWidth } = useWindowDimensions();
     const [error, setError] = useState('');
 
-    const {setStep} = useTwoFactorAuthContext();
+    const { setStep } = useTwoFactorAuthContext();
 
     useEffect(() => {
-        if (account.requiresTwoFactorAuth || account.recoveryCodes) {
+        if (account?.requiresTwoFactorAuth ?? account?.recoveryCodes) {
             return;
         }
         Session.toggleTwoFactorAuth(true);
@@ -62,23 +68,25 @@ function CodesStep({account = defaultAccount, backTo}) {
                     <View style={styles.mv3}>
                         <Text>{translate('twoFactorAuth.codesLoseAccess')}</Text>
                     </View>
-                    <View style={styles.twoFactorAuthCodesBox({isExtraSmallScreenWidth, isSmallScreenWidth})}>
-                        {account.isLoading ? (
+                    <View style={styles.twoFactorAuthCodesBox({ isExtraSmallScreenWidth, isSmallScreenWidth })}>
+                        {account?.isLoading ? (
                             <View style={styles.twoFactorLoadingContainer}>
                                 <ActivityIndicator color={theme.spinner} />
                             </View>
                         ) : (
                             <>
                                 <View style={styles.twoFactorAuthCodesContainer}>
-                                    {Boolean(account.recoveryCodes) &&
-                                        _.map(account.recoveryCodes.split(', '), (code) => (
+                                    {Boolean(account?.recoveryCodes) &&
+                                        (account?.recoveryCodes?.split(', ') ?? []).map((code) => (
                                             <Text
                                                 style={styles.twoFactorAuthCode}
                                                 key={code}
                                             >
                                                 {code}
                                             </Text>
-                                        ))}
+                                        ))
+                                    }
+
                                 </View>
                                 <View style={styles.twoFactorAuthCodesButtonsContainer}>
                                     <PressableWithDelayToggle
@@ -87,24 +95,30 @@ function CodesStep({account = defaultAccount, backTo}) {
                                         icon={Expensicons.Copy}
                                         inline={false}
                                         onPress={() => {
-                                            Clipboard.setString(account.recoveryCodes);
+                                            Clipboard.setString(account?.recoveryCodes ?? '');
                                             setError('');
                                             TwoFactorAuthActions.setCodesAreCopied();
                                         }}
                                         styles={[styles.button, styles.buttonMedium, styles.twoFactorAuthCodesButton]}
                                         textStyles={[styles.buttonMediumText]}
+                                        accessible={false}
+                                        tooltipText=''
+                                        tooltipTextChecked=''
                                     />
                                     <PressableWithDelayToggle
                                         text={translate('common.download')}
                                         icon={Expensicons.Download}
                                         onPress={() => {
-                                            localFileDownload('two-factor-auth-codes', account.recoveryCodes);
+                                            localFileDownload('two-factor-auth-codes', account?.recoveryCodes ?? '');
                                             setError('');
                                             TwoFactorAuthActions.setCodesAreCopied();
                                         }}
                                         inline={false}
                                         styles={[styles.button, styles.buttonMedium, styles.twoFactorAuthCodesButton]}
                                         textStyles={[styles.buttonMediumText]}
+                                        accessible={false}
+                                        tooltipText=''
+                                        tooltipTextChecked=''
                                     />
                                 </View>
                             </>
@@ -112,10 +126,10 @@ function CodesStep({account = defaultAccount, backTo}) {
                     </View>
                 </Section>
                 <FixedFooter style={[styles.mtAuto, styles.pt5]}>
-                    {!_.isEmpty(error) && (
+                    {!error && (
                         <FormHelpMessage
                             isError
-                            message={translate(error)}
+                            message={translate(error as TranslationPaths)}
                             style={[styles.mb3]}
                         />
                     )}
@@ -123,7 +137,7 @@ function CodesStep({account = defaultAccount, backTo}) {
                         success
                         text={translate('common.next')}
                         onPress={() => {
-                            if (!account.codesAreCopied) {
+                            if (!account?.codesAreCopied) {
                                 setError('twoFactorAuth.errorStepCodes');
                                 return;
                             }
@@ -136,10 +150,9 @@ function CodesStep({account = defaultAccount, backTo}) {
     );
 }
 
-CodesStep.propTypes = TwoFactorAuthPropTypes;
 CodesStep.displayName = 'CodesStep';
 
-// eslint-disable-next-line rulesdir/onyx-props-must-have-default
-export default withOnyx({
-    account: {key: ONYXKEYS.ACCOUNT},
-})(CodesStep);
+export default withOnyx<CodesStepProps, TwoFactorAuthOnyxProps>({
+    account: { key: ONYXKEYS.ACCOUNT },
+    session: { key: ONYXKEYS.SESSION },
+})(CodesStep);
\ No newline at end of file
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.tsx
similarity index 100%
rename from src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.js
rename to src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.tsx
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.tsx
similarity index 100%
rename from src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.js
rename to src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.tsx
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.tsx
similarity index 83%
rename from src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
rename to src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.tsx
index de36888f30b8..9ffc25427a64 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import ConfirmationPage from '@components/ConfirmationPage';
 import LottieAnimations from '@components/LottieAnimations';
@@ -8,17 +7,16 @@ import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/Step
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 import CONST from '@src/CONST';
+import type { Route } from '@src/ROUTES';
 
-const propTypes = {
+type SuccessStepProps = {
     /** The route where user needs to be redirected after setting up 2FA */
-    backTo: PropTypes.string,
+    backTo: string;
 };
 
-const defaultProps = {
-    backTo: '',
-};
-
-function SuccessStep({backTo}) {
+function SuccessStep({
+    backTo=''
+}:SuccessStepProps) {
     const {setStep} = useTwoFactorAuthContext();
 
     const {translate} = useLocalize();
@@ -29,6 +27,7 @@ function SuccessStep({backTo}) {
             stepCounter={{
                 step: 3,
                 text: translate('twoFactorAuth.stepSuccess'),
+                total: 3,
             }}
         >
             <ConfirmationPage
@@ -41,7 +40,7 @@ function SuccessStep({backTo}) {
                     TwoFactorAuthActions.clearTwoFactorAuthData();
                     setStep(CONST.TWO_FACTOR_AUTH_STEPS.ENABLED);
                     if (backTo) {
-                        Navigation.navigate(backTo);
+                        Navigation.navigate(backTo as Route);
                     }
                 }}
             />
@@ -49,7 +48,4 @@ function SuccessStep({backTo}) {
     );
 }
 
-SuccessStep.propTypes = propTypes;
-SuccessStep.defaultProps = defaultProps;
-
-export default SuccessStep;
+export default SuccessStep;
\ No newline at end of file
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx
similarity index 77%
rename from src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
rename to src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx
index e5f809204bd6..4e2152c74fb3 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx
@@ -1,5 +1,4 @@
-import PropTypes from 'prop-types';
-import React, {useEffect} from 'react';
+import React, {useEffect, useRef} from 'react';
 import {ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import expensifyLogo from '@assets/images/expensify-logo-round-transparent.png';
@@ -16,25 +15,29 @@ import Clipboard from '@libs/Clipboard';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
 import TwoFactorAuthForm from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm';
-import {defaultAccount, TwoFactorAuthPropTypes} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
+import type TwoFactorAuthOnyxProps from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
 const TROUBLESHOOTING_LINK = 'https://community.expensify.com/discussion/7736/faq-troubleshooting-two-factor-authentication-issues/p1?new=1';
 
-const defaultProps = {
-    account: defaultAccount,
+type VerifyStepProps =  TwoFactorAuthOnyxProps & {
+    /** Session of currently logged in user */
     session: {
-        email: null,
-    },
+        /** Email address */
+        email: string;
+    };
 };
 
-function VerifyStep({account, session}) {
+function VerifyStep({
+    account, 
+    session,
+}: VerifyStepProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
-    const formRef = React.useRef(null);
+    const formRef = useRef<HTMLFormElement>(null);;
 
     const {setStep} = useTwoFactorAuthContext();
 
@@ -46,19 +49,16 @@ function VerifyStep({account, session}) {
     }, []);
 
     useEffect(() => {
-        if (!account.requiresTwoFactorAuth) {
+        if (!account?.requiresTwoFactorAuth) {
             return;
         }
         setStep(CONST.TWO_FACTOR_AUTH_STEPS.SUCCESS);
-    }, [account.requiresTwoFactorAuth, setStep]);
+    }, [account?.requiresTwoFactorAuth, setStep]);
 
     /**
      * Splits the two-factor auth secret key in 4 chunks
-     *
-     * @param {String} secret
-     * @returns {string}
      */
-    function splitSecretInChunks(secret) {
+    function splitSecretInChunks(secret: string): string {
         if (secret.length !== 16) {
             return secret;
         }
@@ -69,11 +69,9 @@ function VerifyStep({account, session}) {
     /**
      * Builds the URL string to generate the QRCode, using the otpauth:// protocol,
      * so it can be detected by authenticator apps
-     *
-     * @returns {string}
      */
-    function buildAuthenticatorUrl() {
-        return `otpauth://totp/Expensify:${account.primaryLogin || session.email}?secret=${account.twoFactorAuthSecretKey}&issuer=Expensify`;
+    function buildAuthenticatorUrl(): string {
+        return `otpauth://totp/Expensify:${account?.primaryLogin ?? session.email}?secret=${account?.twoFactorAuthSecretKey}&issuer=Expensify`;
     }
 
     return (
@@ -85,7 +83,7 @@ function VerifyStep({account, session}) {
                 total: 3,
             }}
             onBackButtonPress={() => setStep(CONST.TWO_FACTOR_AUTH_STEPS.CODES, CONST.ANIMATION_DIRECTION.OUT)}
-            onEntryTransitionEnd={() => formRef.current && formRef.current.focus()}
+            onEntryTransitionEnd={() => formRef.current?.focus()}
         >
             <ScrollView
                 keyboardShouldPersistTaps="handled"
@@ -106,15 +104,18 @@ function VerifyStep({account, session}) {
                     </View>
                     <Text style={styles.mt5}>{translate('twoFactorAuth.addKey')}</Text>
                     <View style={[styles.mt11, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
-                        {Boolean(account.twoFactorAuthSecretKey) && <Text>{splitSecretInChunks(account.twoFactorAuthSecretKey)}</Text>}
+                        {Boolean(account?.twoFactorAuthSecretKey) && <Text>{splitSecretInChunks(account?.twoFactorAuthSecretKey ?? '')}</Text>}
                         <PressableWithDelayToggle
                             text={translate('twoFactorAuth.copy')}
                             textChecked={translate('common.copied')}
                             icon={Expensicons.Copy}
                             inline={false}
-                            onPress={() => Clipboard.setString(account.twoFactorAuthSecretKey)}
+                            onPress={() => Clipboard.setString(account?.twoFactorAuthSecretKey ?? '')}
                             styles={[styles.button, styles.buttonMedium, styles.twoFactorAuthCopyCodeButton]}
                             textStyles={[styles.buttonMediumText]}
+                            accessible={false}
+                            tooltipText=''
+                            tooltipTextChecked=''
                         />
                     </View>
                     <Text style={styles.mt11}>{translate('twoFactorAuth.enterCode')}</Text>
@@ -127,12 +128,12 @@ function VerifyStep({account, session}) {
                 <Button
                     success
                     text={translate('common.next')}
-                    isLoading={account.isLoading}
+                    isLoading={account?.isLoading}
                     onPress={() => {
                         if (!formRef.current) {
                             return;
                         }
-                        formRef.current.validateAndSubmitForm();
+                        formRef.current?.validateAndSubmitForm();
                     }}
                 />
             </FixedFooter>
@@ -140,21 +141,10 @@ function VerifyStep({account, session}) {
     );
 }
 
-VerifyStep.propTypes = {
-    /** Information about the users account that is logging in */
-    account: TwoFactorAuthPropTypes.account,
-
-    /** Session of currently logged in user */
-    session: PropTypes.shape({
-        /** Email address */
-        email: PropTypes.string.isRequired,
-    }),
-};
-VerifyStep.defaultProps = defaultProps;
 VerifyStep.displayName = 'VerifyStep';
 
 // eslint-disable-next-line rulesdir/onyx-props-must-have-default
-export default withOnyx({
+export default withOnyx<VerifyStepProps, TwoFactorAuthOnyxProps>({
     account: {key: ONYXKEYS.ACCOUNT},
     session: {key: ONYXKEYS.SESSION},
-})(VerifyStep);
+})(VerifyStep);
\ No newline at end of file

From b1e2479463ffc636214c10633b69866257f48d69 Mon Sep 17 00:00:00 2001
From: RohanSasne <rohansasne30@gmail.com>
Date: Tue, 30 Jan 2024 13:16:37 +0530
Subject: [PATCH 03/21] Convert TwoFactorAuthContext to typescript

---
 .../TwoFactorAuth/TwoFactorAuthContext/index.js      |  4 ----
 .../TwoFactorAuth/TwoFactorAuthContext/index.tsx     | 12 ++++++++++++
 .../{useTwoFactorAuth.js => useTwoFactorAuth.tsx}    |  2 +-
 3 files changed, 13 insertions(+), 5 deletions(-)
 delete mode 100644 src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/index.js
 create mode 100644 src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/index.tsx
 rename src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/{useTwoFactorAuth.js => useTwoFactorAuth.tsx} (98%)

diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/index.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/index.js
deleted file mode 100644
index 9a2287c775f3..000000000000
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import {createContext} from 'react';
-
-const TwoFactorAuthContext = createContext();
-export default TwoFactorAuthContext;
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/index.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/index.tsx
new file mode 100644
index 000000000000..411a7845ed83
--- /dev/null
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/index.tsx
@@ -0,0 +1,12 @@
+import {createContext} from 'react';
+import type {TwoFactorAuthStep} from '@src/types/onyx/Account';
+
+type TwoFactorAuthContextType = {
+    setStep: (step: TwoFactorAuthStep, animationDirection?: string) => void;
+};
+
+const TwoFactorAuthContext = createContext<TwoFactorAuthContextType>({
+    setStep: () => {},
+});
+
+export default TwoFactorAuthContext;
\ No newline at end of file
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.tsx
similarity index 98%
rename from src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.js
rename to src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.tsx
index c0e45a21b050..01d798123568 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.tsx
@@ -3,4 +3,4 @@ import TwoFactorAuthContext from './index';
 
 export default function useTwoFactorAuthContext() {
     return useContext(TwoFactorAuthContext);
-}
+}
\ No newline at end of file

From a0c9cabe2a1bf99e760412997d6a9c97474b0b21 Mon Sep 17 00:00:00 2001
From: RohanSasne <rohansasne30@gmail.com>
Date: Tue, 30 Jan 2024 13:18:19 +0530
Subject: [PATCH 04/21] Convert StepWrapper to typescript

---
 .../{StepWrapper.js => StepWrapper.tsx}       | 16 ++++------
 ...rPropTypes.js => StepWrapperPropTypes.tsx} | 29 ++++++++++---------
 2 files changed, 21 insertions(+), 24 deletions(-)
 rename src/pages/settings/Security/TwoFactorAuth/StepWrapper/{StepWrapper.js => StepWrapper.tsx} (78%)
 rename src/pages/settings/Security/TwoFactorAuth/StepWrapper/{StepWrapperPropTypes.js => StepWrapperPropTypes.tsx} (56%)

diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
similarity index 78%
rename from src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
rename to src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
index ba899a0e2d20..d93c6148ee31 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
@@ -6,20 +6,18 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
-import StepWrapperPropTypes from './StepWrapperPropTypes';
+import type StepWrapperPropTypes from './StepWrapperPropTypes';
 
 function StepWrapper({
     title = '',
-    stepCounter = null,
+    stepCounter,
     onBackButtonPress = () => TwoFactorAuthActions.quitAndNavigateBack(),
     children = null,
     shouldEnableKeyboardAvoidingView = true,
     onEntryTransitionEnd,
-}) {
+}: StepWrapperPropTypes) {
     const styles = useThemeStyles();
-    const shouldShowStepCounter = Boolean(stepCounter);
-
-    const {animationDirection} = useAnimatedStepContext();
+    const { animationDirection } = useAnimatedStepContext();
 
     return (
         <ScreenWrapper
@@ -29,12 +27,11 @@ function StepWrapper({
         >
             <AnimatedStep
                 style={[styles.flex1]}
-                onAnimationEnd={onEntryTransitionEnd}
+                onAnimationEnd={onEntryTransitionEnd ?? (() => { })}
                 direction={animationDirection}
             >
                 <HeaderWithBackButton
                     title={title}
-                    shouldShowStepCounter={shouldShowStepCounter}
                     stepCounter={stepCounter}
                     onBackButtonPress={onBackButtonPress}
                 />
@@ -44,7 +41,6 @@ function StepWrapper({
     );
 }
 
-StepWrapper.propTypes = StepWrapperPropTypes;
 StepWrapper.displayName = 'StepWrapper';
 
-export default StepWrapper;
+export default StepWrapper;
\ No newline at end of file
diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.js b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.tsx
similarity index 56%
rename from src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.js
rename to src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.tsx
index 3c06cc7bca52..67cf2adff5f0 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.js
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.tsx
@@ -1,28 +1,29 @@
-import PropTypes from 'prop-types';
-
-export default {
+type StepWrapperPropTypes = {
     /** Title of the Header */
-    title: PropTypes.string,
+    title?: string;
 
     /** Data to display a step counter in the header */
-    stepCounter: PropTypes.shape({
+    stepCounter?: {
         /** Current step */
-        step: PropTypes.number,
+        step: number;
         /** Total number of steps */
-        total: PropTypes.number,
+        total: number;
         /** Text to display next to the step counter */
-        text: PropTypes.string,
-    }),
+        text: string;
+    };
 
     /** Method to trigger when pressing back button of the header */
-    onBackButtonPress: PropTypes.func,
+    onBackButtonPress?: () => void;
 
     /** Called when navigated Screen's transition is finished. It does not fire when user exits the page. */
-    onEntryTransitionEnd: PropTypes.func,
+    onEntryTransitionEnd?: () => void;
 
     /** Children components */
-    children: PropTypes.node,
+    children?: React.ReactNode;
 
     /** Flag to indicate if the keyboard avoiding view should be enabled */
-    shouldEnableKeyboardAvoidingView: PropTypes.bool,
-};
+    shouldEnableKeyboardAvoidingView?: boolean;
+    
+}
+
+export default StepWrapperPropTypes;
\ No newline at end of file

From 8d6127cf403d2c313470122cc0cd0dd35b34cd31 Mon Sep 17 00:00:00 2001
From: RohanSasne <rohansasne30@gmail.com>
Date: Tue, 30 Jan 2024 13:21:27 +0530
Subject: [PATCH 05/21] Convert TwoFactorAuthSteps to typescript

---
 ...actorAuthPage.js => TwoFactorAuthPage.tsx} |  0
 .../TwoFactorAuth/TwoFactorAuthPropTypes.js   | 28 -------------------
 .../TwoFactorAuth/TwoFactorAuthPropTypes.tsx  | 11 ++++++++
 ...torAuthSteps.js => TwoFactorAuthSteps.tsx} | 28 +++++++++++--------
 4 files changed, 27 insertions(+), 40 deletions(-)
 rename src/pages/settings/Security/TwoFactorAuth/{TwoFactorAuthPage.js => TwoFactorAuthPage.tsx} (100%)
 delete mode 100644 src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.js
 create mode 100644 src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.tsx
 rename src/pages/settings/Security/TwoFactorAuth/{TwoFactorAuthSteps.js => TwoFactorAuthSteps.tsx} (73%)

diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.tsx
similarity index 100%
rename from src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.js
rename to src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.tsx
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.js
deleted file mode 100644
index f1753e74c281..000000000000
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import PropTypes from 'prop-types';
-
-const TwoFactorAuthPropTypes = {
-    account: PropTypes.shape({
-        /** Whether this account has 2FA enabled or not */
-        requiresTwoFactorAuth: PropTypes.bool,
-
-        /** Secret key to enable 2FA within the authenticator app */
-        twoFactorAuthSecretKey: PropTypes.string,
-
-        /** User primary login to attach to the authenticator QRCode */
-        primaryLogin: PropTypes.string,
-
-        /** User is submitting the authentication code */
-        isLoading: PropTypes.bool,
-
-        /** Server-side errors in the submitted authentication code */
-        errors: PropTypes.objectOf(PropTypes.string),
-    }),
-};
-
-const defaultAccount = {
-    requiresTwoFactorAuth: false,
-    twoFactorAuthStep: '',
-    recoveryCodes: '',
-};
-
-export {TwoFactorAuthPropTypes, defaultAccount};
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.tsx
new file mode 100644
index 000000000000..229fa471783a
--- /dev/null
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.tsx
@@ -0,0 +1,11 @@
+import type {OnyxEntry} from 'react-native-onyx';
+import type {Account, Session} from '@src/types/onyx';
+
+type TwoFactorAuthOnyxProps = {
+
+    account: OnyxEntry<Account>;
+    session: OnyxEntry<Session>;
+
+}
+
+export default TwoFactorAuthOnyxProps
\ No newline at end of file
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
similarity index 73%
rename from src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js
rename to src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
index 720c2e02b3c0..5f9f91b5bf9d 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
@@ -1,7 +1,9 @@
 import {useRoute} from '@react-navigation/native';
+// eslint-disable-next-line
 import lodashGet from 'lodash/get';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {withOnyx} from 'react-native-onyx';
+import type {TwoFactorAuthStep} from '@src/types/onyx/Account';
 import useAnimatedStepContext from '@components/AnimatedStep/useAnimatedStepContext';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 import CONST from '@src/CONST';
@@ -12,32 +14,35 @@ import EnabledStep from './Steps/EnabledStep';
 import SuccessStep from './Steps/SuccessStep';
 import VerifyStep from './Steps/VerifyStep';
 import TwoFactorAuthContext from './TwoFactorAuthContext';
-import {defaultAccount, TwoFactorAuthPropTypes} from './TwoFactorAuthPropTypes';
+import type TwoFactorAuthOnyxProps from './TwoFactorAuthPropTypes';
 
-function TwoFactorAuthSteps({account = defaultAccount}) {
+type TwoFactorAuthProps = TwoFactorAuthOnyxProps
+
+function TwoFactorAuthSteps({ account }: TwoFactorAuthProps) {
     const route = useRoute();
     const backTo = lodashGet(route.params, 'backTo', '');
-    const [currentStep, setCurrentStep] = useState(CONST.TWO_FACTOR_AUTH_STEPS.CODES);
+    const [currentStep, setCurrentStep] = useState<TwoFactorAuthStep>(CONST.TWO_FACTOR_AUTH_STEPS.CODES);
 
     const {setAnimationDirection} = useAnimatedStepContext();
 
     useEffect(() => () => TwoFactorAuthActions.clearTwoFactorAuthData(), []);
 
     useEffect(() => {
-        if (account.twoFactorAuthStep) {
-            setCurrentStep(account.twoFactorAuthStep);
+        if (account?.twoFactorAuthStep) {
+            setCurrentStep(account?.twoFactorAuthStep);
             return;
         }
 
-        if (account.requiresTwoFactorAuth) {
+        if (account?.requiresTwoFactorAuth) {
             setCurrentStep(CONST.TWO_FACTOR_AUTH_STEPS.ENABLED);
         } else {
             setCurrentStep(CONST.TWO_FACTOR_AUTH_STEPS.CODES);
         }
-    }, [account.requiresTwoFactorAuth, account.twoFactorAuthStep]);
+    }, [account?.requiresTwoFactorAuth, account?.twoFactorAuthStep]);
 
     const handleSetStep = useCallback(
-        (step, animationDirection = CONST.ANIMATION_DIRECTION.IN) => {
+        (step: TwoFactorAuthStep) => {
+            const animationDirection = CONST.ANIMATION_DIRECTION.IN;
             setAnimationDirection(animationDirection);
             TwoFactorAuthActions.setTwoFactorAuthStep(step);
             setCurrentStep(step);
@@ -66,9 +71,8 @@ function TwoFactorAuthSteps({account = defaultAccount}) {
     return <TwoFactorAuthContext.Provider value={contextValue}>{renderStep()}</TwoFactorAuthContext.Provider>;
 }
 
-TwoFactorAuthSteps.propTypes = TwoFactorAuthPropTypes;
-
 // eslint-disable-next-line rulesdir/onyx-props-must-have-default
-export default withOnyx({
+export default withOnyx<TwoFactorAuthProps, TwoFactorAuthOnyxProps>({
     account: {key: ONYXKEYS.ACCOUNT},
-})(TwoFactorAuthSteps);
+    session: {key: ONYXKEYS.SESSION},
+})(TwoFactorAuthSteps);
\ No newline at end of file

From 5599ff8e570c8584e28980a290e6d1e958737353 Mon Sep 17 00:00:00 2001
From: RohanSasne <rohansasne30@gmail.com>
Date: Wed, 31 Jan 2024 20:32:00 +0530
Subject: [PATCH 06/21] Update to Typescript plus some config changes

---
 .../TwoFactorAuth/StepWrapper/StepWrapper.tsx |  6 +-
 .../StepWrapper/StepWrapperPropTypes.tsx      | 20 ++---
 .../TwoFactorAuth/Steps/CodesStep.tsx         | 23 +++---
 .../TwoFactorAuth/Steps/SuccessStep.tsx       | 13 ++--
 .../TwoFactorAuth/Steps/VerifyStep.tsx        | 36 +++------
 .../TwoFactorAuthContext/useTwoFactorAuth.tsx |  2 +-
 ...rAuthForm.js => BaseTwoFactorAuthForm.tsx} | 78 +++++++++----------
 .../TwoFactorAuthForm/index.android.js        | 29 -------
 .../TwoFactorAuthForm/index.android.tsx       | 21 +++++
 .../TwoFactorAuth/TwoFactorAuthForm/index.js  | 29 -------
 .../TwoFactorAuth/TwoFactorAuthForm/index.tsx | 23 ++++++
 .../TwoFactorAuth/TwoFactorAuthPropTypes.tsx  | 21 ++++-
 .../TwoFactorAuth/TwoFactorAuthSteps.tsx      | 15 ++--
 13 files changed, 150 insertions(+), 166 deletions(-)
 rename src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/{BaseTwoFactorAuthForm.js => BaseTwoFactorAuthForm.tsx} (56%)
 delete mode 100644 src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.js
 create mode 100644 src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.tsx
 delete mode 100644 src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.js
 create mode 100644 src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.tsx

diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
index d93c6148ee31..5ccc0e2736eb 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
@@ -17,7 +17,7 @@ function StepWrapper({
     onEntryTransitionEnd,
 }: StepWrapperPropTypes) {
     const styles = useThemeStyles();
-    const { animationDirection } = useAnimatedStepContext();
+    const {animationDirection} = useAnimatedStepContext();
 
     return (
         <ScreenWrapper
@@ -27,7 +27,7 @@ function StepWrapper({
         >
             <AnimatedStep
                 style={[styles.flex1]}
-                onAnimationEnd={onEntryTransitionEnd ?? (() => { })}
+                onAnimationEnd={onEntryTransitionEnd}
                 direction={animationDirection}
             >
                 <HeaderWithBackButton
@@ -43,4 +43,4 @@ function StepWrapper({
 
 StepWrapper.displayName = 'StepWrapper';
 
-export default StepWrapper;
\ No newline at end of file
+export default StepWrapper;
diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.tsx b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.tsx
index 67cf2adff5f0..c7132934bc82 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.tsx
@@ -1,29 +1,29 @@
 type StepWrapperPropTypes = {
     /** Title of the Header */
-    title?: string;
+    title?: string,
 
     /** Data to display a step counter in the header */
     stepCounter?: {
         /** Current step */
-        step: number;
+        step: number,
         /** Total number of steps */
-        total: number;
+        total?: number,
         /** Text to display next to the step counter */
-        text: string;
-    };
+        text?: string,
+    },
 
     /** Method to trigger when pressing back button of the header */
-    onBackButtonPress?: () => void;
+    onBackButtonPress?: () => void,
 
     /** Called when navigated Screen's transition is finished. It does not fire when user exits the page. */
-    onEntryTransitionEnd?: () => void;
+    onEntryTransitionEnd?: () => void,
 
     /** Children components */
-    children?: React.ReactNode;
+    children?: React.ReactNode,
 
     /** Flag to indicate if the keyboard avoiding view should be enabled */
-    shouldEnableKeyboardAvoidingView?: boolean;
-    
+    shouldEnableKeyboardAvoidingView?: boolean,
+
 }
 
 export default StepWrapperPropTypes;
\ No newline at end of file
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
index f124565db39b..ae784eba2b50 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { ActivityIndicator, ScrollView, View } from 'react-native';
 import { withOnyx } from 'react-native-onyx';
 import type { Route } from '@src/ROUTES';
+import type { TranslationPaths } from '@src/languages/types';
 import Button from '@components/Button';
 import FixedFooter from '@components/FixedFooter';
 import FormHelpMessage from '@components/FormHelpMessage';
@@ -18,19 +19,21 @@ import Clipboard from '@libs/Clipboard';
 import localFileDownload from '@libs/localFileDownload';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
-import type TwoFactorAuthOnyxProps from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
+import type { TwoFactorAuthStepOnyxProps } from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
 import * as Session from '@userActions/Session';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type { TranslationPaths } from '@src/languages/types';
 
-type CodesStepProps = TwoFactorAuthOnyxProps & {
+type CodesStepProps = TwoFactorAuthStepOnyxProps & {
     /** The route to go back to when the user cancels */
     backTo: Route | undefined;
 }
 
-function CodesStep({ account, backTo }: CodesStepProps) {
+function CodesStep({
+    account,
+    backTo,
+}: CodesStepProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const { translate } = useLocalize();
@@ -77,15 +80,14 @@ function CodesStep({ account, backTo }: CodesStepProps) {
                             <>
                                 <View style={styles.twoFactorAuthCodesContainer}>
                                     {Boolean(account?.recoveryCodes) &&
-                                        (account?.recoveryCodes?.split(', ') ?? []).map((code) => (
+                                        (account?.recoveryCodes?.split(', ').map((code) => (
                                             <Text
                                                 style={styles.twoFactorAuthCode}
                                                 key={code}
                                             >
                                                 {code}
                                             </Text>
-                                        ))
-                                    }
+                                        )))}
 
                                 </View>
                                 <View style={styles.twoFactorAuthCodesButtonsContainer}>
@@ -126,7 +128,7 @@ function CodesStep({ account, backTo }: CodesStepProps) {
                     </View>
                 </Section>
                 <FixedFooter style={[styles.mtAuto, styles.pt5]}>
-                    {!error && (
+                    {Object.keys(error).length !== 0 && (
                         <FormHelpMessage
                             isError
                             message={translate(error as TranslationPaths)}
@@ -152,7 +154,6 @@ function CodesStep({ account, backTo }: CodesStepProps) {
 
 CodesStep.displayName = 'CodesStep';
 
-export default withOnyx<CodesStepProps, TwoFactorAuthOnyxProps>({
+export default withOnyx<CodesStepProps, TwoFactorAuthStepOnyxProps>({
     account: { key: ONYXKEYS.ACCOUNT },
-    session: { key: ONYXKEYS.SESSION },
-})(CodesStep);
\ No newline at end of file
+})(CodesStep);
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.tsx
index 9ffc25427a64..85d0681d5053 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.tsx
@@ -6,17 +6,17 @@ import Navigation from '@navigation/Navigation';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
-import CONST from '@src/CONST';
 import type { Route } from '@src/ROUTES';
+import CONST from '@src/CONST';
 
 type SuccessStepProps = {
     /** The route where user needs to be redirected after setting up 2FA */
-    backTo: string;
+    backTo?: Route;
 };
 
 function SuccessStep({
-    backTo=''
-}:SuccessStepProps) {
+    backTo,
+}: SuccessStepProps) {
     const {setStep} = useTwoFactorAuthContext();
 
     const {translate} = useLocalize();
@@ -27,7 +27,6 @@ function SuccessStep({
             stepCounter={{
                 step: 3,
                 text: translate('twoFactorAuth.stepSuccess'),
-                total: 3,
             }}
         >
             <ConfirmationPage
@@ -40,7 +39,7 @@ function SuccessStep({
                     TwoFactorAuthActions.clearTwoFactorAuthData();
                     setStep(CONST.TWO_FACTOR_AUTH_STEPS.ENABLED);
                     if (backTo) {
-                        Navigation.navigate(backTo as Route);
+                        Navigation.navigate(backTo);
                     }
                 }}
             />
@@ -48,4 +47,4 @@ function SuccessStep({
     );
 }
 
-export default SuccessStep;
\ No newline at end of file
+export default SuccessStep;
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx
index 4e2152c74fb3..a6fbddb81c0b 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx
@@ -15,29 +15,18 @@ import Clipboard from '@libs/Clipboard';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
 import TwoFactorAuthForm from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm';
-import type TwoFactorAuthOnyxProps from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
+import type {TwoFactorAuthStepProps, TwoFactorAuthStepOnyxBothProps} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
 const TROUBLESHOOTING_LINK = 'https://community.expensify.com/discussion/7736/faq-troubleshooting-two-factor-authentication-issues/p1?new=1';
 
-type VerifyStepProps =  TwoFactorAuthOnyxProps & {
-    /** Session of currently logged in user */
-    session: {
-        /** Email address */
-        email: string;
-    };
-};
-
-function VerifyStep({
-    account, 
-    session,
-}: VerifyStepProps) {
+function VerifyStep({account, session}: TwoFactorAuthStepProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
-    const formRef = useRef<HTMLFormElement>(null);;
+    const formRef = useRef<HTMLFormElement>(null);
 
     const {setStep} = useTwoFactorAuthContext();
 
@@ -58,7 +47,7 @@ function VerifyStep({
     /**
      * Splits the two-factor auth secret key in 4 chunks
      */
-    function splitSecretInChunks(secret: string): string {
+    function splitSecretInChunks(secret: string) {
         if (secret.length !== 16) {
             return secret;
         }
@@ -70,8 +59,8 @@ function VerifyStep({
      * Builds the URL string to generate the QRCode, using the otpauth:// protocol,
      * so it can be detected by authenticator apps
      */
-    function buildAuthenticatorUrl(): string {
-        return `otpauth://totp/Expensify:${account?.primaryLogin ?? session.email}?secret=${account?.twoFactorAuthSecretKey}&issuer=Expensify`;
+    function buildAuthenticatorUrl() {
+        return `otpauth://totp/Expensify:${account?.primaryLogin ?? session?.email}?secret=${account?.twoFactorAuthSecretKey}&issuer=Expensify`;
     }
 
     return (
@@ -83,7 +72,7 @@ function VerifyStep({
                 total: 3,
             }}
             onBackButtonPress={() => setStep(CONST.TWO_FACTOR_AUTH_STEPS.CODES, CONST.ANIMATION_DIRECTION.OUT)}
-            onEntryTransitionEnd={() => formRef.current?.focus()}
+            onEntryTransitionEnd={() => formRef.current && formRef.current.focus()}
         >
             <ScrollView
                 keyboardShouldPersistTaps="handled"
@@ -108,14 +97,14 @@ function VerifyStep({
                         <PressableWithDelayToggle
                             text={translate('twoFactorAuth.copy')}
                             textChecked={translate('common.copied')}
+                            tooltipText=""
+                            tooltipTextChecked=""
                             icon={Expensicons.Copy}
                             inline={false}
                             onPress={() => Clipboard.setString(account?.twoFactorAuthSecretKey ?? '')}
                             styles={[styles.button, styles.buttonMedium, styles.twoFactorAuthCopyCodeButton]}
                             textStyles={[styles.buttonMediumText]}
                             accessible={false}
-                            tooltipText=''
-                            tooltipTextChecked=''
                         />
                     </View>
                     <Text style={styles.mt11}>{translate('twoFactorAuth.enterCode')}</Text>
@@ -133,7 +122,7 @@ function VerifyStep({
                         if (!formRef.current) {
                             return;
                         }
-                        formRef.current?.validateAndSubmitForm();
+                        formRef.current.validateAndSubmitForm();
                     }}
                 />
             </FixedFooter>
@@ -143,8 +132,7 @@ function VerifyStep({
 
 VerifyStep.displayName = 'VerifyStep';
 
-// eslint-disable-next-line rulesdir/onyx-props-must-have-default
-export default withOnyx<VerifyStepProps, TwoFactorAuthOnyxProps>({
+export default withOnyx<TwoFactorAuthStepProps, TwoFactorAuthStepOnyxBothProps>({
     account: {key: ONYXKEYS.ACCOUNT},
     session: {key: ONYXKEYS.SESSION},
-})(VerifyStep);
\ No newline at end of file
+})(VerifyStep);
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.tsx
index 01d798123568..c0e45a21b050 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.tsx
@@ -3,4 +3,4 @@ import TwoFactorAuthContext from './index';
 
 export default function useTwoFactorAuthContext() {
     return useContext(TwoFactorAuthContext);
-}
\ No newline at end of file
+}
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
similarity index 56%
rename from src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.js
rename to src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
index 901c0aa1cffd..a9c9e93cdf19 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
@@ -1,53 +1,60 @@
-import PropTypes from 'prop-types';
-import React, {forwardRef, useCallback, useImperativeHandle, useState} from 'react';
+import React, {forwardRef, useCallback, useImperativeHandle, useState, useRef} from 'react';
+import type {Ref, FC, RefObject} from 'react';
 import {withOnyx} from 'react-native-onyx';
+import type {TranslationPaths} from '@src/languages/types';
+import type {Errors} from '@src/types/onyx/OnyxCommon'
 import MagicCodeInput from '@components/MagicCodeInput';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import * as Session from '@userActions/Session';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type { TwoFactorAuthStepOnyxProps } from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
+import useLocalize from '@hooks/useLocalize';
 
-const propTypes = {
-    ...withLocalizePropTypes,
+type AutoCompleteVariant = 'sms-otp' | 'one-time-code' | 'off';
 
-    /* Onyx Props */
-
-    /** The details about the account that the user is signing in with */
-    account: PropTypes.shape({
-        /** Whether two-factor authentication is required */
-        requiresTwoFactorAuth: PropTypes.bool,
-    }),
+type OnyxDataWithErrors = {
+    errors?: Errors | null;
+};
 
-    /** Specifies autocomplete hints for the system, so it can provide autofill */
-    autoComplete: PropTypes.oneOf(['sms-otp', 'one-time-code']).isRequired,
+type BaseTwoFactorAuthFormProps = TwoFactorAuthStepOnyxProps & {
+    autoComplete: AutoCompleteVariant,
+    innerRef?: () => void,
+    ref: RefObject<HTMLFormElement> | (() => void),
 };
 
-const defaultProps = {
-    account: {},
+type MagicCodeInputHandle = {
+    focus: () => void;
+    focusLastSelected: () => void;
+    resetFocus: () => void;
+    clear: () => void;
+    blur: () => void;
 };
 
-function BaseTwoFactorAuthForm(props) {
-    const [formError, setFormError] = useState({});
+
+function BaseTwoFactorAuthForm({
+    account,
+    autoComplete,
+    innerRef,
+}: BaseTwoFactorAuthFormProps) {
+    const [formError, setFormError] = useState<{twoFactorAuthCode?: string}>({});
     const [twoFactorAuthCode, setTwoFactorAuthCode] = useState('');
-    const inputRef = React.useRef(null);
+    const inputRef: Ref<MagicCodeInputHandle> = useRef(null);
+    const {translate} = useLocalize();
 
     /**
      * Handle text input and clear formError upon text change
-     *
-     * @param {String} text
      */
     const onTextInput = useCallback(
-        (text) => {
+        (text: string) => {
             setTwoFactorAuthCode(text);
             setFormError({});
 
-            if (props.account.errors) {
+            if (account?.errors) {
                 Session.clearAccountMessages();
             }
         },
-        [props.account.errors],
+        [account?.errors],
     );
 
     /**
@@ -71,7 +78,7 @@ function BaseTwoFactorAuthForm(props) {
         Session.validateTwoFactorAuth(twoFactorAuthCode);
     }, [twoFactorAuthCode]);
 
-    useImperativeHandle(props.innerRef, () => ({
+    useImperativeHandle(innerRef, () => ({
         validateAndSubmitForm() {
             validateAndSubmitForm();
         },
@@ -85,24 +92,18 @@ function BaseTwoFactorAuthForm(props) {
 
     return (
         <MagicCodeInput
-            autoComplete={props.autoComplete}
-            textContentType="oneTimeCode"
-            label={props.translate('common.twoFactorCode')}
-            id="twoFactorAuthCode"
+            autoComplete={autoComplete}
             name="twoFactorAuthCode"
             value={twoFactorAuthCode}
             onChangeText={onTextInput}
             onFulfill={validateAndSubmitForm}
-            errorText={formError.twoFactorAuthCode ? props.translate(formError.twoFactorAuthCode) : ErrorUtils.getLatestErrorMessage(props.account)}
+            errorText={formError.twoFactorAuthCode ? translate(formError.twoFactorAuthCode as TranslationPaths) : ErrorUtils.getLatestErrorMessage(account as OnyxDataWithErrors)}
             ref={inputRef}
             autoFocus={false}
         />
     );
 }
 
-BaseTwoFactorAuthForm.propTypes = propTypes;
-BaseTwoFactorAuthForm.defaultProps = defaultProps;
-
 const BaseTwoFactorAuthFormWithRef = forwardRef((props, ref) => (
     <BaseTwoFactorAuthForm
         // eslint-disable-next-line react/jsx-props-no-spreading
@@ -111,11 +112,8 @@ const BaseTwoFactorAuthFormWithRef = forwardRef((props, ref) => (
     />
 ));
 
-BaseTwoFactorAuthFormWithRef.displayName = 'BaseTwoFactorAuthFormWithRef';
+(BaseTwoFactorAuthFormWithRef as FC).displayName = 'BaseTwoFactorAuthFormWithRef';
 
-export default compose(
-    withLocalize,
-    withOnyx({
+export default withOnyx<BaseTwoFactorAuthFormProps, TwoFactorAuthStepOnyxProps>({
         account: {key: ONYXKEYS.ACCOUNT},
-    }),
-)(BaseTwoFactorAuthFormWithRef);
+})(BaseTwoFactorAuthFormWithRef);
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.js
deleted file mode 100644
index 5f71da7629dd..000000000000
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import BaseTwoFactorAuthForm from './BaseTwoFactorAuthForm';
-
-const propTypes = {
-    /**
-     * A ref to forward to the Pressable
-     */
-    innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-};
-
-const defaultProps = {
-    innerRef: () => {},
-};
-
-function TwoFactorAuthForm(props) {
-    return (
-        <BaseTwoFactorAuthForm
-            ref={props.innerRef}
-            autoComplete="sms-otp"
-        />
-    );
-}
-
-TwoFactorAuthForm.propTypes = propTypes;
-TwoFactorAuthForm.defaultProps = defaultProps;
-TwoFactorAuthForm.displayName = 'TwoFactorAuthForm';
-
-export default TwoFactorAuthForm;
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.tsx
new file mode 100644
index 000000000000..637fcf2dbb93
--- /dev/null
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import BaseTwoFactorAuthForm from './BaseTwoFactorAuthForm';
+
+type TwoFactorAuthFormProps = {
+    innerRef: () => void,
+}
+
+function TwoFactorAuthForm({
+    innerRef,
+}: TwoFactorAuthFormProps) {
+    return (
+        <BaseTwoFactorAuthForm
+            ref={innerRef}
+            autoComplete="sms-otp"
+        />
+    );
+}
+
+TwoFactorAuthForm.displayName = 'TwoFactorAuthForm';
+
+export default TwoFactorAuthForm;
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.js
deleted file mode 100644
index 5d361c41e7e3..000000000000
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import BaseTwoFactorAuthForm from './BaseTwoFactorAuthForm';
-
-const propTypes = {
-    /**
-     * A ref to forward to the Pressable
-     */
-    innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-};
-
-const defaultProps = {
-    innerRef: () => {},
-};
-
-function TwoFactorAuthForm(props) {
-    return (
-        <BaseTwoFactorAuthForm
-            ref={props.innerRef}
-            autoComplete="one-time-code"
-        />
-    );
-}
-
-TwoFactorAuthForm.propTypes = propTypes;
-TwoFactorAuthForm.defaultProps = defaultProps;
-TwoFactorAuthForm.displayName = 'TwoFactorAuthForm';
-
-export default TwoFactorAuthForm;
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.tsx
new file mode 100644
index 000000000000..422b449c94d3
--- /dev/null
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import type {RefObject} from 'react';
+import BaseTwoFactorAuthForm from './BaseTwoFactorAuthForm';
+
+type TwoFactorAuthFormProps = {
+    innerRef: RefObject<HTMLFormElement> | (() => void),
+}
+
+function TwoFactorAuthForm(
+    {
+        innerRef
+    }: TwoFactorAuthFormProps,) {
+    return (
+        <BaseTwoFactorAuthForm
+            ref={innerRef}
+            autoComplete="one-time-code"
+        />
+    );
+}
+
+TwoFactorAuthForm.displayName = 'TwoFactorAuthForm';
+
+export default TwoFactorAuthForm;
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.tsx
index 229fa471783a..404775f4be9c 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.tsx
@@ -1,11 +1,24 @@
 import type {OnyxEntry} from 'react-native-onyx';
 import type {Account, Session} from '@src/types/onyx';
 
-type TwoFactorAuthOnyxProps = {
 
-    account: OnyxEntry<Account>;
+type TwoFactorAuthStepOnyxNativeProps = {
+    /** Session of currently logged in user */
     session: OnyxEntry<Session>;
+};
 
-}
+type TwoFactorAuthStepOnyxProps = {
 
-export default TwoFactorAuthOnyxProps
\ No newline at end of file
+    account: OnyxEntry<Account>,
+
+};
+
+type TwoFactorAuthStepOnyxBothProps = TwoFactorAuthStepOnyxNativeProps & TwoFactorAuthStepOnyxProps;
+
+type TwoFactorAuthStepProps = TwoFactorAuthStepOnyxBothProps & {
+    requiresTwoFactorAuth?: false,
+    twoFactorAuthStep?: '',
+    recoveryCodes?: '',
+};
+
+export type {TwoFactorAuthStepOnyxNativeProps, TwoFactorAuthStepOnyxProps, TwoFactorAuthStepProps, TwoFactorAuthStepOnyxBothProps};
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
index 5f9f91b5bf9d..2264132e6778 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
@@ -14,11 +14,11 @@ import EnabledStep from './Steps/EnabledStep';
 import SuccessStep from './Steps/SuccessStep';
 import VerifyStep from './Steps/VerifyStep';
 import TwoFactorAuthContext from './TwoFactorAuthContext';
-import type TwoFactorAuthOnyxProps from './TwoFactorAuthPropTypes';
+import type {TwoFactorAuthStepProps, TwoFactorAuthStepOnyxBothProps} from './TwoFactorAuthPropTypes';
 
-type TwoFactorAuthProps = TwoFactorAuthOnyxProps
-
-function TwoFactorAuthSteps({ account }: TwoFactorAuthProps) {
+function TwoFactorAuthSteps({
+    account,
+}: TwoFactorAuthStepProps) {
     const route = useRoute();
     const backTo = lodashGet(route.params, 'backTo', '');
     const [currentStep, setCurrentStep] = useState<TwoFactorAuthStep>(CONST.TWO_FACTOR_AUTH_STEPS.CODES);
@@ -41,8 +41,7 @@ function TwoFactorAuthSteps({ account }: TwoFactorAuthProps) {
     }, [account?.requiresTwoFactorAuth, account?.twoFactorAuthStep]);
 
     const handleSetStep = useCallback(
-        (step: TwoFactorAuthStep) => {
-            const animationDirection = CONST.ANIMATION_DIRECTION.IN;
+        (step: TwoFactorAuthStep, animationDirection = CONST.ANIMATION_DIRECTION.IN) => {
             setAnimationDirection(animationDirection);
             TwoFactorAuthActions.setTwoFactorAuthStep(step);
             setCurrentStep(step);
@@ -72,7 +71,7 @@ function TwoFactorAuthSteps({ account }: TwoFactorAuthProps) {
 }
 
 // eslint-disable-next-line rulesdir/onyx-props-must-have-default
-export default withOnyx<TwoFactorAuthProps, TwoFactorAuthOnyxProps>({
+export default withOnyx<TwoFactorAuthStepProps, TwoFactorAuthStepOnyxBothProps>({
     account: {key: ONYXKEYS.ACCOUNT},
     session: {key: ONYXKEYS.SESSION},
-})(TwoFactorAuthSteps);
\ No newline at end of file
+})(TwoFactorAuthSteps);

From d2c8731846683779746fb83dfc19925383953e86 Mon Sep 17 00:00:00 2001
From: RohanSasne <rohansasne30@gmail.com>
Date: Wed, 31 Jan 2024 20:49:04 +0530
Subject: [PATCH 07/21] Add reference to stepWrapper

---
 .../settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
index 5ccc0e2736eb..a3e03890a545 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
@@ -27,7 +27,7 @@ function StepWrapper({
         >
             <AnimatedStep
                 style={[styles.flex1]}
-                onAnimationEnd={onEntryTransitionEnd}
+                onAnimationEnd={onEntryTransitionEnd as () => void}
                 direction={animationDirection}
             >
                 <HeaderWithBackButton

From 856a35bb732a655bbed444164e7519f5cce42bf8 Mon Sep 17 00:00:00 2001
From: RohanSasne <rohansasne30@gmail.com>
Date: Fri, 2 Feb 2024 16:12:34 +0530
Subject: [PATCH 08/21] Fix type errors

---
 .../Security/TwoFactorAuth/TwoFactorAuthContext/index.tsx      | 3 ++-
 .../settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx     | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/index.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/index.tsx
index 411a7845ed83..c668a26f0e43 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/index.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/index.tsx
@@ -1,8 +1,9 @@
 import {createContext} from 'react';
 import type {TwoFactorAuthStep} from '@src/types/onyx/Account';
+import type {AnimationDirection} from '@components/AnimatedStep/AnimatedStepContext';
 
 type TwoFactorAuthContextType = {
-    setStep: (step: TwoFactorAuthStep, animationDirection?: string) => void;
+    setStep: (step: TwoFactorAuthStep, animationDirection?: AnimationDirection) => void;
 };
 
 const TwoFactorAuthContext = createContext<TwoFactorAuthContextType>({
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
index 2264132e6778..94a6c8f2ca1b 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
@@ -8,6 +8,7 @@ import useAnimatedStepContext from '@components/AnimatedStep/useAnimatedStepCont
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type {AnimationDirection} from '@components/AnimatedStep/AnimatedStepContext';
 import CodesStep from './Steps/CodesStep';
 import DisabledStep from './Steps/DisabledStep';
 import EnabledStep from './Steps/EnabledStep';
@@ -41,7 +42,7 @@ function TwoFactorAuthSteps({
     }, [account?.requiresTwoFactorAuth, account?.twoFactorAuthStep]);
 
     const handleSetStep = useCallback(
-        (step: TwoFactorAuthStep, animationDirection = CONST.ANIMATION_DIRECTION.IN) => {
+        (step: TwoFactorAuthStep, animationDirection: AnimationDirection = CONST.ANIMATION_DIRECTION.IN) => {
             setAnimationDirection(animationDirection);
             TwoFactorAuthActions.setTwoFactorAuthStep(step);
             setCurrentStep(step);

From b0cfa5a2a55f9bc1b2e865094b00c20ffd58cfc6 Mon Sep 17 00:00:00 2001
From: RohanSasne <rohansasne30@gmail.com>
Date: Fri, 2 Feb 2024 17:46:00 +0530
Subject: [PATCH 09/21] Lint fix and minor typescript changes

---
 .../TwoFactorAuth/StepWrapper/StepWrapper.tsx |  2 +-
 .../TwoFactorAuth/Steps/DisabledStep.tsx      |  2 +-
 .../TwoFactorAuth/Steps/EnabledStep.tsx       |  8 ++---
 .../TwoFactorAuth/Steps/SuccessStep.tsx       |  4 +--
 .../TwoFactorAuth/Steps/VerifyStep.tsx        | 18 +++++------
 .../TwoFactorAuthContext/index.tsx            |  8 ++---
 .../TwoFactorAuthContext/useTwoFactorAuth.tsx |  2 +-
 .../BaseTwoFactorAuthForm.tsx                 | 32 ++++++++++---------
 .../TwoFactorAuth/TwoFactorAuthForm/index.tsx |  2 +-
 .../TwoFactorAuth/TwoFactorAuthPropTypes.tsx  |  6 ++--
 .../TwoFactorAuth/TwoFactorAuthSteps.tsx      | 20 ++++++------
 11 files changed, 53 insertions(+), 51 deletions(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
index a3e03890a545..b343d6174b81 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
@@ -17,7 +17,7 @@ function StepWrapper({
     onEntryTransitionEnd,
 }: StepWrapperPropTypes) {
     const styles = useThemeStyles();
-    const {animationDirection} = useAnimatedStepContext();
+    const { animationDirection } = useAnimatedStepContext();
 
     return (
         <ScreenWrapper
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.tsx
index db64a805d088..7a77cf21b5e7 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.tsx
@@ -11,7 +11,7 @@ import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 
 function DisabledStep() {
     const styles = useThemeStyles();
-    const {translate} = useLocalize();
+    const { translate } = useLocalize();
 
     return (
         <StepWrapper title={translate('twoFactorAuth.disableTwoFactorAuth')}>
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.tsx
index 59c145f9e348..bc38f640922e 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.tsx
@@ -1,5 +1,5 @@
-import React, {useState} from 'react';
-import {ScrollView, View} from 'react-native';
+import React, { useState } from 'react';
+import { ScrollView, View } from 'react-native';
 import ConfirmModal from '@components/ConfirmModal';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
@@ -18,9 +18,9 @@ function EnabledStep() {
     const styles = useThemeStyles();
     const [isConfirmModalVisible, setIsConfirmModalVisible] = useState(false);
 
-    const {setStep} = useTwoFactorAuthContext();
+    const { setStep } = useTwoFactorAuthContext();
 
-    const {translate} = useLocalize();
+    const { translate } = useLocalize();
 
     return (
         <StepWrapper title={translate('twoFactorAuth.headerTitle')}>
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.tsx
index 85d0681d5053..c79060446c6a 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.tsx
@@ -17,9 +17,9 @@ type SuccessStepProps = {
 function SuccessStep({
     backTo,
 }: SuccessStepProps) {
-    const {setStep} = useTwoFactorAuthContext();
+    const { setStep } = useTwoFactorAuthContext();
 
-    const {translate} = useLocalize();
+    const { translate } = useLocalize();
 
     return (
         <StepWrapper
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx
index a6fbddb81c0b..bbb5981865cd 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx
@@ -1,6 +1,6 @@
-import React, {useEffect, useRef} from 'react';
-import {ScrollView, View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
+import React, { useEffect, useRef } from 'react';
+import { ScrollView, View } from 'react-native';
+import { withOnyx } from 'react-native-onyx';
 import expensifyLogo from '@assets/images/expensify-logo-round-transparent.png';
 import Button from '@components/Button';
 import FixedFooter from '@components/FixedFooter';
@@ -15,20 +15,20 @@ import Clipboard from '@libs/Clipboard';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
 import TwoFactorAuthForm from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm';
-import type {TwoFactorAuthStepProps, TwoFactorAuthStepOnyxBothProps} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
+import type { TwoFactorAuthStepProps, TwoFactorAuthStepOnyxBothProps } from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
 const TROUBLESHOOTING_LINK = 'https://community.expensify.com/discussion/7736/faq-troubleshooting-two-factor-authentication-issues/p1?new=1';
 
-function VerifyStep({account, session}: TwoFactorAuthStepProps) {
+function VerifyStep({ account, session }: TwoFactorAuthStepProps) {
     const styles = useThemeStyles();
-    const {translate} = useLocalize();
+    const { translate } = useLocalize();
 
     const formRef = useRef<HTMLFormElement>(null);
 
-    const {setStep} = useTwoFactorAuthContext();
+    const { setStep } = useTwoFactorAuthContext();
 
     useEffect(() => {
         Session.clearAccountMessages();
@@ -133,6 +133,6 @@ function VerifyStep({account, session}: TwoFactorAuthStepProps) {
 VerifyStep.displayName = 'VerifyStep';
 
 export default withOnyx<TwoFactorAuthStepProps, TwoFactorAuthStepOnyxBothProps>({
-    account: {key: ONYXKEYS.ACCOUNT},
-    session: {key: ONYXKEYS.SESSION},
+    account: { key: ONYXKEYS.ACCOUNT },
+    session: { key: ONYXKEYS.SESSION },
 })(VerifyStep);
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/index.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/index.tsx
index c668a26f0e43..87b5040dd287 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/index.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/index.tsx
@@ -1,13 +1,13 @@
-import {createContext} from 'react';
-import type {TwoFactorAuthStep} from '@src/types/onyx/Account';
-import type {AnimationDirection} from '@components/AnimatedStep/AnimatedStepContext';
+import { createContext } from 'react';
+import type { TwoFactorAuthStep } from '@src/types/onyx/Account';
+import type { AnimationDirection } from '@components/AnimatedStep/AnimatedStepContext';
 
 type TwoFactorAuthContextType = {
     setStep: (step: TwoFactorAuthStep, animationDirection?: AnimationDirection) => void;
 };
 
 const TwoFactorAuthContext = createContext<TwoFactorAuthContextType>({
-    setStep: () => {},
+    setStep: () => { },
 });
 
 export default TwoFactorAuthContext;
\ No newline at end of file
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.tsx
index c0e45a21b050..79c4fce7146a 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.tsx
@@ -1,4 +1,4 @@
-import {useContext} from 'react';
+import { useContext } from 'react';
 import TwoFactorAuthContext from './index';
 
 export default function useTwoFactorAuthContext() {
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
index a9c9e93cdf19..1fb08d0e0634 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
@@ -1,8 +1,8 @@
-import React, {forwardRef, useCallback, useImperativeHandle, useState, useRef} from 'react';
-import type {Ref, FC, RefObject} from 'react';
-import {withOnyx} from 'react-native-onyx';
-import type {TranslationPaths} from '@src/languages/types';
-import type {Errors} from '@src/types/onyx/OnyxCommon'
+import React, { forwardRef, useCallback, useImperativeHandle, useState, useRef } from 'react';
+import type { Ref, FC, RefObject } from 'react';
+import { withOnyx } from 'react-native-onyx';
+import type { TranslationPaths } from '@src/languages/types';
+import type { Errors } from '@src/types/onyx/OnyxCommon'
 import MagicCodeInput from '@components/MagicCodeInput';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
@@ -19,7 +19,6 @@ type OnyxDataWithErrors = {
 
 type BaseTwoFactorAuthFormProps = TwoFactorAuthStepOnyxProps & {
     autoComplete: AutoCompleteVariant,
-    innerRef?: () => void,
     ref: RefObject<HTMLFormElement> | (() => void),
 };
 
@@ -35,12 +34,12 @@ type MagicCodeInputHandle = {
 function BaseTwoFactorAuthForm({
     account,
     autoComplete,
-    innerRef,
+    ref,
 }: BaseTwoFactorAuthFormProps) {
-    const [formError, setFormError] = useState<{twoFactorAuthCode?: string}>({});
+    const [formError, setFormError] = useState<{ twoFactorAuthCode?: string }>({});
     const [twoFactorAuthCode, setTwoFactorAuthCode] = useState('');
     const inputRef: Ref<MagicCodeInputHandle> = useRef(null);
-    const {translate} = useLocalize();
+    const { translate } = useLocalize();
 
     /**
      * Handle text input and clear formError upon text change
@@ -65,12 +64,12 @@ function BaseTwoFactorAuthForm({
             inputRef.current.blur();
         }
         if (!twoFactorAuthCode.trim()) {
-            setFormError({twoFactorAuthCode: 'twoFactorAuthForm.error.pleaseFillTwoFactorAuth'});
+            setFormError({ twoFactorAuthCode: 'twoFactorAuthForm.error.pleaseFillTwoFactorAuth' });
             return;
         }
 
         if (!ValidationUtils.isValidTwoFactorCode(twoFactorAuthCode)) {
-            setFormError({twoFactorAuthCode: 'twoFactorAuthForm.error.incorrect2fa'});
+            setFormError({ twoFactorAuthCode: 'twoFactorAuthForm.error.incorrect2fa' });
             return;
         }
 
@@ -78,7 +77,7 @@ function BaseTwoFactorAuthForm({
         Session.validateTwoFactorAuth(twoFactorAuthCode);
     }, [twoFactorAuthCode]);
 
-    useImperativeHandle(innerRef, () => ({
+    useImperativeHandle(ref as () => void, () => ({
         validateAndSubmitForm() {
             validateAndSubmitForm();
         },
@@ -104,16 +103,19 @@ function BaseTwoFactorAuthForm({
     );
 }
 
-const BaseTwoFactorAuthFormWithRef = forwardRef((props, ref) => (
+const BaseTwoFactorAuthFormWithRef = forwardRef(({
+    ref,
+    ...props
+}: BaseTwoFactorAuthFormProps) => (
     <BaseTwoFactorAuthForm
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
-        innerRef={ref}
+        ref={ref}
     />
 ));
 
 (BaseTwoFactorAuthFormWithRef as FC).displayName = 'BaseTwoFactorAuthFormWithRef';
 
 export default withOnyx<BaseTwoFactorAuthFormProps, TwoFactorAuthStepOnyxProps>({
-        account: {key: ONYXKEYS.ACCOUNT},
+    account: { key: ONYXKEYS.ACCOUNT },
 })(BaseTwoFactorAuthFormWithRef);
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.tsx
index 422b449c94d3..59350e53a874 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import type {RefObject} from 'react';
+import type { RefObject } from 'react';
 import BaseTwoFactorAuthForm from './BaseTwoFactorAuthForm';
 
 type TwoFactorAuthFormProps = {
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.tsx
index 404775f4be9c..739e20a5ff23 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.tsx
@@ -1,5 +1,5 @@
-import type {OnyxEntry} from 'react-native-onyx';
-import type {Account, Session} from '@src/types/onyx';
+import type { OnyxEntry } from 'react-native-onyx';
+import type { Account, Session } from '@src/types/onyx';
 
 
 type TwoFactorAuthStepOnyxNativeProps = {
@@ -21,4 +21,4 @@ type TwoFactorAuthStepProps = TwoFactorAuthStepOnyxBothProps & {
     recoveryCodes?: '',
 };
 
-export type {TwoFactorAuthStepOnyxNativeProps, TwoFactorAuthStepOnyxProps, TwoFactorAuthStepProps, TwoFactorAuthStepOnyxBothProps};
+export type { TwoFactorAuthStepOnyxNativeProps, TwoFactorAuthStepOnyxProps, TwoFactorAuthStepProps, TwoFactorAuthStepOnyxBothProps };
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
index 94a6c8f2ca1b..5ae2bb65048e 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
@@ -1,21 +1,21 @@
-import {useRoute} from '@react-navigation/native';
+import { useRoute } from '@react-navigation/native';
 // eslint-disable-next-line
 import lodashGet from 'lodash/get';
-import React, {useCallback, useEffect, useMemo, useState} from 'react';
-import {withOnyx} from 'react-native-onyx';
-import type {TwoFactorAuthStep} from '@src/types/onyx/Account';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { withOnyx } from 'react-native-onyx';
+import type { TwoFactorAuthStep } from '@src/types/onyx/Account';
 import useAnimatedStepContext from '@components/AnimatedStep/useAnimatedStepContext';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {AnimationDirection} from '@components/AnimatedStep/AnimatedStepContext';
+import type { AnimationDirection } from '@components/AnimatedStep/AnimatedStepContext';
 import CodesStep from './Steps/CodesStep';
 import DisabledStep from './Steps/DisabledStep';
 import EnabledStep from './Steps/EnabledStep';
 import SuccessStep from './Steps/SuccessStep';
 import VerifyStep from './Steps/VerifyStep';
 import TwoFactorAuthContext from './TwoFactorAuthContext';
-import type {TwoFactorAuthStepProps, TwoFactorAuthStepOnyxBothProps} from './TwoFactorAuthPropTypes';
+import type { TwoFactorAuthStepProps, TwoFactorAuthStepOnyxBothProps } from './TwoFactorAuthPropTypes';
 
 function TwoFactorAuthSteps({
     account,
@@ -24,7 +24,7 @@ function TwoFactorAuthSteps({
     const backTo = lodashGet(route.params, 'backTo', '');
     const [currentStep, setCurrentStep] = useState<TwoFactorAuthStep>(CONST.TWO_FACTOR_AUTH_STEPS.CODES);
 
-    const {setAnimationDirection} = useAnimatedStepContext();
+    const { setAnimationDirection } = useAnimatedStepContext();
 
     useEffect(() => () => TwoFactorAuthActions.clearTwoFactorAuthData(), []);
 
@@ -49,7 +49,7 @@ function TwoFactorAuthSteps({
         },
         [setAnimationDirection],
     );
-    const contextValue = useMemo(() => ({setStep: handleSetStep}), [handleSetStep]);
+    const contextValue = useMemo(() => ({ setStep: handleSetStep }), [handleSetStep]);
 
     const renderStep = () => {
         switch (currentStep) {
@@ -73,6 +73,6 @@ function TwoFactorAuthSteps({
 
 // eslint-disable-next-line rulesdir/onyx-props-must-have-default
 export default withOnyx<TwoFactorAuthStepProps, TwoFactorAuthStepOnyxBothProps>({
-    account: {key: ONYXKEYS.ACCOUNT},
-    session: {key: ONYXKEYS.SESSION},
+    account: { key: ONYXKEYS.ACCOUNT },
+    session: { key: ONYXKEYS.SESSION },
 })(TwoFactorAuthSteps);

From 4da146bf9d805186aa4ae9793b6ef746f520bc00 Mon Sep 17 00:00:00 2001
From: RohanSasne <rohansasne30@gmail.com>
Date: Thu, 15 Feb 2024 01:01:52 +0530
Subject: [PATCH 10/21] Fix Lint

---
 .../TwoFactorAuth/StepWrapper/StepWrapper.tsx |  2 +-
 .../StepWrapper/StepWrapperPropTypes.tsx      | 23 +++++-----
 .../TwoFactorAuth/Steps/CodesStep.tsx         | 42 +++++++++----------
 .../TwoFactorAuth/Steps/DisabledStep.tsx      |  2 +-
 .../TwoFactorAuth/Steps/EnabledStep.tsx       |  8 ++--
 .../TwoFactorAuth/Steps/SuccessStep.tsx       | 10 ++---
 .../TwoFactorAuth/Steps/VerifyStep.tsx        | 18 ++++----
 .../TwoFactorAuthContext/index.tsx            | 10 ++---
 .../TwoFactorAuthContext/useTwoFactorAuth.tsx |  2 +-
 .../BaseTwoFactorAuthForm.tsx                 | 40 +++++++-----------
 .../TwoFactorAuthForm/index.android.tsx       |  8 ++--
 .../TwoFactorAuth/TwoFactorAuthForm/index.tsx | 11 ++---
 .../TwoFactorAuth/TwoFactorAuthPropTypes.tsx  | 17 ++++----
 .../TwoFactorAuth/TwoFactorAuthSteps.tsx      | 24 +++++------
 14 files changed, 96 insertions(+), 121 deletions(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
index b343d6174b81..a3e03890a545 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
@@ -17,7 +17,7 @@ function StepWrapper({
     onEntryTransitionEnd,
 }: StepWrapperPropTypes) {
     const styles = useThemeStyles();
-    const { animationDirection } = useAnimatedStepContext();
+    const {animationDirection} = useAnimatedStepContext();
 
     return (
         <ScreenWrapper
diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.tsx b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.tsx
index c7132934bc82..bae5c1772a9d 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.tsx
@@ -1,29 +1,28 @@
 type StepWrapperPropTypes = {
     /** Title of the Header */
-    title?: string,
+    title?: string;
 
     /** Data to display a step counter in the header */
     stepCounter?: {
         /** Current step */
-        step: number,
+        step: number;
         /** Total number of steps */
-        total?: number,
+        total?: number;
         /** Text to display next to the step counter */
-        text?: string,
-    },
+        text?: string;
+    };
 
     /** Method to trigger when pressing back button of the header */
-    onBackButtonPress?: () => void,
+    onBackButtonPress?: () => void;
 
     /** Called when navigated Screen's transition is finished. It does not fire when user exits the page. */
-    onEntryTransitionEnd?: () => void,
+    onEntryTransitionEnd?: () => void;
 
     /** Children components */
-    children?: React.ReactNode,
+    children?: React.ReactNode;
 
     /** Flag to indicate if the keyboard avoiding view should be enabled */
-    shouldEnableKeyboardAvoidingView?: boolean,
+    shouldEnableKeyboardAvoidingView?: boolean;
+};
 
-}
-
-export default StepWrapperPropTypes;
\ No newline at end of file
+export default StepWrapperPropTypes;
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
index ae784eba2b50..754a0a8458a1 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
@@ -1,8 +1,6 @@
-import React, { useEffect, useState } from 'react';
-import { ActivityIndicator, ScrollView, View } from 'react-native';
-import { withOnyx } from 'react-native-onyx';
-import type { Route } from '@src/ROUTES';
-import type { TranslationPaths } from '@src/languages/types';
+import React, {useEffect, useState} from 'react';
+import {ActivityIndicator, ScrollView, View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
 import FixedFooter from '@components/FixedFooter';
 import FormHelpMessage from '@components/FormHelpMessage';
@@ -19,28 +17,27 @@ import Clipboard from '@libs/Clipboard';
 import localFileDownload from '@libs/localFileDownload';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
-import type { TwoFactorAuthStepOnyxProps } from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
+import type {TwoFactorAuthStepOnyxProps} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
 import * as Session from '@userActions/Session';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 import CONST from '@src/CONST';
+import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type {Route} from '@src/ROUTES';
 
 type CodesStepProps = TwoFactorAuthStepOnyxProps & {
     /** The route to go back to when the user cancels */
     backTo: Route | undefined;
-}
+};
 
-function CodesStep({
-    account,
-    backTo,
-}: CodesStepProps) {
+function CodesStep({account, backTo}: CodesStepProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
-    const { translate } = useLocalize();
-    const { isExtraSmallScreenWidth, isSmallScreenWidth } = useWindowDimensions();
+    const {translate} = useLocalize();
+    const {isExtraSmallScreenWidth, isSmallScreenWidth} = useWindowDimensions();
     const [error, setError] = useState('');
 
-    const { setStep } = useTwoFactorAuthContext();
+    const {setStep} = useTwoFactorAuthContext();
 
     useEffect(() => {
         if (account?.requiresTwoFactorAuth ?? account?.recoveryCodes) {
@@ -71,7 +68,7 @@ function CodesStep({
                     <View style={styles.mv3}>
                         <Text>{translate('twoFactorAuth.codesLoseAccess')}</Text>
                     </View>
-                    <View style={styles.twoFactorAuthCodesBox({ isExtraSmallScreenWidth, isSmallScreenWidth })}>
+                    <View style={styles.twoFactorAuthCodesBox({isExtraSmallScreenWidth, isSmallScreenWidth})}>
                         {account?.isLoading ? (
                             <View style={styles.twoFactorLoadingContainer}>
                                 <ActivityIndicator color={theme.spinner} />
@@ -80,15 +77,14 @@ function CodesStep({
                             <>
                                 <View style={styles.twoFactorAuthCodesContainer}>
                                     {Boolean(account?.recoveryCodes) &&
-                                        (account?.recoveryCodes?.split(', ').map((code) => (
+                                        account?.recoveryCodes?.split(', ').map((code) => (
                                             <Text
                                                 style={styles.twoFactorAuthCode}
                                                 key={code}
                                             >
                                                 {code}
                                             </Text>
-                                        )))}
-
+                                        ))}
                                 </View>
                                 <View style={styles.twoFactorAuthCodesButtonsContainer}>
                                     <PressableWithDelayToggle
@@ -104,8 +100,8 @@ function CodesStep({
                                         styles={[styles.button, styles.buttonMedium, styles.twoFactorAuthCodesButton]}
                                         textStyles={[styles.buttonMediumText]}
                                         accessible={false}
-                                        tooltipText=''
-                                        tooltipTextChecked=''
+                                        tooltipText=""
+                                        tooltipTextChecked=""
                                     />
                                     <PressableWithDelayToggle
                                         text={translate('common.download')}
@@ -119,8 +115,8 @@ function CodesStep({
                                         styles={[styles.button, styles.buttonMedium, styles.twoFactorAuthCodesButton]}
                                         textStyles={[styles.buttonMediumText]}
                                         accessible={false}
-                                        tooltipText=''
-                                        tooltipTextChecked=''
+                                        tooltipText=""
+                                        tooltipTextChecked=""
                                     />
                                 </View>
                             </>
@@ -155,5 +151,5 @@ function CodesStep({
 CodesStep.displayName = 'CodesStep';
 
 export default withOnyx<CodesStepProps, TwoFactorAuthStepOnyxProps>({
-    account: { key: ONYXKEYS.ACCOUNT },
+    account: {key: ONYXKEYS.ACCOUNT},
 })(CodesStep);
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.tsx
index 7a77cf21b5e7..db64a805d088 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.tsx
@@ -11,7 +11,7 @@ import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 
 function DisabledStep() {
     const styles = useThemeStyles();
-    const { translate } = useLocalize();
+    const {translate} = useLocalize();
 
     return (
         <StepWrapper title={translate('twoFactorAuth.disableTwoFactorAuth')}>
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.tsx
index bc38f640922e..59c145f9e348 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { ScrollView, View } from 'react-native';
+import React, {useState} from 'react';
+import {ScrollView, View} from 'react-native';
 import ConfirmModal from '@components/ConfirmModal';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
@@ -18,9 +18,9 @@ function EnabledStep() {
     const styles = useThemeStyles();
     const [isConfirmModalVisible, setIsConfirmModalVisible] = useState(false);
 
-    const { setStep } = useTwoFactorAuthContext();
+    const {setStep} = useTwoFactorAuthContext();
 
-    const { translate } = useLocalize();
+    const {translate} = useLocalize();
 
     return (
         <StepWrapper title={translate('twoFactorAuth.headerTitle')}>
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.tsx
index c79060446c6a..f14ed76211c9 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.tsx
@@ -6,20 +6,18 @@ import Navigation from '@navigation/Navigation';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
-import type { Route } from '@src/ROUTES';
 import CONST from '@src/CONST';
+import type {Route} from '@src/ROUTES';
 
 type SuccessStepProps = {
     /** The route where user needs to be redirected after setting up 2FA */
     backTo?: Route;
 };
 
-function SuccessStep({
-    backTo,
-}: SuccessStepProps) {
-    const { setStep } = useTwoFactorAuthContext();
+function SuccessStep({backTo}: SuccessStepProps) {
+    const {setStep} = useTwoFactorAuthContext();
 
-    const { translate } = useLocalize();
+    const {translate} = useLocalize();
 
     return (
         <StepWrapper
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx
index bbb5981865cd..d11db388c034 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx
@@ -1,6 +1,6 @@
-import React, { useEffect, useRef } from 'react';
-import { ScrollView, View } from 'react-native';
-import { withOnyx } from 'react-native-onyx';
+import React, {useEffect, useRef} from 'react';
+import {ScrollView, View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
 import expensifyLogo from '@assets/images/expensify-logo-round-transparent.png';
 import Button from '@components/Button';
 import FixedFooter from '@components/FixedFooter';
@@ -15,20 +15,20 @@ import Clipboard from '@libs/Clipboard';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
 import TwoFactorAuthForm from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm';
-import type { TwoFactorAuthStepProps, TwoFactorAuthStepOnyxBothProps } from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
+import type {TwoFactorAuthStepOnyxBothProps, TwoFactorAuthStepProps} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
 const TROUBLESHOOTING_LINK = 'https://community.expensify.com/discussion/7736/faq-troubleshooting-two-factor-authentication-issues/p1?new=1';
 
-function VerifyStep({ account, session }: TwoFactorAuthStepProps) {
+function VerifyStep({account, session}: TwoFactorAuthStepProps) {
     const styles = useThemeStyles();
-    const { translate } = useLocalize();
+    const {translate} = useLocalize();
 
     const formRef = useRef<HTMLFormElement>(null);
 
-    const { setStep } = useTwoFactorAuthContext();
+    const {setStep} = useTwoFactorAuthContext();
 
     useEffect(() => {
         Session.clearAccountMessages();
@@ -133,6 +133,6 @@ function VerifyStep({ account, session }: TwoFactorAuthStepProps) {
 VerifyStep.displayName = 'VerifyStep';
 
 export default withOnyx<TwoFactorAuthStepProps, TwoFactorAuthStepOnyxBothProps>({
-    account: { key: ONYXKEYS.ACCOUNT },
-    session: { key: ONYXKEYS.SESSION },
+    account: {key: ONYXKEYS.ACCOUNT},
+    session: {key: ONYXKEYS.SESSION},
 })(VerifyStep);
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/index.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/index.tsx
index 87b5040dd287..5b6ca64c7036 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/index.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/index.tsx
@@ -1,13 +1,13 @@
-import { createContext } from 'react';
-import type { TwoFactorAuthStep } from '@src/types/onyx/Account';
-import type { AnimationDirection } from '@components/AnimatedStep/AnimatedStepContext';
+import {createContext} from 'react';
+import type {AnimationDirection} from '@components/AnimatedStep/AnimatedStepContext';
+import type {TwoFactorAuthStep} from '@src/types/onyx/Account';
 
 type TwoFactorAuthContextType = {
     setStep: (step: TwoFactorAuthStep, animationDirection?: AnimationDirection) => void;
 };
 
 const TwoFactorAuthContext = createContext<TwoFactorAuthContextType>({
-    setStep: () => { },
+    setStep: () => {},
 });
 
-export default TwoFactorAuthContext;
\ No newline at end of file
+export default TwoFactorAuthContext;
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.tsx
index 79c4fce7146a..c0e45a21b050 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.tsx
@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import {useContext} from 'react';
 import TwoFactorAuthContext from './index';
 
 export default function useTwoFactorAuthContext() {
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
index 1fb08d0e0634..b49c237567a1 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
@@ -1,15 +1,15 @@
-import React, { forwardRef, useCallback, useImperativeHandle, useState, useRef } from 'react';
-import type { Ref, FC, RefObject } from 'react';
-import { withOnyx } from 'react-native-onyx';
-import type { TranslationPaths } from '@src/languages/types';
-import type { Errors } from '@src/types/onyx/OnyxCommon'
+import React, {forwardRef, useCallback, useImperativeHandle, useRef, useState} from 'react';
+import type {FC, Ref, RefObject} from 'react';
+import {withOnyx} from 'react-native-onyx';
 import MagicCodeInput from '@components/MagicCodeInput';
+import useLocalize from '@hooks/useLocalize';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
+import type {TwoFactorAuthStepOnyxProps} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
 import * as Session from '@userActions/Session';
+import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type { TwoFactorAuthStepOnyxProps } from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
-import useLocalize from '@hooks/useLocalize';
+import type {Errors} from '@src/types/onyx/OnyxCommon';
 
 type AutoCompleteVariant = 'sms-otp' | 'one-time-code' | 'off';
 
@@ -18,8 +18,8 @@ type OnyxDataWithErrors = {
 };
 
 type BaseTwoFactorAuthFormProps = TwoFactorAuthStepOnyxProps & {
-    autoComplete: AutoCompleteVariant,
-    ref: RefObject<HTMLFormElement> | (() => void),
+    autoComplete: AutoCompleteVariant;
+    ref: RefObject<HTMLFormElement> | (() => void);
 };
 
 type MagicCodeInputHandle = {
@@ -30,16 +30,11 @@ type MagicCodeInputHandle = {
     blur: () => void;
 };
 
-
-function BaseTwoFactorAuthForm({
-    account,
-    autoComplete,
-    ref,
-}: BaseTwoFactorAuthFormProps) {
-    const [formError, setFormError] = useState<{ twoFactorAuthCode?: string }>({});
+function BaseTwoFactorAuthForm({account, autoComplete, ref}: BaseTwoFactorAuthFormProps) {
+    const [formError, setFormError] = useState<{twoFactorAuthCode?: string}>({});
     const [twoFactorAuthCode, setTwoFactorAuthCode] = useState('');
     const inputRef: Ref<MagicCodeInputHandle> = useRef(null);
-    const { translate } = useLocalize();
+    const {translate} = useLocalize();
 
     /**
      * Handle text input and clear formError upon text change
@@ -64,12 +59,12 @@ function BaseTwoFactorAuthForm({
             inputRef.current.blur();
         }
         if (!twoFactorAuthCode.trim()) {
-            setFormError({ twoFactorAuthCode: 'twoFactorAuthForm.error.pleaseFillTwoFactorAuth' });
+            setFormError({twoFactorAuthCode: 'twoFactorAuthForm.error.pleaseFillTwoFactorAuth'});
             return;
         }
 
         if (!ValidationUtils.isValidTwoFactorCode(twoFactorAuthCode)) {
-            setFormError({ twoFactorAuthCode: 'twoFactorAuthForm.error.incorrect2fa' });
+            setFormError({twoFactorAuthCode: 'twoFactorAuthForm.error.incorrect2fa'});
             return;
         }
 
@@ -103,10 +98,7 @@ function BaseTwoFactorAuthForm({
     );
 }
 
-const BaseTwoFactorAuthFormWithRef = forwardRef(({
-    ref,
-    ...props
-}: BaseTwoFactorAuthFormProps) => (
+const BaseTwoFactorAuthFormWithRef = forwardRef(({ref, ...props}: BaseTwoFactorAuthFormProps) => (
     <BaseTwoFactorAuthForm
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
@@ -117,5 +109,5 @@ const BaseTwoFactorAuthFormWithRef = forwardRef(({
 (BaseTwoFactorAuthFormWithRef as FC).displayName = 'BaseTwoFactorAuthFormWithRef';
 
 export default withOnyx<BaseTwoFactorAuthFormProps, TwoFactorAuthStepOnyxProps>({
-    account: { key: ONYXKEYS.ACCOUNT },
+    account: {key: ONYXKEYS.ACCOUNT},
 })(BaseTwoFactorAuthFormWithRef);
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.tsx
index 637fcf2dbb93..e1282bd1698d 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.tsx
@@ -2,12 +2,10 @@ import React from 'react';
 import BaseTwoFactorAuthForm from './BaseTwoFactorAuthForm';
 
 type TwoFactorAuthFormProps = {
-    innerRef: () => void,
-}
+    innerRef: () => void;
+};
 
-function TwoFactorAuthForm({
-    innerRef,
-}: TwoFactorAuthFormProps) {
+function TwoFactorAuthForm({innerRef}: TwoFactorAuthFormProps) {
     return (
         <BaseTwoFactorAuthForm
             ref={innerRef}
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.tsx
index 59350e53a874..65a1890c2198 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.tsx
@@ -1,15 +1,12 @@
 import React from 'react';
-import type { RefObject } from 'react';
+import type {RefObject} from 'react';
 import BaseTwoFactorAuthForm from './BaseTwoFactorAuthForm';
 
 type TwoFactorAuthFormProps = {
-    innerRef: RefObject<HTMLFormElement> | (() => void),
-}
+    innerRef: RefObject<HTMLFormElement> | (() => void);
+};
 
-function TwoFactorAuthForm(
-    {
-        innerRef
-    }: TwoFactorAuthFormProps,) {
+function TwoFactorAuthForm({innerRef}: TwoFactorAuthFormProps) {
     return (
         <BaseTwoFactorAuthForm
             ref={innerRef}
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.tsx
index 739e20a5ff23..bf0dd950122e 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.tsx
@@ -1,6 +1,5 @@
-import type { OnyxEntry } from 'react-native-onyx';
-import type { Account, Session } from '@src/types/onyx';
-
+import type {OnyxEntry} from 'react-native-onyx';
+import type {Account, Session} from '@src/types/onyx';
 
 type TwoFactorAuthStepOnyxNativeProps = {
     /** Session of currently logged in user */
@@ -8,17 +7,15 @@ type TwoFactorAuthStepOnyxNativeProps = {
 };
 
 type TwoFactorAuthStepOnyxProps = {
-
-    account: OnyxEntry<Account>,
-
+    account: OnyxEntry<Account>;
 };
 
 type TwoFactorAuthStepOnyxBothProps = TwoFactorAuthStepOnyxNativeProps & TwoFactorAuthStepOnyxProps;
 
 type TwoFactorAuthStepProps = TwoFactorAuthStepOnyxBothProps & {
-    requiresTwoFactorAuth?: false,
-    twoFactorAuthStep?: '',
-    recoveryCodes?: '',
+    requiresTwoFactorAuth?: false;
+    twoFactorAuthStep?: '';
+    recoveryCodes?: '';
 };
 
-export type { TwoFactorAuthStepOnyxNativeProps, TwoFactorAuthStepOnyxProps, TwoFactorAuthStepProps, TwoFactorAuthStepOnyxBothProps };
+export type {TwoFactorAuthStepOnyxNativeProps, TwoFactorAuthStepOnyxProps, TwoFactorAuthStepProps, TwoFactorAuthStepOnyxBothProps};
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
index 5ae2bb65048e..2afae84c8850 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
@@ -1,30 +1,28 @@
-import { useRoute } from '@react-navigation/native';
+import {useRoute} from '@react-navigation/native';
 // eslint-disable-next-line
 import lodashGet from 'lodash/get';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { withOnyx } from 'react-native-onyx';
-import type { TwoFactorAuthStep } from '@src/types/onyx/Account';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import {withOnyx} from 'react-native-onyx';
+import type {AnimationDirection} from '@components/AnimatedStep/AnimatedStepContext';
 import useAnimatedStepContext from '@components/AnimatedStep/useAnimatedStepContext';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type { AnimationDirection } from '@components/AnimatedStep/AnimatedStepContext';
+import type {TwoFactorAuthStep} from '@src/types/onyx/Account';
 import CodesStep from './Steps/CodesStep';
 import DisabledStep from './Steps/DisabledStep';
 import EnabledStep from './Steps/EnabledStep';
 import SuccessStep from './Steps/SuccessStep';
 import VerifyStep from './Steps/VerifyStep';
 import TwoFactorAuthContext from './TwoFactorAuthContext';
-import type { TwoFactorAuthStepProps, TwoFactorAuthStepOnyxBothProps } from './TwoFactorAuthPropTypes';
+import type {TwoFactorAuthStepOnyxBothProps, TwoFactorAuthStepProps} from './TwoFactorAuthPropTypes';
 
-function TwoFactorAuthSteps({
-    account,
-}: TwoFactorAuthStepProps) {
+function TwoFactorAuthSteps({account}: TwoFactorAuthStepProps) {
     const route = useRoute();
     const backTo = lodashGet(route.params, 'backTo', '');
     const [currentStep, setCurrentStep] = useState<TwoFactorAuthStep>(CONST.TWO_FACTOR_AUTH_STEPS.CODES);
 
-    const { setAnimationDirection } = useAnimatedStepContext();
+    const {setAnimationDirection} = useAnimatedStepContext();
 
     useEffect(() => () => TwoFactorAuthActions.clearTwoFactorAuthData(), []);
 
@@ -49,7 +47,7 @@ function TwoFactorAuthSteps({
         },
         [setAnimationDirection],
     );
-    const contextValue = useMemo(() => ({ setStep: handleSetStep }), [handleSetStep]);
+    const contextValue = useMemo(() => ({setStep: handleSetStep}), [handleSetStep]);
 
     const renderStep = () => {
         switch (currentStep) {
@@ -73,6 +71,6 @@ function TwoFactorAuthSteps({
 
 // eslint-disable-next-line rulesdir/onyx-props-must-have-default
 export default withOnyx<TwoFactorAuthStepProps, TwoFactorAuthStepOnyxBothProps>({
-    account: { key: ONYXKEYS.ACCOUNT },
-    session: { key: ONYXKEYS.SESSION },
+    account: {key: ONYXKEYS.ACCOUNT},
+    session: {key: ONYXKEYS.SESSION},
 })(TwoFactorAuthSteps);

From 03ea487a80d44491912db1260838caabe640b46a Mon Sep 17 00:00:00 2001
From: RohanSasne <rohansasne30@gmail.com>
Date: Thu, 15 Feb 2024 01:26:12 +0530
Subject: [PATCH 11/21] Upgrade on review

---
 .../TwoFactorAuth/StepWrapper/StepWrapper.tsx | 30 +++++++++++++++++--
 .../StepWrapper/StepWrapperPropTypes.tsx      | 28 -----------------
 .../TwoFactorAuth/Steps/CodesStep.tsx         |  2 +-
 .../BaseTwoFactorAuthForm.tsx                 |  6 ++--
 .../TwoFactorAuthForm/index.android.tsx       |  7 ++---
 .../TwoFactorAuth/TwoFactorAuthForm/index.tsx |  6 ++--
 .../TwoFactorAuth/TwoFactorAuthForm/types.ts  | 11 +++++++
 .../TwoFactorAuth/TwoFactorAuthSteps.tsx      |  7 ++---
 8 files changed, 49 insertions(+), 48 deletions(-)
 delete mode 100644 src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.tsx
 create mode 100644 src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types.ts

diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
index a3e03890a545..c23561c3ccdc 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
@@ -6,7 +6,33 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
-import type StepWrapperPropTypes from './StepWrapperPropTypes';
+
+type StepWrapperProps = {
+    /** Title of the Header */
+    title?: string;
+
+    /** Data to display a step counter in the header */
+    stepCounter?: {
+        /** Current step */
+        step: number;
+        /** Total number of steps */
+        total?: number;
+        /** Text to display next to the step counter */
+        text?: string;
+    };
+
+    /** Method to trigger when pressing back button of the header */
+    onBackButtonPress?: () => void;
+
+    /** Called when navigated Screen's transition is finished. It does not fire when user exits the page. */
+    onEntryTransitionEnd?: () => void;
+
+    /** Children components */
+    children?: React.ReactNode;
+
+    /** Flag to indicate if the keyboard avoiding view should be enabled */
+    shouldEnableKeyboardAvoidingView?: boolean;
+};
 
 function StepWrapper({
     title = '',
@@ -15,7 +41,7 @@ function StepWrapper({
     children = null,
     shouldEnableKeyboardAvoidingView = true,
     onEntryTransitionEnd,
-}: StepWrapperPropTypes) {
+}: StepWrapperProps) {
     const styles = useThemeStyles();
     const {animationDirection} = useAnimatedStepContext();
 
diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.tsx b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.tsx
deleted file mode 100644
index bae5c1772a9d..000000000000
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-type StepWrapperPropTypes = {
-    /** Title of the Header */
-    title?: string;
-
-    /** Data to display a step counter in the header */
-    stepCounter?: {
-        /** Current step */
-        step: number;
-        /** Total number of steps */
-        total?: number;
-        /** Text to display next to the step counter */
-        text?: string;
-    };
-
-    /** Method to trigger when pressing back button of the header */
-    onBackButtonPress?: () => void;
-
-    /** Called when navigated Screen's transition is finished. It does not fire when user exits the page. */
-    onEntryTransitionEnd?: () => void;
-
-    /** Children components */
-    children?: React.ReactNode;
-
-    /** Flag to indicate if the keyboard avoiding view should be enabled */
-    shouldEnableKeyboardAvoidingView?: boolean;
-};
-
-export default StepWrapperPropTypes;
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
index 754a0a8458a1..60fd7a91a466 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
@@ -124,7 +124,7 @@ function CodesStep({account, backTo}: CodesStepProps) {
                     </View>
                 </Section>
                 <FixedFooter style={[styles.mtAuto, styles.pt5]}>
-                    {Object.keys(error).length !== 0 && (
+                    {Object.keys(error).length && (
                         <FormHelpMessage
                             isError
                             message={translate(error as TranslationPaths)}
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
index b49c237567a1..aa2b7e9dd892 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
@@ -1,5 +1,5 @@
 import React, {forwardRef, useCallback, useImperativeHandle, useRef, useState} from 'react';
-import type {FC, Ref, RefObject} from 'react';
+import type {FC, RefObject} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import MagicCodeInput from '@components/MagicCodeInput';
 import useLocalize from '@hooks/useLocalize';
@@ -33,7 +33,7 @@ type MagicCodeInputHandle = {
 function BaseTwoFactorAuthForm({account, autoComplete, ref}: BaseTwoFactorAuthFormProps) {
     const [formError, setFormError] = useState<{twoFactorAuthCode?: string}>({});
     const [twoFactorAuthCode, setTwoFactorAuthCode] = useState('');
-    const inputRef: Ref<MagicCodeInputHandle> = useRef(null);
+    const inputRef = useRef<MagicCodeInputHandle | null>(null);
     const {translate} = useLocalize();
 
     /**
@@ -106,8 +106,6 @@ const BaseTwoFactorAuthFormWithRef = forwardRef(({ref, ...props}: BaseTwoFactorA
     />
 ));
 
-(BaseTwoFactorAuthFormWithRef as FC).displayName = 'BaseTwoFactorAuthFormWithRef';
-
 export default withOnyx<BaseTwoFactorAuthFormProps, TwoFactorAuthStepOnyxProps>({
     account: {key: ONYXKEYS.ACCOUNT},
 })(BaseTwoFactorAuthFormWithRef);
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.tsx
index e1282bd1698d..115c90a6578d 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.tsx
@@ -1,11 +1,8 @@
 import React from 'react';
 import BaseTwoFactorAuthForm from './BaseTwoFactorAuthForm';
+import type {TwoFactorAuthFormNativeProps} from './types';
 
-type TwoFactorAuthFormProps = {
-    innerRef: () => void;
-};
-
-function TwoFactorAuthForm({innerRef}: TwoFactorAuthFormProps) {
+function TwoFactorAuthForm({innerRef}: TwoFactorAuthFormNativeProps) {
     return (
         <BaseTwoFactorAuthForm
             ref={innerRef}
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.tsx
index 65a1890c2198..0de1417716e6 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
-import type {RefObject} from 'react';
 import BaseTwoFactorAuthForm from './BaseTwoFactorAuthForm';
+import type {TwoFactorAuthFormProps} from './types';
+
 
-type TwoFactorAuthFormProps = {
-    innerRef: RefObject<HTMLFormElement> | (() => void);
-};
 
 function TwoFactorAuthForm({innerRef}: TwoFactorAuthFormProps) {
     return (
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types.ts b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types.ts
new file mode 100644
index 000000000000..6a8b96d3702e
--- /dev/null
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types.ts
@@ -0,0 +1,11 @@
+import type {RefObject} from 'react';
+
+type TwoFactorAuthFormProps = {
+    innerRef: RefObject<HTMLFormElement> | (() => void);
+};
+
+type TwoFactorAuthFormNativeProps = {
+    innerRef: () => void;
+};
+
+export type {TwoFactorAuthFormProps, TwoFactorAuthFormNativeProps};
\ No newline at end of file
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
index 2afae84c8850..070353fd53f7 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
@@ -1,6 +1,5 @@
 import {useRoute} from '@react-navigation/native';
-// eslint-disable-next-line
-import lodashGet from 'lodash/get';
+
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import type {AnimationDirection} from '@components/AnimatedStep/AnimatedStepContext';
@@ -19,7 +18,7 @@ import type {TwoFactorAuthStepOnyxBothProps, TwoFactorAuthStepProps} from './Two
 
 function TwoFactorAuthSteps({account}: TwoFactorAuthStepProps) {
     const route = useRoute();
-    const backTo = lodashGet(route.params, 'backTo', '');
+    const backTo = route.params?.backTo ?? '';
     const [currentStep, setCurrentStep] = useState<TwoFactorAuthStep>(CONST.TWO_FACTOR_AUTH_STEPS.CODES);
 
     const {setAnimationDirection} = useAnimatedStepContext();
@@ -69,7 +68,7 @@ function TwoFactorAuthSteps({account}: TwoFactorAuthStepProps) {
     return <TwoFactorAuthContext.Provider value={contextValue}>{renderStep()}</TwoFactorAuthContext.Provider>;
 }
 
-// eslint-disable-next-line rulesdir/onyx-props-must-have-default
+
 export default withOnyx<TwoFactorAuthStepProps, TwoFactorAuthStepOnyxBothProps>({
     account: {key: ONYXKEYS.ACCOUNT},
     session: {key: ONYXKEYS.SESSION},

From f024581ddab8074dbd7592d1c54f5e7775f7407c Mon Sep 17 00:00:00 2001
From: RohanSasne <rohansasne30@gmail.com>
Date: Mon, 19 Feb 2024 00:24:28 +0530
Subject: [PATCH 12/21] Fix route push back

---
 config/webpack/webpack.dev.js                        |  2 +-
 .../TwoFactorAuth/StepWrapper/StepWrapper.tsx        |  6 ++----
 .../TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx      | 12 ++----------
 .../TwoFactorAuth/TwoFactorAuthForm/index.tsx        |  2 --
 .../TwoFactorAuth/TwoFactorAuthForm/types.ts         |  2 +-
 .../TwoFactorAuth/TwoFactorAuthPropTypes.tsx         |  9 ++++++++-
 .../Security/TwoFactorAuth/TwoFactorAuthSteps.tsx    |  7 +++----
 7 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/config/webpack/webpack.dev.js b/config/webpack/webpack.dev.js
index e28383eff557..f8e9c0f9645d 100644
--- a/config/webpack/webpack.dev.js
+++ b/config/webpack/webpack.dev.js
@@ -44,7 +44,7 @@ module.exports = (env = {}) =>
                 ...proxySettings,
                 historyApiFallback: true,
                 port,
-                host: 'dev.new.expensify.com',
+                host: '0.0.0.0',
                 server: {
                     type: 'https',
                     options: {
diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
index c23561c3ccdc..906ffbbf55d9 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
@@ -6,8 +6,9 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
+import type ChildrenProps from '@src/types/utils/ChildrenProps';
 
-type StepWrapperProps = {
+type StepWrapperProps = ChildrenProps & {
     /** Title of the Header */
     title?: string;
 
@@ -27,9 +28,6 @@ type StepWrapperProps = {
     /** Called when navigated Screen's transition is finished. It does not fire when user exits the page. */
     onEntryTransitionEnd?: () => void;
 
-    /** Children components */
-    children?: React.ReactNode;
-
     /** Flag to indicate if the keyboard avoiding view should be enabled */
     shouldEnableKeyboardAvoidingView?: boolean;
 };
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
index aa2b7e9dd892..1807c5a1e7bb 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
@@ -1,5 +1,5 @@
 import React, {forwardRef, useCallback, useImperativeHandle, useRef, useState} from 'react';
-import type {FC, RefObject} from 'react';
+import type {RefObject} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import MagicCodeInput from '@components/MagicCodeInput';
 import useLocalize from '@hooks/useLocalize';
@@ -98,14 +98,6 @@ function BaseTwoFactorAuthForm({account, autoComplete, ref}: BaseTwoFactorAuthFo
     );
 }
 
-const BaseTwoFactorAuthFormWithRef = forwardRef(({ref, ...props}: BaseTwoFactorAuthFormProps) => (
-    <BaseTwoFactorAuthForm
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        ref={ref}
-    />
-));
-
 export default withOnyx<BaseTwoFactorAuthFormProps, TwoFactorAuthStepOnyxProps>({
     account: {key: ONYXKEYS.ACCOUNT},
-})(BaseTwoFactorAuthFormWithRef);
+})(forwardRef(BaseTwoFactorAuthForm));
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.tsx
index 0de1417716e6..e12288b900b0 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.tsx
@@ -2,8 +2,6 @@ import React from 'react';
 import BaseTwoFactorAuthForm from './BaseTwoFactorAuthForm';
 import type {TwoFactorAuthFormProps} from './types';
 
-
-
 function TwoFactorAuthForm({innerRef}: TwoFactorAuthFormProps) {
     return (
         <BaseTwoFactorAuthForm
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types.ts b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types.ts
index 6a8b96d3702e..afa2214f10c8 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types.ts
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types.ts
@@ -8,4 +8,4 @@ type TwoFactorAuthFormNativeProps = {
     innerRef: () => void;
 };
 
-export type {TwoFactorAuthFormProps, TwoFactorAuthFormNativeProps};
\ No newline at end of file
+export type {TwoFactorAuthFormProps, TwoFactorAuthFormNativeProps};
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.tsx
index bf0dd950122e..473a0f81c11f 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.tsx
@@ -1,4 +1,5 @@
 import type {OnyxEntry} from 'react-native-onyx';
+import type {Route} from '@src/ROUTES';
 import type {Account, Session} from '@src/types/onyx';
 
 type TwoFactorAuthStepOnyxNativeProps = {
@@ -12,10 +13,16 @@ type TwoFactorAuthStepOnyxProps = {
 
 type TwoFactorAuthStepOnyxBothProps = TwoFactorAuthStepOnyxNativeProps & TwoFactorAuthStepOnyxProps;
 
+type RouteParam = {
+    params: {
+        backTo?: Route | undefined;
+    };
+};
+
 type TwoFactorAuthStepProps = TwoFactorAuthStepOnyxBothProps & {
     requiresTwoFactorAuth?: false;
     twoFactorAuthStep?: '';
     recoveryCodes?: '';
 };
 
-export type {TwoFactorAuthStepOnyxNativeProps, TwoFactorAuthStepOnyxProps, TwoFactorAuthStepProps, TwoFactorAuthStepOnyxBothProps};
+export type {TwoFactorAuthStepOnyxNativeProps, TwoFactorAuthStepOnyxProps, TwoFactorAuthStepProps, TwoFactorAuthStepOnyxBothProps, RouteParam};
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
index 070353fd53f7..13014dbbf0cd 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
@@ -1,5 +1,5 @@
 import {useRoute} from '@react-navigation/native';
-
+import type {RouteProp} from '@react-navigation/native';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import type {AnimationDirection} from '@components/AnimatedStep/AnimatedStepContext';
@@ -14,10 +14,10 @@ import EnabledStep from './Steps/EnabledStep';
 import SuccessStep from './Steps/SuccessStep';
 import VerifyStep from './Steps/VerifyStep';
 import TwoFactorAuthContext from './TwoFactorAuthContext';
-import type {TwoFactorAuthStepOnyxBothProps, TwoFactorAuthStepProps} from './TwoFactorAuthPropTypes';
+import type {RouteParam, TwoFactorAuthStepOnyxBothProps, TwoFactorAuthStepProps} from './TwoFactorAuthPropTypes';
 
 function TwoFactorAuthSteps({account}: TwoFactorAuthStepProps) {
-    const route = useRoute();
+    const route = useRoute<RouteProp<RouteParam, 'params'>>();
     const backTo = route.params?.backTo ?? '';
     const [currentStep, setCurrentStep] = useState<TwoFactorAuthStep>(CONST.TWO_FACTOR_AUTH_STEPS.CODES);
 
@@ -68,7 +68,6 @@ function TwoFactorAuthSteps({account}: TwoFactorAuthStepProps) {
     return <TwoFactorAuthContext.Provider value={contextValue}>{renderStep()}</TwoFactorAuthContext.Provider>;
 }
 
-
 export default withOnyx<TwoFactorAuthStepProps, TwoFactorAuthStepOnyxBothProps>({
     account: {key: ONYXKEYS.ACCOUNT},
     session: {key: ONYXKEYS.SESSION},

From 88c6b0a154f94a82e1f338f229210c30c5dc8bab Mon Sep 17 00:00:00 2001
From: RohanSasne <rohansasne30@gmail.com>
Date: Fri, 23 Feb 2024 20:06:13 +0530
Subject: [PATCH 13/21] Fix typeerrors

---
 config/webpack/webpack.dev.js                 |  2 +-
 src/libs/Navigation/types.ts                  |  7 ++++-
 .../TwoFactorAuth/StepWrapper/StepWrapper.tsx |  2 +-
 .../TwoFactorAuth/Steps/CodesStep.tsx         | 14 ++++------
 .../TwoFactorAuth/Steps/SuccessStep.tsx       |  9 ++----
 .../TwoFactorAuth/Steps/VerifyStep.tsx        |  9 +++---
 .../BaseTwoFactorAuthForm.tsx                 |  2 +-
 .../TwoFactorAuth/TwoFactorAuthPropTypes.tsx  | 28 -------------------
 .../TwoFactorAuth/TwoFactorAuthStepProps.ts   | 16 +++++++++++
 .../TwoFactorAuth/TwoFactorAuthSteps.tsx      |  9 +++---
 10 files changed, 43 insertions(+), 55 deletions(-)
 delete mode 100644 src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.tsx
 create mode 100644 src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthStepProps.ts

diff --git a/config/webpack/webpack.dev.js b/config/webpack/webpack.dev.js
index f8e9c0f9645d..e28383eff557 100644
--- a/config/webpack/webpack.dev.js
+++ b/config/webpack/webpack.dev.js
@@ -44,7 +44,7 @@ module.exports = (env = {}) =>
                 ...proxySettings,
                 historyApiFallback: true,
                 port,
-                host: '0.0.0.0',
+                host: 'dev.new.expensify.com',
                 server: {
                     type: 'https',
                     options: {
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
index ba59bcf48c05..6eaef4bc2c56 100644
--- a/src/libs/Navigation/types.ts
+++ b/src/libs/Navigation/types.ts
@@ -80,6 +80,10 @@ type WorkspaceSwitcherNavigatorParamList = {
     [SCREENS.WORKSPACE_SWITCHER.ROOT]: undefined;
 };
 
+type BackToParams = {
+    backTo?: Routes;
+};
+
 type SettingsNavigatorParamList = {
     [SCREENS.SETTINGS.ROOT]: undefined;
     [SCREENS.SETTINGS.SHARE_CODE]: undefined;
@@ -165,7 +169,7 @@ type SettingsNavigatorParamList = {
     [SCREENS.GET_ASSISTANCE]: {
         backTo: Routes;
     };
-    [SCREENS.SETTINGS.TWO_FACTOR_AUTH]: undefined;
+    [SCREENS.SETTINGS.TWO_FACTOR_AUTH]: BackToParams;
     [SCREENS.SETTINGS.REPORT_CARD_LOST_OR_DAMAGED]: undefined;
     [SCREENS.KEYBOARD_SHORTCUTS]: undefined;
 } & ReimbursementAccountNavigatorParamList;
@@ -576,4 +580,5 @@ export type {
     WorkspaceSwitcherNavigatorParamList,
     OnboardEngagementNavigatorParamList,
     SwitchPolicyIDParams,
+    BackToParams,
 };
diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
index 906ffbbf55d9..64b9064c78e8 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
@@ -51,7 +51,7 @@ function StepWrapper({
         >
             <AnimatedStep
                 style={[styles.flex1]}
-                onAnimationEnd={onEntryTransitionEnd as () => void}
+                onAnimationEnd={onEntryTransitionEnd}
                 direction={animationDirection}
             >
                 <HeaderWithBackButton
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
index 60fd7a91a466..4d8337e4f8e1 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
@@ -5,6 +5,7 @@ import Button from '@components/Button';
 import FixedFooter from '@components/FixedFooter';
 import FormHelpMessage from '@components/FormHelpMessage';
 import * as Expensicons from '@components/Icon/Expensicons';
+import type {BackToParams} from '@libs/Navigation/types'
 import * as Illustrations from '@components/Icon/Illustrations';
 import PressableWithDelayToggle from '@components/Pressable/PressableWithDelayToggle';
 import Section from '@components/Section';
@@ -17,18 +18,14 @@ import Clipboard from '@libs/Clipboard';
 import localFileDownload from '@libs/localFileDownload';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
-import type {TwoFactorAuthStepOnyxProps} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
+import type {TwoFactorAuthStepOnyxProps} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthStepProps';
 import * as Session from '@userActions/Session';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Route} from '@src/ROUTES';
 
-type CodesStepProps = TwoFactorAuthStepOnyxProps & {
-    /** The route to go back to when the user cancels */
-    backTo: Route | undefined;
-};
+type CodesStepProps = TwoFactorAuthStepOnyxProps & BackToParams
 
 function CodesStep({account, backTo}: CodesStepProps) {
     const theme = useTheme();
@@ -40,7 +37,8 @@ function CodesStep({account, backTo}: CodesStepProps) {
     const {setStep} = useTwoFactorAuthContext();
 
     useEffect(() => {
-        if (account?.requiresTwoFactorAuth ?? account?.recoveryCodes) {
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        if (account?.requiresTwoFactorAuth || account?.recoveryCodes) {
             return;
         }
         Session.toggleTwoFactorAuth(true);
@@ -124,7 +122,7 @@ function CodesStep({account, backTo}: CodesStepProps) {
                     </View>
                 </Section>
                 <FixedFooter style={[styles.mtAuto, styles.pt5]}>
-                    {Object.keys(error).length && (
+                    {Boolean(error) && (
                         <FormHelpMessage
                             isError
                             message={translate(error as TranslationPaths)}
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.tsx
index f14ed76211c9..a09c12a7fa6d 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.tsx
@@ -1,20 +1,15 @@
 import React from 'react';
 import ConfirmationPage from '@components/ConfirmationPage';
 import LottieAnimations from '@components/LottieAnimations';
+import type {BackToParams} from '@libs/Navigation/types';
 import useLocalize from '@hooks/useLocalize';
 import Navigation from '@navigation/Navigation';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 import CONST from '@src/CONST';
-import type {Route} from '@src/ROUTES';
 
-type SuccessStepProps = {
-    /** The route where user needs to be redirected after setting up 2FA */
-    backTo?: Route;
-};
-
-function SuccessStep({backTo}: SuccessStepProps) {
+function SuccessStep({backTo}: BackToParams) {
     const {setStep} = useTwoFactorAuthContext();
 
     const {translate} = useLocalize();
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx
index d11db388c034..5f5a8421147c 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx
@@ -15,16 +15,18 @@ import Clipboard from '@libs/Clipboard';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
 import TwoFactorAuthForm from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm';
-import type {TwoFactorAuthStepOnyxBothProps, TwoFactorAuthStepProps} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
+import type {TwoFactorAuthStepOnyxProps, TwoFactorAuthStepProps} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthStepProps';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import { useSession } from '@components/OnyxProvider';
 
 const TROUBLESHOOTING_LINK = 'https://community.expensify.com/discussion/7736/faq-troubleshooting-two-factor-authentication-issues/p1?new=1';
 
-function VerifyStep({account, session}: TwoFactorAuthStepProps) {
+function VerifyStep({account}: TwoFactorAuthStepProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const session =  useSession();
 
     const formRef = useRef<HTMLFormElement>(null);
 
@@ -132,7 +134,6 @@ function VerifyStep({account, session}: TwoFactorAuthStepProps) {
 
 VerifyStep.displayName = 'VerifyStep';
 
-export default withOnyx<TwoFactorAuthStepProps, TwoFactorAuthStepOnyxBothProps>({
+export default withOnyx<TwoFactorAuthStepProps, TwoFactorAuthStepOnyxProps>({
     account: {key: ONYXKEYS.ACCOUNT},
-    session: {key: ONYXKEYS.SESSION},
 })(VerifyStep);
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
index 1807c5a1e7bb..7888758d5688 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
@@ -5,7 +5,7 @@ import MagicCodeInput from '@components/MagicCodeInput';
 import useLocalize from '@hooks/useLocalize';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import type {TwoFactorAuthStepOnyxProps} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
+import type {TwoFactorAuthStepOnyxProps} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthStepProps';
 import * as Session from '@userActions/Session';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.tsx
deleted file mode 100644
index 473a0f81c11f..000000000000
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import type {OnyxEntry} from 'react-native-onyx';
-import type {Route} from '@src/ROUTES';
-import type {Account, Session} from '@src/types/onyx';
-
-type TwoFactorAuthStepOnyxNativeProps = {
-    /** Session of currently logged in user */
-    session: OnyxEntry<Session>;
-};
-
-type TwoFactorAuthStepOnyxProps = {
-    account: OnyxEntry<Account>;
-};
-
-type TwoFactorAuthStepOnyxBothProps = TwoFactorAuthStepOnyxNativeProps & TwoFactorAuthStepOnyxProps;
-
-type RouteParam = {
-    params: {
-        backTo?: Route | undefined;
-    };
-};
-
-type TwoFactorAuthStepProps = TwoFactorAuthStepOnyxBothProps & {
-    requiresTwoFactorAuth?: false;
-    twoFactorAuthStep?: '';
-    recoveryCodes?: '';
-};
-
-export type {TwoFactorAuthStepOnyxNativeProps, TwoFactorAuthStepOnyxProps, TwoFactorAuthStepProps, TwoFactorAuthStepOnyxBothProps, RouteParam};
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthStepProps.ts b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthStepProps.ts
new file mode 100644
index 000000000000..a507ee0ad5ec
--- /dev/null
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthStepProps.ts
@@ -0,0 +1,16 @@
+import type {OnyxEntry} from 'react-native-onyx';
+import type {Account} from '@src/types/onyx';
+
+
+type TwoFactorAuthStepOnyxProps = {
+    account: OnyxEntry<Account>;
+};
+
+
+type TwoFactorAuthStepProps = TwoFactorAuthStepOnyxProps & {
+    requiresTwoFactorAuth?: false;
+    twoFactorAuthStep?: '';
+    recoveryCodes?: '';
+};
+
+export type {TwoFactorAuthStepOnyxProps, TwoFactorAuthStepProps};
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
index 13014dbbf0cd..aad5829c2119 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
@@ -1,6 +1,8 @@
 import {useRoute} from '@react-navigation/native';
 import type {RouteProp} from '@react-navigation/native';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import type {SettingsNavigatorParamList} from '@libs/Navigation/types'
+import type SCREENS from '@src/SCREENS';
 import {withOnyx} from 'react-native-onyx';
 import type {AnimationDirection} from '@components/AnimatedStep/AnimatedStepContext';
 import useAnimatedStepContext from '@components/AnimatedStep/useAnimatedStepContext';
@@ -14,10 +16,10 @@ import EnabledStep from './Steps/EnabledStep';
 import SuccessStep from './Steps/SuccessStep';
 import VerifyStep from './Steps/VerifyStep';
 import TwoFactorAuthContext from './TwoFactorAuthContext';
-import type {RouteParam, TwoFactorAuthStepOnyxBothProps, TwoFactorAuthStepProps} from './TwoFactorAuthPropTypes';
+import type { TwoFactorAuthStepOnyxProps, TwoFactorAuthStepProps} from './TwoFactorAuthStepProps';
 
 function TwoFactorAuthSteps({account}: TwoFactorAuthStepProps) {
-    const route = useRoute<RouteProp<RouteParam, 'params'>>();
+    const route = useRoute<RouteProp<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.TWO_FACTOR_AUTH>>();
     const backTo = route.params?.backTo ?? '';
     const [currentStep, setCurrentStep] = useState<TwoFactorAuthStep>(CONST.TWO_FACTOR_AUTH_STEPS.CODES);
 
@@ -68,7 +70,6 @@ function TwoFactorAuthSteps({account}: TwoFactorAuthStepProps) {
     return <TwoFactorAuthContext.Provider value={contextValue}>{renderStep()}</TwoFactorAuthContext.Provider>;
 }
 
-export default withOnyx<TwoFactorAuthStepProps, TwoFactorAuthStepOnyxBothProps>({
+export default withOnyx<TwoFactorAuthStepProps, TwoFactorAuthStepOnyxProps>({
     account: {key: ONYXKEYS.ACCOUNT},
-    session: {key: ONYXKEYS.SESSION},
 })(TwoFactorAuthSteps);

From a6290af0766b768a77e794a7bf46ff6ddefbaf8a Mon Sep 17 00:00:00 2001
From: RohanSasne <rohansasne30@gmail.com>
Date: Sat, 24 Feb 2024 01:26:19 +0530
Subject: [PATCH 14/21] Add more changes

---
 src/components/AnimatedStep/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AnimatedStep/index.tsx b/src/components/AnimatedStep/index.tsx
index 66d2108ca5d8..2fb3e3167ff8 100644
--- a/src/components/AnimatedStep/index.tsx
+++ b/src/components/AnimatedStep/index.tsx
@@ -15,7 +15,7 @@ type AnimatedStepProps = ChildrenProps & {
     direction: AnimationDirection;
 
     /** Callback to fire when the animation ends */
-    onAnimationEnd: () => void;
+    onAnimationEnd?: () => void;
 };
 
 function AnimatedStep({onAnimationEnd, direction = CONST.ANIMATION_DIRECTION.IN, style, children}: AnimatedStepProps) {

From 5c427d143cfa6d11b682a0e62fd2541e5fdfa6e5 Mon Sep 17 00:00:00 2001
From: RohanSasne <rohansasne30@gmail.com>
Date: Sat, 24 Feb 2024 13:55:12 +0530
Subject: [PATCH 15/21] Fix TranslationPaths

---
 .../settings/Security/TwoFactorAuth/Steps/CodesStep.tsx    | 4 ++--
 .../Security/TwoFactorAuth/TwoFactorAuthForm/types.ts      | 7 ++++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
index 4d8337e4f8e1..c621d31277e5 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
@@ -32,7 +32,7 @@ function CodesStep({account, backTo}: CodesStepProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isExtraSmallScreenWidth, isSmallScreenWidth} = useWindowDimensions();
-    const [error, setError] = useState('');
+    const [error, setError] = useState<TranslationPaths | ''>('');
 
     const {setStep} = useTwoFactorAuthContext();
 
@@ -125,7 +125,7 @@ function CodesStep({account, backTo}: CodesStepProps) {
                     {Boolean(error) && (
                         <FormHelpMessage
                             isError
-                            message={translate(error as TranslationPaths)}
+                            message={error ? translate(error) : ''}
                             style={[styles.mb3]}
                         />
                     )}
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types.ts b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types.ts
index afa2214f10c8..9635d0468b20 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types.ts
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types.ts
@@ -8,4 +8,9 @@ type TwoFactorAuthFormNativeProps = {
     innerRef: () => void;
 };
 
-export type {TwoFactorAuthFormProps, TwoFactorAuthFormNativeProps};
+type BaseTwoFactorAuthFormRef = {
+    validateAndSubmitForm: () => void;
+    focus: () => void;
+};
+
+export type {TwoFactorAuthFormProps, TwoFactorAuthFormNativeProps, BaseTwoFactorAuthFormRef};

From 91e5f5a9e6d55f81e805d886e5b64bb777fc656c Mon Sep 17 00:00:00 2001
From: Rohan Sasne <rohansasne30@gmail.com>
Date: Thu, 29 Feb 2024 01:18:38 +0530
Subject: [PATCH 16/21] run prettier

---
 .../settings/Security/TwoFactorAuth/Steps/CodesStep.tsx     | 4 ++--
 .../settings/Security/TwoFactorAuth/Steps/SuccessStep.tsx   | 2 +-
 .../settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx    | 4 ++--
 .../Security/TwoFactorAuth/TwoFactorAuthStepProps.ts        | 2 --
 .../settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx  | 6 +++---
 5 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
index c621d31277e5..c344fc37c177 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
@@ -5,7 +5,6 @@ import Button from '@components/Button';
 import FixedFooter from '@components/FixedFooter';
 import FormHelpMessage from '@components/FormHelpMessage';
 import * as Expensicons from '@components/Icon/Expensicons';
-import type {BackToParams} from '@libs/Navigation/types'
 import * as Illustrations from '@components/Icon/Illustrations';
 import PressableWithDelayToggle from '@components/Pressable/PressableWithDelayToggle';
 import Section from '@components/Section';
@@ -16,6 +15,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Clipboard from '@libs/Clipboard';
 import localFileDownload from '@libs/localFileDownload';
+import type {BackToParams} from '@libs/Navigation/types';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
 import type {TwoFactorAuthStepOnyxProps} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthStepProps';
@@ -25,7 +25,7 @@ import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 
-type CodesStepProps = TwoFactorAuthStepOnyxProps & BackToParams
+type CodesStepProps = TwoFactorAuthStepOnyxProps & BackToParams;
 
 function CodesStep({account, backTo}: CodesStepProps) {
     const theme = useTheme();
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.tsx
index a09c12a7fa6d..5e92fb8649ef 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import ConfirmationPage from '@components/ConfirmationPage';
 import LottieAnimations from '@components/LottieAnimations';
-import type {BackToParams} from '@libs/Navigation/types';
 import useLocalize from '@hooks/useLocalize';
+import type {BackToParams} from '@libs/Navigation/types';
 import Navigation from '@navigation/Navigation';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx
index 5f5a8421147c..0a201342df76 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx
@@ -5,6 +5,7 @@ import expensifyLogo from '@assets/images/expensify-logo-round-transparent.png';
 import Button from '@components/Button';
 import FixedFooter from '@components/FixedFooter';
 import * as Expensicons from '@components/Icon/Expensicons';
+import {useSession} from '@components/OnyxProvider';
 import PressableWithDelayToggle from '@components/Pressable/PressableWithDelayToggle';
 import QRCode from '@components/QRCode';
 import Text from '@components/Text';
@@ -19,14 +20,13 @@ import type {TwoFactorAuthStepOnyxProps, TwoFactorAuthStepProps} from '@pages/se
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import { useSession } from '@components/OnyxProvider';
 
 const TROUBLESHOOTING_LINK = 'https://community.expensify.com/discussion/7736/faq-troubleshooting-two-factor-authentication-issues/p1?new=1';
 
 function VerifyStep({account}: TwoFactorAuthStepProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const session =  useSession();
+    const session = useSession();
 
     const formRef = useRef<HTMLFormElement>(null);
 
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthStepProps.ts b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthStepProps.ts
index a507ee0ad5ec..c9156ef51a37 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthStepProps.ts
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthStepProps.ts
@@ -1,12 +1,10 @@
 import type {OnyxEntry} from 'react-native-onyx';
 import type {Account} from '@src/types/onyx';
 
-
 type TwoFactorAuthStepOnyxProps = {
     account: OnyxEntry<Account>;
 };
 
-
 type TwoFactorAuthStepProps = TwoFactorAuthStepOnyxProps & {
     requiresTwoFactorAuth?: false;
     twoFactorAuthStep?: '';
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
index aad5829c2119..d2b791b077cd 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
@@ -1,14 +1,14 @@
 import {useRoute} from '@react-navigation/native';
 import type {RouteProp} from '@react-navigation/native';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
-import type {SettingsNavigatorParamList} from '@libs/Navigation/types'
-import type SCREENS from '@src/SCREENS';
 import {withOnyx} from 'react-native-onyx';
 import type {AnimationDirection} from '@components/AnimatedStep/AnimatedStepContext';
 import useAnimatedStepContext from '@components/AnimatedStep/useAnimatedStepContext';
+import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type SCREENS from '@src/SCREENS';
 import type {TwoFactorAuthStep} from '@src/types/onyx/Account';
 import CodesStep from './Steps/CodesStep';
 import DisabledStep from './Steps/DisabledStep';
@@ -16,7 +16,7 @@ import EnabledStep from './Steps/EnabledStep';
 import SuccessStep from './Steps/SuccessStep';
 import VerifyStep from './Steps/VerifyStep';
 import TwoFactorAuthContext from './TwoFactorAuthContext';
-import type { TwoFactorAuthStepOnyxProps, TwoFactorAuthStepProps} from './TwoFactorAuthStepProps';
+import type {TwoFactorAuthStepOnyxProps, TwoFactorAuthStepProps} from './TwoFactorAuthStepProps';
 
 function TwoFactorAuthSteps({account}: TwoFactorAuthStepProps) {
     const route = useRoute<RouteProp<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.TWO_FACTOR_AUTH>>();

From d71cd4ee3655913e024427b2044a98f46793534c Mon Sep 17 00:00:00 2001
From: Rohan Sasne <rohansasne30@gmail.com>
Date: Thu, 29 Feb 2024 01:33:02 +0530
Subject: [PATCH 17/21] fix ref to forwardedReg

---
 config/webpack/webpack.dev.js                         |  2 +-
 .../TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx       | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/config/webpack/webpack.dev.js b/config/webpack/webpack.dev.js
index e28383eff557..f8e9c0f9645d 100644
--- a/config/webpack/webpack.dev.js
+++ b/config/webpack/webpack.dev.js
@@ -44,7 +44,7 @@ module.exports = (env = {}) =>
                 ...proxySettings,
                 historyApiFallback: true,
                 port,
-                host: 'dev.new.expensify.com',
+                host: '0.0.0.0',
                 server: {
                     type: 'https',
                     options: {
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
index 7888758d5688..267d365f0550 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
@@ -1,5 +1,5 @@
 import React, {forwardRef, useCallback, useImperativeHandle, useRef, useState} from 'react';
-import type {RefObject} from 'react';
+import type {ForwardedRef, RefObject} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import MagicCodeInput from '@components/MagicCodeInput';
 import useLocalize from '@hooks/useLocalize';
@@ -19,7 +19,6 @@ type OnyxDataWithErrors = {
 
 type BaseTwoFactorAuthFormProps = TwoFactorAuthStepOnyxProps & {
     autoComplete: AutoCompleteVariant;
-    ref: RefObject<HTMLFormElement> | (() => void);
 };
 
 type MagicCodeInputHandle = {
@@ -30,7 +29,11 @@ type MagicCodeInputHandle = {
     blur: () => void;
 };
 
-function BaseTwoFactorAuthForm({account, autoComplete, ref}: BaseTwoFactorAuthFormProps) {
+type RefType = {
+    validateAndSubmitForm: () => void;
+    }
+
+function BaseTwoFactorAuthForm({account, autoComplete}: BaseTwoFactorAuthFormProps, ref: ForwardedRef<RefType>) {
     const [formError, setFormError] = useState<{twoFactorAuthCode?: string}>({});
     const [twoFactorAuthCode, setTwoFactorAuthCode] = useState('');
     const inputRef = useRef<MagicCodeInputHandle | null>(null);
@@ -72,7 +75,7 @@ function BaseTwoFactorAuthForm({account, autoComplete, ref}: BaseTwoFactorAuthFo
         Session.validateTwoFactorAuth(twoFactorAuthCode);
     }, [twoFactorAuthCode]);
 
-    useImperativeHandle(ref as () => void, () => ({
+    useImperativeHandle(ref, () => ({
         validateAndSubmitForm() {
             validateAndSubmitForm();
         },

From dec2d84ee02df06ac1aab18b0ffec451fe12d300 Mon Sep 17 00:00:00 2001
From: Gandalf <rohansasne30@gmail.com>
Date: Thu, 29 Feb 2024 01:44:25 +0530
Subject: [PATCH 18/21] Update webpack.dev.js

---
 config/webpack/webpack.dev.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/webpack/webpack.dev.js b/config/webpack/webpack.dev.js
index f8e9c0f9645d..e28383eff557 100644
--- a/config/webpack/webpack.dev.js
+++ b/config/webpack/webpack.dev.js
@@ -44,7 +44,7 @@ module.exports = (env = {}) =>
                 ...proxySettings,
                 historyApiFallback: true,
                 port,
-                host: '0.0.0.0',
+                host: 'dev.new.expensify.com',
                 server: {
                     type: 'https',
                     options: {

From 053833d066a540941c6e79c91ed9d92d6f3ab5af Mon Sep 17 00:00:00 2001
From: Gandalf <rohansasne30@gmail.com>
Date: Thu, 29 Feb 2024 03:50:39 +0530
Subject: [PATCH 19/21] Update BaseTwoFactorAuthForm.tsx

---
 .../TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
index 267d365f0550..2cbaf7cfac1b 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
@@ -31,7 +31,7 @@ type MagicCodeInputHandle = {
 
 type RefType = {
     validateAndSubmitForm: () => void;
-    }
+};
 
 function BaseTwoFactorAuthForm({account, autoComplete}: BaseTwoFactorAuthFormProps, ref: ForwardedRef<RefType>) {
     const [formError, setFormError] = useState<{twoFactorAuthCode?: string}>({});

From cd2c46506da658e4a0c9089cce54c66255ee4717 Mon Sep 17 00:00:00 2001
From: Rohan Sasne <rohansasne30@gmail.com>
Date: Tue, 5 Mar 2024 01:47:36 +0530
Subject: [PATCH 20/21] Add recommeneded typescript changes

---
 src/components/MagicCodeInput.tsx             |  2 ++
 .../TwoFactorAuth/StepWrapper/StepWrapper.tsx | 10 ++----
 .../TwoFactorAuth/Steps/CodesStep.tsx         | 11 +++---
 .../TwoFactorAuth/Steps/VerifyStep.tsx        | 10 +++---
 .../BaseTwoFactorAuthForm.tsx                 | 35 ++++---------------
 .../TwoFactorAuthForm/index.android.tsx       |  4 +--
 .../TwoFactorAuth/TwoFactorAuthForm/types.ts  | 18 +++++-----
 .../TwoFactorAuth/TwoFactorAuthStepProps.ts   | 14 --------
 .../TwoFactorAuth/TwoFactorAuthSteps.tsx      |  6 ++--
 9 files changed, 38 insertions(+), 72 deletions(-)
 delete mode 100644 src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthStepProps.ts

diff --git a/src/components/MagicCodeInput.tsx b/src/components/MagicCodeInput.tsx
index 46c96fd706a9..a68c8303531b 100644
--- a/src/components/MagicCodeInput.tsx
+++ b/src/components/MagicCodeInput.tsx
@@ -430,3 +430,5 @@ function MagicCodeInput(
 MagicCodeInput.displayName = 'MagicCodeInput';
 
 export default forwardRef(MagicCodeInput);
+
+export type {AutoCompleteVariant, MagicCodeInputHandle};
diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
index 64b9064c78e8..146bdbfff667 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
@@ -6,6 +6,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
+import type {StepCounterParams} from '@src/languages/types';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 
 type StepWrapperProps = ChildrenProps & {
@@ -13,14 +14,7 @@ type StepWrapperProps = ChildrenProps & {
     title?: string;
 
     /** Data to display a step counter in the header */
-    stepCounter?: {
-        /** Current step */
-        step: number;
-        /** Total number of steps */
-        total?: number;
-        /** Text to display next to the step counter */
-        text?: string;
-    };
+    stepCounter?: StepCounterParams;
 
     /** Method to trigger when pressing back button of the header */
     onBackButtonPress?: () => void;
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
index c344fc37c177..d6c7a1abcd4f 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
@@ -18,21 +18,20 @@ import localFileDownload from '@libs/localFileDownload';
 import type {BackToParams} from '@libs/Navigation/types';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
-import type {TwoFactorAuthStepOnyxProps} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthStepProps';
+import type {BaseTwoFactorAuthFormOnyxProps} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types';
 import * as Session from '@userActions/Session';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 import CONST from '@src/CONST';
-import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 
-type CodesStepProps = TwoFactorAuthStepOnyxProps & BackToParams;
+type CodesStepProps = BaseTwoFactorAuthFormOnyxProps & BackToParams;
 
 function CodesStep({account, backTo}: CodesStepProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isExtraSmallScreenWidth, isSmallScreenWidth} = useWindowDimensions();
-    const [error, setError] = useState<TranslationPaths | ''>('');
+    const [error, setError] = useState('');
 
     const {setStep} = useTwoFactorAuthContext();
 
@@ -125,7 +124,7 @@ function CodesStep({account, backTo}: CodesStepProps) {
                     {Boolean(error) && (
                         <FormHelpMessage
                             isError
-                            message={error ? translate(error) : ''}
+                            message={error}
                             style={[styles.mb3]}
                         />
                     )}
@@ -148,6 +147,6 @@ function CodesStep({account, backTo}: CodesStepProps) {
 
 CodesStep.displayName = 'CodesStep';
 
-export default withOnyx<CodesStepProps, TwoFactorAuthStepOnyxProps>({
+export default withOnyx<CodesStepProps, BaseTwoFactorAuthFormOnyxProps>({
     account: {key: ONYXKEYS.ACCOUNT},
 })(CodesStep);
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx
index 0a201342df76..d9998c777f3b 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx
@@ -16,19 +16,21 @@ import Clipboard from '@libs/Clipboard';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
 import TwoFactorAuthForm from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm';
-import type {TwoFactorAuthStepOnyxProps, TwoFactorAuthStepProps} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthStepProps';
+import type {BaseTwoFactorAuthFormOnyxProps, BaseTwoFactorAuthFormRef} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
 const TROUBLESHOOTING_LINK = 'https://community.expensify.com/discussion/7736/faq-troubleshooting-two-factor-authentication-issues/p1?new=1';
 
-function VerifyStep({account}: TwoFactorAuthStepProps) {
+type VerifyStepProps = BaseTwoFactorAuthFormOnyxProps;
+
+function VerifyStep({account}: VerifyStepProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const session = useSession();
 
-    const formRef = useRef<HTMLFormElement>(null);
+    const formRef = useRef<BaseTwoFactorAuthFormRef>(null);
 
     const {setStep} = useTwoFactorAuthContext();
 
@@ -134,6 +136,6 @@ function VerifyStep({account}: TwoFactorAuthStepProps) {
 
 VerifyStep.displayName = 'VerifyStep';
 
-export default withOnyx<TwoFactorAuthStepProps, TwoFactorAuthStepOnyxProps>({
+export default withOnyx<VerifyStepProps, BaseTwoFactorAuthFormOnyxProps>({
     account: {key: ONYXKEYS.ACCOUNT},
 })(VerifyStep);
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
index 2cbaf7cfac1b..33484c2aee35 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
@@ -1,43 +1,22 @@
 import React, {forwardRef, useCallback, useImperativeHandle, useRef, useState} from 'react';
-import type {ForwardedRef, RefObject} from 'react';
+import type {ForwardedRef, RefAttributes} from 'react';
 import {withOnyx} from 'react-native-onyx';
+import type {AutoCompleteVariant, MagicCodeInputHandle} from '@components/MagicCodeInput';
 import MagicCodeInput from '@components/MagicCodeInput';
-import useLocalize from '@hooks/useLocalize';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import type {TwoFactorAuthStepOnyxProps} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthStepProps';
 import * as Session from '@userActions/Session';
-import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Errors} from '@src/types/onyx/OnyxCommon';
+import type {BaseTwoFactorAuthFormOnyxProps, BaseTwoFactorAuthFormRef} from './types';
 
-type AutoCompleteVariant = 'sms-otp' | 'one-time-code' | 'off';
-
-type OnyxDataWithErrors = {
-    errors?: Errors | null;
-};
-
-type BaseTwoFactorAuthFormProps = TwoFactorAuthStepOnyxProps & {
+type BaseTwoFactorAuthFormProps = BaseTwoFactorAuthFormOnyxProps & {
     autoComplete: AutoCompleteVariant;
 };
 
-type MagicCodeInputHandle = {
-    focus: () => void;
-    focusLastSelected: () => void;
-    resetFocus: () => void;
-    clear: () => void;
-    blur: () => void;
-};
-
-type RefType = {
-    validateAndSubmitForm: () => void;
-};
-
-function BaseTwoFactorAuthForm({account, autoComplete}: BaseTwoFactorAuthFormProps, ref: ForwardedRef<RefType>) {
+function BaseTwoFactorAuthForm({account, autoComplete}: BaseTwoFactorAuthFormProps, ref: ForwardedRef<BaseTwoFactorAuthFormRef>) {
     const [formError, setFormError] = useState<{twoFactorAuthCode?: string}>({});
     const [twoFactorAuthCode, setTwoFactorAuthCode] = useState('');
     const inputRef = useRef<MagicCodeInputHandle | null>(null);
-    const {translate} = useLocalize();
 
     /**
      * Handle text input and clear formError upon text change
@@ -94,13 +73,13 @@ function BaseTwoFactorAuthForm({account, autoComplete}: BaseTwoFactorAuthFormPro
             value={twoFactorAuthCode}
             onChangeText={onTextInput}
             onFulfill={validateAndSubmitForm}
-            errorText={formError.twoFactorAuthCode ? translate(formError.twoFactorAuthCode as TranslationPaths) : ErrorUtils.getLatestErrorMessage(account as OnyxDataWithErrors)}
+            errorText={formError.twoFactorAuthCode ?? ErrorUtils.getLatestErrorMessage(account)}
             ref={inputRef}
             autoFocus={false}
         />
     );
 }
 
-export default withOnyx<BaseTwoFactorAuthFormProps, TwoFactorAuthStepOnyxProps>({
+export default withOnyx<BaseTwoFactorAuthFormProps & RefAttributes<BaseTwoFactorAuthFormRef>, BaseTwoFactorAuthFormOnyxProps>({
     account: {key: ONYXKEYS.ACCOUNT},
 })(forwardRef(BaseTwoFactorAuthForm));
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.tsx
index 115c90a6578d..55d8850d3f1d 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import BaseTwoFactorAuthForm from './BaseTwoFactorAuthForm';
-import type {TwoFactorAuthFormNativeProps} from './types';
+import type {TwoFactorAuthFormProps} from './types';
 
-function TwoFactorAuthForm({innerRef}: TwoFactorAuthFormNativeProps) {
+function TwoFactorAuthForm({innerRef}: TwoFactorAuthFormProps) {
     return (
         <BaseTwoFactorAuthForm
             ref={innerRef}
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types.ts b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types.ts
index 9635d0468b20..baac250a3d66 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types.ts
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types.ts
@@ -1,11 +1,9 @@
-import type {RefObject} from 'react';
+import type {ForwardedRef} from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
+import type {Account} from '@src/types/onyx';
 
-type TwoFactorAuthFormProps = {
-    innerRef: RefObject<HTMLFormElement> | (() => void);
-};
-
-type TwoFactorAuthFormNativeProps = {
-    innerRef: () => void;
+type BaseTwoFactorAuthFormOnyxProps = {
+    account: OnyxEntry<Account>;
 };
 
 type BaseTwoFactorAuthFormRef = {
@@ -13,4 +11,8 @@ type BaseTwoFactorAuthFormRef = {
     focus: () => void;
 };
 
-export type {TwoFactorAuthFormProps, TwoFactorAuthFormNativeProps, BaseTwoFactorAuthFormRef};
+type TwoFactorAuthFormProps = {
+    innerRef: ForwardedRef<BaseTwoFactorAuthFormRef>;
+};
+
+export type {BaseTwoFactorAuthFormOnyxProps, TwoFactorAuthFormProps, BaseTwoFactorAuthFormRef};
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthStepProps.ts b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthStepProps.ts
deleted file mode 100644
index c9156ef51a37..000000000000
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthStepProps.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type {OnyxEntry} from 'react-native-onyx';
-import type {Account} from '@src/types/onyx';
-
-type TwoFactorAuthStepOnyxProps = {
-    account: OnyxEntry<Account>;
-};
-
-type TwoFactorAuthStepProps = TwoFactorAuthStepOnyxProps & {
-    requiresTwoFactorAuth?: false;
-    twoFactorAuthStep?: '';
-    recoveryCodes?: '';
-};
-
-export type {TwoFactorAuthStepOnyxProps, TwoFactorAuthStepProps};
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
index d2b791b077cd..c8f2c357f05f 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
@@ -16,7 +16,9 @@ import EnabledStep from './Steps/EnabledStep';
 import SuccessStep from './Steps/SuccessStep';
 import VerifyStep from './Steps/VerifyStep';
 import TwoFactorAuthContext from './TwoFactorAuthContext';
-import type {TwoFactorAuthStepOnyxProps, TwoFactorAuthStepProps} from './TwoFactorAuthStepProps';
+import type {BaseTwoFactorAuthFormOnyxProps} from './TwoFactorAuthForm/types';
+
+type TwoFactorAuthStepProps = BaseTwoFactorAuthFormOnyxProps;
 
 function TwoFactorAuthSteps({account}: TwoFactorAuthStepProps) {
     const route = useRoute<RouteProp<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.TWO_FACTOR_AUTH>>();
@@ -70,6 +72,6 @@ function TwoFactorAuthSteps({account}: TwoFactorAuthStepProps) {
     return <TwoFactorAuthContext.Provider value={contextValue}>{renderStep()}</TwoFactorAuthContext.Provider>;
 }
 
-export default withOnyx<TwoFactorAuthStepProps, TwoFactorAuthStepOnyxProps>({
+export default withOnyx<TwoFactorAuthStepProps, BaseTwoFactorAuthFormOnyxProps>({
     account: {key: ONYXKEYS.ACCOUNT},
 })(TwoFactorAuthSteps);

From 3cdc3ce4f3b501be78a11515192107b4a66db7b7 Mon Sep 17 00:00:00 2001
From: Gandalf <rohansasne30@gmail.com>
Date: Tue, 5 Mar 2024 02:38:41 +0530
Subject: [PATCH 21/21] remove unintended whitespace

---
 src/components/MagicCodeInput.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/MagicCodeInput.tsx b/src/components/MagicCodeInput.tsx
index a68c8303531b..93febc4fd3c0 100644
--- a/src/components/MagicCodeInput.tsx
+++ b/src/components/MagicCodeInput.tsx
@@ -430,5 +430,4 @@ function MagicCodeInput(
 MagicCodeInput.displayName = 'MagicCodeInput';
 
 export default forwardRef(MagicCodeInput);
-
 export type {AutoCompleteVariant, MagicCodeInputHandle};