Clean up how use ris redirected to disabled step

src/libs/actions/Session/index.ts

@@ -1000,9 +1000,6 @@ function toggleTwoFactorAuth(enable: boolean, twoFactorAuthCode = '') {
             key: ONYXKEYS.ACCOUNT,
             value: {
                 isLoading: false,
-
-                // When disabling 2FA, the user needs to end up on the step that confirms the setting was disabled
-                twoFactorAuthStep: enable ? undefined : CONST.TWO_FACTOR_AUTH_STEPS.DISABLED,
             },
         },
     ];

src/libs/actions/TwoFactorAuthActions.ts

@@ -2,16 +2,12 @@ import Onyx from 'react-native-onyx';
 import Navigation from '@libs/Navigation/Navigation';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Route} from '@src/ROUTES';
-import type {TwoFactorAuthStep} from '@src/types/onyx/Account';
 
 /**
  * Clear 2FA data if the flow is interrupted without finishing
  */
 function clearTwoFactorAuthData() {
-    Onyx.merge(ONYXKEYS.ACCOUNT, {recoveryCodes: null, twoFactorAuthSecretKey: null, twoFactorAuthStep: null, codesAreCopied: false});
-}
-function setTwoFactorAuthStep(twoFactorAuthStep: TwoFactorAuthStep) {
-    Onyx.merge(ONYXKEYS.ACCOUNT, {twoFactorAuthStep});
+    Onyx.merge(ONYXKEYS.ACCOUNT, {recoveryCodes: null, twoFactorAuthSecretKey: null, codesAreCopied: false});
 }
 
 function setCodesAreCopied() {
@@ -23,4 +19,4 @@ function quitAndNavigateBack(backTo?: Route) {
     Navigation.goBack(backTo);
 }
 
-export {clearTwoFactorAuthData, setTwoFactorAuthStep, quitAndNavigateBack, setCodesAreCopied};
+export {clearTwoFactorAuthData, quitAndNavigateBack, setCodesAreCopied};

src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx

@@ -1,12 +1,14 @@
-import React, {forwardRef, useCallback, useImperativeHandle, useRef, useState} from 'react';
+import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
 import type {ForwardedRef} from 'react';
 import {useOnyx} 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 useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
 import * as Session from '@userActions/Session';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {BaseTwoFactorAuthFormRef} from './types';
 
@@ -25,6 +27,7 @@ function BaseTwoFactorAuthForm({autoComplete, validateInsteadOfDisable}: BaseTwo
     const [twoFactorAuthCode, setTwoFactorAuthCode] = useState('');
     const inputRef = useRef<MagicCodeInputHandle | null>(null);
     const shouldClearData = account?.needsTwoFactorAuthSetup ?? false;
+    const {setStep} = useTwoFactorAuthContext();
 
     /**
      * Handle text input and clear formError upon text change
@@ -41,6 +44,13 @@ function BaseTwoFactorAuthForm({autoComplete, validateInsteadOfDisable}: BaseTwo
         [account?.errors],
     );
 
+    useEffect(() => {
+        if (!account || account?.requiresTwoFactorAuth) {
+            return;
+        }
+
+        setStep(CONST.TWO_FACTOR_AUTH_STEPS.DISABLED);
+    }, [account, setStep]);
     /**
      * Check that all the form fields are valid, then trigger the submit callback
      */

src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.tsx

@@ -1,4 +1,4 @@
-import React, {useMemo} from 'react';
+import React from 'react';
 import {useOnyx} from 'react-native-onyx';
 import AnimatedStepProvider from '@components/AnimatedStep/AnimatedStepProvider';
 import DelegateNoAccessWrapper from '@components/DelegateNoAccessWrapper';
@@ -21,12 +21,7 @@ type TwoFactorAuthPageProps = PlatformStackScreenProps<SettingsNavigatorParamLis
 function TwoFactorAuthPage({route}: TwoFactorAuthPageProps) {
     const [isActingAsDelegate] = useOnyx(ONYXKEYS.ACCOUNT, {selector: (account) => !!account?.delegatedAccess?.delegate});
     const [account] = useOnyx(ONYXKEYS.ACCOUNT);
-    const initialStep = useMemo(() => {
-        if (account?.twoFactorAuthStep) {
-            return account.twoFactorAuthStep;
-        }
-        return account?.requiresTwoFactorAuth ? CONST.TWO_FACTOR_AUTH_STEPS.ENABLED : CONST.TWO_FACTOR_AUTH_STEPS.CODES;
-    }, [account?.requiresTwoFactorAuth, account?.twoFactorAuthStep]);
+    const initialStep = account?.requiresTwoFactorAuth ? CONST.TWO_FACTOR_AUTH_STEPS.ENABLED : CONST.TWO_FACTOR_AUTH_STEPS.CODES;
 
     const backTo = route.params?.backTo ?? '';
     const forwardTo = route.params?.forwardTo ?? '';

src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useMemo} from 'react';
+import React, {useEffect, useMemo} from 'react';
 import type {AnimationDirection} from '@components/AnimatedStep/AnimatedStepContext';
 import useAnimatedStepContext from '@components/AnimatedStep/useAnimatedStepContext';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
@@ -11,14 +11,14 @@ function TwoFactorAuthSteps() {
 
     useEffect(() => () => TwoFactorAuthActions.clearTwoFactorAuthData(), []);
 
-    const handleSetStep = useCallback(
-        (step: TwoFactorAuthStep, direction: AnimationDirection = CONST.ANIMATION_DIRECTION.IN) => {
-            setStep(step, direction);
-            TwoFactorAuthActions.setTwoFactorAuthStep(step);
-        },
+    const contextValue = useMemo(
+        () => ({
+            setStep: (step: TwoFactorAuthStep, direction: AnimationDirection = CONST.ANIMATION_DIRECTION.IN) => {
+                setStep(step, direction);
+            },
+        }),
         [setStep],
     );
-    const contextValue = useMemo(() => ({setStep: handleSetStep}), [handleSetStep]);
 
     return (
         <TwoFactorAuthContext.Provider value={contextValue}>

src/types/onyx/Account.ts

@@ -140,9 +140,6 @@ type Account = {
     /** Whether the two factor authentication codes were copied */
     codesAreCopied?: boolean;
 
-    /** Current two factor authentication step */
-    twoFactorAuthStep?: TwoFactorAuthStep;
-
     /** Referral banners that the user dismissed */
     dismissedReferralBanners?: DismissedReferralBanners;