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) {
diff --git a/src/hooks/useWindowDimensions/index.native.ts b/src/hooks/useWindowDimensions/index.native.ts
index f727a40b0c3b..8b420412cf24 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;
     const isSmallScreen = true;
 
     return {
@@ -21,6 +22,7 @@ export default function (): WindowDimensions {
         isSmallScreenWidth,
         isMediumScreenWidth,
         isLargeScreenWidth,
+        isExtraSmallScreenWidth,
         isSmallScreen,
     };
 }
diff --git a/src/hooks/useWindowDimensions/index.ts b/src/hooks/useWindowDimensions/index.ts
index 6e68e696ba89..e257b03e2865 100644
--- a/src/hooks/useWindowDimensions/index.ts
+++ b/src/hooks/useWindowDimensions/index.ts
@@ -24,6 +24,7 @@ export default function (useCachedViewportHeight = false): WindowDimensions {
     const isSmallScreenWidth = windowWidth <= variables.mobileResponsiveWidthBreakpoint;
     const isMediumScreenWidth = windowWidth > variables.mobileResponsiveWidthBreakpoint && windowWidth <= variables.tabletResponsiveWidthBreakpoint;
     const isLargeScreenWidth = windowWidth > variables.tabletResponsiveWidthBreakpoint;
+    const isExtraSmallScreenWidth = windowWidth <= variables.extraSmallMobileResponsiveWidthBreakpoint;
 
     const lowerScreenDimmension = Math.min(windowWidth, windowHeight);
     const isSmallScreen = lowerScreenDimmension <= variables.mobileResponsiveWidthBreakpoint;
@@ -88,6 +89,7 @@ export default function (useCachedViewportHeight = false): WindowDimensions {
         isSmallScreenWidth,
         isMediumScreenWidth,
         isLargeScreenWidth,
+        isExtraSmallScreenWidth,
         isSmallScreen,
     };
 }
diff --git a/src/hooks/useWindowDimensions/types.ts b/src/hooks/useWindowDimensions/types.ts
index d7a1fe41d187..fa74e03f185c 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;
     isSmallScreen: boolean;
 };
 
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
index 3d9bc25bb19d..23d3fa9ca588 100644
--- a/src/libs/Navigation/types.ts
+++ b/src/libs/Navigation/types.ts
@@ -97,6 +97,10 @@ type WorkspaceSwitcherNavigatorParamList = {
     [SCREENS.WORKSPACE_SWITCHER.ROOT]: undefined;
 };
 
+type BackToParams = {
+    backTo?: Routes;
+};
+
 type SettingsNavigatorParamList = {
     [SCREENS.SETTINGS.ROOT]: undefined;
     [SCREENS.SETTINGS.SHARE_CODE]: undefined;
@@ -200,7 +204,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;
     [SCREENS.SETTINGS.EXIT_SURVEY.REASON]: undefined;
@@ -634,4 +638,5 @@ export type {
     WorkspaceSwitcherNavigatorParamList,
     OnboardEngagementNavigatorParamList,
     SwitchPolicyIDParams,
+    BackToParams,
 };
diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
similarity index 68%
rename from src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
rename to src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
index ba899a0e2d20..146bdbfff667 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.tsx
@@ -6,19 +6,35 @@ 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 {StepCounterParams} from '@src/languages/types';
+import type ChildrenProps from '@src/types/utils/ChildrenProps';
+
+type StepWrapperProps = ChildrenProps & {
+    /** Title of the Header */
+    title?: string;
+
+    /** Data to display a step counter in the header */
+    stepCounter?: StepCounterParams;
+
+    /** 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;
+
+    /** Flag to indicate if the keyboard avoiding view should be enabled */
+    shouldEnableKeyboardAvoidingView?: boolean;
+};
 
 function StepWrapper({
     title = '',
-    stepCounter = null,
+    stepCounter,
     onBackButtonPress = () => TwoFactorAuthActions.quitAndNavigateBack(),
     children = null,
     shouldEnableKeyboardAvoidingView = true,
     onEntryTransitionEnd,
-}) {
+}: StepWrapperProps) {
     const styles = useThemeStyles();
-    const shouldShowStepCounter = Boolean(stepCounter);
-
     const {animationDirection} = useAnimatedStepContext();
 
     return (
@@ -34,7 +50,6 @@ function StepWrapper({
             >
                 <HeaderWithBackButton
                     title={title}
-                    shouldShowStepCounter={shouldShowStepCounter}
                     stepCounter={stepCounter}
                     onBackButtonPress={onBackButtonPress}
                 />
@@ -44,7 +59,6 @@ function StepWrapper({
     );
 }
 
-StepWrapper.propTypes = StepWrapperPropTypes;
 StepWrapper.displayName = 'StepWrapper';
 
 export default StepWrapper;
diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.js b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.js
deleted file mode 100644
index 3c06cc7bca52..000000000000
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapperPropTypes.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import PropTypes from 'prop-types';
-
-export default {
-    /** Title of the Header */
-    title: PropTypes.string,
-
-    /** Data to display a step counter in the header */
-    stepCounter: PropTypes.shape({
-        /** Current step */
-        step: PropTypes.number,
-        /** Total number of steps */
-        total: PropTypes.number,
-        /** Text to display next to the step counter */
-        text: PropTypes.string,
-    }),
-
-    /** Method to trigger when pressing back button of the header */
-    onBackButtonPress: PropTypes.func,
-
-    /** Called when navigated Screen's transition is finished. It does not fire when user exits the page. */
-    onEntryTransitionEnd: PropTypes.func,
-
-    /** Children components */
-    children: PropTypes.node,
-
-    /** Flag to indicate if the keyboard avoiding view should be enabled */
-    shouldEnableKeyboardAvoidingView: PropTypes.bool,
-};
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
similarity index 83%
rename from src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
rename to src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
index aafa144e769f..d6c7a1abcd4f 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
@@ -1,7 +1,6 @@
 import React, {useEffect, useState} from 'react';
 import {ActivityIndicator, ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
 import Button from '@components/Button';
 import FixedFooter from '@components/FixedFooter';
 import FormHelpMessage from '@components/FormHelpMessage';
@@ -16,15 +15,18 @@ 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 {defaultAccount, TwoFactorAuthPropTypes} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
+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 ONYXKEYS from '@src/ONYXKEYS';
 
-function CodesStep({account = defaultAccount, backTo}) {
+type CodesStepProps = BaseTwoFactorAuthFormOnyxProps & BackToParams;
+
+function CodesStep({account, backTo}: CodesStepProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -34,7 +36,8 @@ function CodesStep({account = defaultAccount, backTo}) {
     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);
@@ -63,15 +66,15 @@ function CodesStep({account = defaultAccount, backTo}) {
                         <Text>{translate('twoFactorAuth.codesLoseAccess')}</Text>
                     </View>
                     <View style={styles.twoFactorAuthCodesBox({isExtraSmallScreenWidth, isSmallScreenWidth})}>
-                        {account.isLoading ? (
+                        {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}
@@ -87,24 +90,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,7 +121,7 @@ function CodesStep({account = defaultAccount, backTo}) {
                     </View>
                 </Section>
                 <FixedFooter style={[styles.mtAuto, styles.pt5]}>
-                    {!_.isEmpty(error) && (
+                    {Boolean(error) && (
                         <FormHelpMessage
                             isError
                             message={error}
@@ -123,7 +132,7 @@ function CodesStep({account = defaultAccount, backTo}) {
                         success
                         text={translate('common.next')}
                         onPress={() => {
-                            if (!account.codesAreCopied) {
+                            if (!account?.codesAreCopied) {
                                 setError('twoFactorAuth.errorStepCodes');
                                 return;
                             }
@@ -136,10 +145,8 @@ function CodesStep({account = defaultAccount, backTo}) {
     );
 }
 
-CodesStep.propTypes = TwoFactorAuthPropTypes;
 CodesStep.displayName = 'CodesStep';
 
-// eslint-disable-next-line rulesdir/onyx-props-must-have-default
-export default withOnyx({
+export default withOnyx<CodesStepProps, BaseTwoFactorAuthFormOnyxProps>({
     account: {key: ONYXKEYS.ACCOUNT},
 })(CodesStep);
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..5e92fb8649ef 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.tsx
@@ -1,24 +1,15 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import ConfirmationPage from '@components/ConfirmationPage';
 import LottieAnimations from '@components/LottieAnimations';
 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';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 import CONST from '@src/CONST';
 
-const propTypes = {
-    /** The route where user needs to be redirected after setting up 2FA */
-    backTo: PropTypes.string,
-};
-
-const defaultProps = {
-    backTo: '',
-};
-
-function SuccessStep({backTo}) {
+function SuccessStep({backTo}: BackToParams) {
     const {setStep} = useTwoFactorAuthContext();
 
     const {translate} = useLocalize();
@@ -49,7 +40,4 @@ function SuccessStep({backTo}) {
     );
 }
 
-SuccessStep.propTypes = propTypes;
-SuccessStep.defaultProps = defaultProps;
-
 export default SuccessStep;
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..d9998c777f3b 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx
@@ -1,11 +1,11 @@
-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';
 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';
@@ -16,25 +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 {defaultAccount, TwoFactorAuthPropTypes} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
+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';
 
-const defaultProps = {
-    account: defaultAccount,
-    session: {
-        email: null,
-    },
-};
+type VerifyStepProps = BaseTwoFactorAuthFormOnyxProps;
 
-function VerifyStep({account, session}) {
+function VerifyStep({account}: VerifyStepProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const session = useSession();
 
-    const formRef = React.useRef(null);
+    const formRef = useRef<BaseTwoFactorAuthFormRef>(null);
 
     const {setStep} = useTwoFactorAuthContext();
 
@@ -46,19 +42,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) {
         if (secret.length !== 16) {
             return secret;
         }
@@ -69,11 +62,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`;
+        return `otpauth://totp/Expensify:${account?.primaryLogin ?? session?.email}?secret=${account?.twoFactorAuthSecretKey}&issuer=Expensify`;
     }
 
     return (
@@ -106,15 +97,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')}
+                            tooltipText=""
+                            tooltipTextChecked=""
                             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}
                         />
                     </View>
                     <Text style={styles.mt11}>{translate('twoFactorAuth.enterCode')}</Text>
@@ -127,7 +121,7 @@ function VerifyStep({account, session}) {
                 <Button
                     success
                     text={translate('common.next')}
-                    isLoading={account.isLoading}
+                    isLoading={account?.isLoading}
                     onPress={() => {
                         if (!formRef.current) {
                             return;
@@ -140,21 +134,8 @@ 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, BaseTwoFactorAuthFormOnyxProps>({
     account: {key: ONYXKEYS.ACCOUNT},
-    session: {key: ONYXKEYS.SESSION},
 })(VerifyStep);
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..5b6ca64c7036
--- /dev/null
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/index.tsx
@@ -0,0 +1,13 @@
+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: () => {},
+});
+
+export default TwoFactorAuthContext;
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.tsx
similarity index 100%
rename from src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.js
rename to src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth.tsx
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
similarity index 51%
rename from src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.js
rename to src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
index f65f7368de76..33484c2aee35 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
@@ -1,53 +1,36 @@
-import PropTypes from 'prop-types';
-import React, {forwardRef, useCallback, useImperativeHandle, useState} from 'react';
+import React, {forwardRef, useCallback, useImperativeHandle, useRef, useState} 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 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 {BaseTwoFactorAuthFormOnyxProps, BaseTwoFactorAuthFormRef} from './types';
 
-const propTypes = {
-    ...withLocalizePropTypes,
-
-    /* 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,
-    }),
-
-    /** Specifies autocomplete hints for the system, so it can provide autofill */
-    autoComplete: PropTypes.oneOf(['sms-otp', 'one-time-code']).isRequired,
-};
-
-const defaultProps = {
-    account: {},
+type BaseTwoFactorAuthFormProps = BaseTwoFactorAuthFormOnyxProps & {
+    autoComplete: AutoCompleteVariant;
 };
 
-function BaseTwoFactorAuthForm(props) {
-    const [formError, setFormError] = useState({});
+function BaseTwoFactorAuthForm({account, autoComplete}: BaseTwoFactorAuthFormProps, ref: ForwardedRef<BaseTwoFactorAuthFormRef>) {
+    const [formError, setFormError] = useState<{twoFactorAuthCode?: string}>({});
     const [twoFactorAuthCode, setTwoFactorAuthCode] = useState('');
-    const inputRef = React.useRef(null);
+    const inputRef = useRef<MagicCodeInputHandle | null>(null);
 
     /**
      * 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 +54,7 @@ function BaseTwoFactorAuthForm(props) {
         Session.validateTwoFactorAuth(twoFactorAuthCode);
     }, [twoFactorAuthCode]);
 
-    useImperativeHandle(props.innerRef, () => ({
+    useImperativeHandle(ref, () => ({
         validateAndSubmitForm() {
             validateAndSubmitForm();
         },
@@ -85,37 +68,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 || ErrorUtils.getLatestErrorMessage(props.account)}
+            errorText={formError.twoFactorAuthCode ?? ErrorUtils.getLatestErrorMessage(account)}
             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
-        {...props}
-        innerRef={ref}
-    />
-));
-
-BaseTwoFactorAuthFormWithRef.displayName = 'BaseTwoFactorAuthFormWithRef';
-
-export default compose(
-    withLocalize,
-    withOnyx({
-        account: {key: ONYXKEYS.ACCOUNT},
-    }),
-)(BaseTwoFactorAuthFormWithRef);
+export default withOnyx<BaseTwoFactorAuthFormProps & RefAttributes<BaseTwoFactorAuthFormRef>, BaseTwoFactorAuthFormOnyxProps>({
+    account: {key: ONYXKEYS.ACCOUNT},
+})(forwardRef(BaseTwoFactorAuthForm));
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..55d8850d3f1d
--- /dev/null
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import BaseTwoFactorAuthForm from './BaseTwoFactorAuthForm';
+import type {TwoFactorAuthFormProps} from './types';
+
+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..e12288b900b0
--- /dev/null
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import BaseTwoFactorAuthForm from './BaseTwoFactorAuthForm';
+import type {TwoFactorAuthFormProps} from './types';
+
+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/TwoFactorAuthForm/types.ts b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types.ts
new file mode 100644
index 000000000000..baac250a3d66
--- /dev/null
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types.ts
@@ -0,0 +1,18 @@
+import type {ForwardedRef} from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
+import type {Account} from '@src/types/onyx';
+
+type BaseTwoFactorAuthFormOnyxProps = {
+    account: OnyxEntry<Account>;
+};
+
+type BaseTwoFactorAuthFormRef = {
+    validateAndSubmitForm: () => void;
+    focus: () => void;
+};
+
+type TwoFactorAuthFormProps = {
+    innerRef: ForwardedRef<BaseTwoFactorAuthFormRef>;
+};
+
+export type {BaseTwoFactorAuthFormOnyxProps, TwoFactorAuthFormProps, BaseTwoFactorAuthFormRef};
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/TwoFactorAuthSteps.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
similarity index 64%
rename from src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js
rename to src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
index 720c2e02b3c0..c8f2c357f05f 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
@@ -1,43 +1,49 @@
 import {useRoute} from '@react-navigation/native';
-import lodashGet from 'lodash/get';
+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';
 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';
 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 {BaseTwoFactorAuthFormOnyxProps} from './TwoFactorAuthForm/types';
 
-function TwoFactorAuthSteps({account = defaultAccount}) {
-    const route = useRoute();
-    const backTo = lodashGet(route.params, 'backTo', '');
-    const [currentStep, setCurrentStep] = useState(CONST.TWO_FACTOR_AUTH_STEPS.CODES);
+type TwoFactorAuthStepProps = BaseTwoFactorAuthFormOnyxProps;
+
+function TwoFactorAuthSteps({account}: TwoFactorAuthStepProps) {
+    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);
 
     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, animationDirection: AnimationDirection = CONST.ANIMATION_DIRECTION.IN) => {
             setAnimationDirection(animationDirection);
             TwoFactorAuthActions.setTwoFactorAuthStep(step);
             setCurrentStep(step);
@@ -66,9 +72,6 @@ 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<TwoFactorAuthStepProps, BaseTwoFactorAuthFormOnyxProps>({
     account: {key: ONYXKEYS.ACCOUNT},
 })(TwoFactorAuthSteps);