Fix - modified magic code link redirects to welcome screen with first place of magic code green

src/languages/en.js

@@ -704,6 +704,7 @@ export default {
         enterAuthenticatorCode: 'Please enter your authenticator code',
         requiredWhen2FAEnabled: 'Required when 2FA is enabled',
         requestNewCode: 'Request a new code in ',
+        requestNewCodeAfterErrorOccurred: 'Request a new code',
         error: {
             pleaseFillMagicCode: 'Please enter your magic code',
             incorrectMagicCode: 'Incorrect magic code.',

src/languages/es.js

@@ -706,6 +706,7 @@ export default {
         enterAuthenticatorCode: 'Por favor, introduce el código de autenticador',
         requiredWhen2FAEnabled: 'Obligatorio cuando A2F está habilitado',
         requestNewCode: 'Pedir un código nuevo en ',
+        requestNewCodeAfterErrorOccurred: 'Solicitar un nuevo código',
         error: {
             pleaseFillMagicCode: 'Por favor, introduce el código mágico',
             incorrectMagicCode: 'Código mágico incorrecto.',

src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js

@@ -46,6 +46,12 @@ const propTypes = {
         login: PropTypes.string,
     }),
 
+    /** Session of currently logged in user */
+    session: PropTypes.shape({
+        /** Currently logged in user authToken */
+        authToken: PropTypes.string,
+    }),
+
     /** Indicates which locale the user currently has selected */
     preferredLocale: PropTypes.string,
 
@@ -62,6 +68,9 @@ const propTypes = {
 const defaultProps = {
     account: {},
     credentials: {},
+    session: {
+        authToken: null,
+    },
     preferredLocale: CONST.LOCALES.DEFAULT,
 };
 
@@ -79,6 +88,15 @@ function BaseValidateCodeForm(props) {
     const input2FARef = useRef();
     const timerRef = useRef();
 
+    const hasError = Boolean(props.account) && !_.isEmpty(props.account.errors);
+
+    useEffect(() => {
+        if (!(inputValidateCodeRef.current && ((hasError && props.session.autoAuthState === CONST.AUTO_AUTH_STATE.FAILED) || props.account.isLoading))) {
+            return;
+        }
+        inputValidateCodeRef.current.blur();
+    }, [props.account.isLoading, props.session.autoAuthState, hasError]);
+
     useEffect(() => {
         if (!inputValidateCodeRef.current || prevIsVisible || !props.isVisible || !canFocusInputOnScreenFocus()) {
             return;
@@ -219,8 +237,6 @@ function BaseValidateCodeForm(props) {
         }
     }, [props.account.requiresTwoFactorAuth, props.credentials, props.preferredLocale, twoFactorAuthCode, validateCode]);
 
-    const hasError = Boolean(props.account) && !_.isEmpty(props.account.errors);
-
     return (
         <>
             {/* At this point, if we know the account requires 2FA we already successfully authenticated */}
@@ -273,7 +289,9 @@ function BaseValidateCodeForm(props) {
                                 accessibilityRole="button"
                                 accessibilityLabel={props.translate('validateCodeForm.magicCodeNotReceived')}
                             >
-                                <Text style={[StyleUtils.getDisabledLinkStyles(props.network.isOffline)]}>{props.translate('validateCodeForm.magicCodeNotReceived')}</Text>
+                                <Text style={[StyleUtils.getDisabledLinkStyles(props.network.isOffline)]}>
+                                    {hasError ? props.translate('validateCodeForm.requestNewCodeAfterErrorOccurred') : props.translate('validateCodeForm.magicCodeNotReceived')}
+                                </Text>
                             </PressableWithFeedback>
                         )}
                     </View>
@@ -309,6 +327,7 @@ export default compose(
         account: {key: ONYXKEYS.ACCOUNT},
         credentials: {key: ONYXKEYS.CREDENTIALS},
         preferredLocale: {key: ONYXKEYS.NVP_PREFERRED_LOCALE},
+        session: {key: ONYXKEYS.SESSION},
     }),
     withToggleVisibilityView,
     withNetwork(),