diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
index 7340a1f64511..ebad8d8bc5d0 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
@@ -32,11 +32,12 @@ function CodesStep({account = defaultAccount}) {
     const {setStep} = useTwoFactorAuthContext();
 
     useEffect(() => {
-        if (account.recoveryCodes) {
+        if (account.requiresTwoFactorAuth || account.recoveryCodes) {
             return;
         }
         Session.toggleTwoFactorAuth(true);
-    }, [account.recoveryCodes]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- We want to run this when component mounts
+    }, []);
 
     return (
         <StepWrapper
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.js
index a505ca51f1e3..f1753e74c281 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes.js
@@ -22,6 +22,7 @@ const TwoFactorAuthPropTypes = {
 const defaultAccount = {
     requiresTwoFactorAuth: false,
     twoFactorAuthStep: '',
+    recoveryCodes: '',
 };
 
 export {TwoFactorAuthPropTypes, defaultAccount};