diff --git a/src/components/ValidateCode/AbracadabraModal.js b/src/components/ValidateCode/AbracadabraModal.js
deleted file mode 100644
index 8debd439bf64..000000000000
--- a/src/components/ValidateCode/AbracadabraModal.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, {PureComponent} from 'react';
-import {View} from 'react-native';
-import colors from '../../styles/colors';
-import styles from '../../styles/styles';
-import Icon from '../Icon';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import Text from '../Text';
-import * as Expensicons from '../Icon/Expensicons';
-import * as Illustrations from '../Icon/Illustrations';
-import variables from '../../styles/variables';
-
-const propTypes = {
-    ...withLocalizePropTypes,
-};
-
-class AbracadabraModal extends PureComponent {
-    render() {
-        return (
-            <View style={styles.deeplinkWrapperContainer}>
-                <View style={styles.deeplinkWrapperMessage}>
-                    <View style={styles.mb2}>
-                        <Icon
-                            width={variables.modalTopIconWidth}
-                            height={variables.modalTopBigIconHeight}
-                            src={Illustrations.Abracadabra}
-                        />
-                    </View>
-                    <Text style={[styles.textHeadline, styles.textXXLarge, styles.textAlignCenter]}>{this.props.translate('validateCodeModal.successfulSignInTitle')}</Text>
-                    <View style={[styles.mt2, styles.mb2]}>
-                        <Text style={[styles.fontSizeNormal, styles.textAlignCenter]}>{this.props.translate('validateCodeModal.successfulSignInDescription')}</Text>
-                    </View>
-                </View>
-                <View style={styles.deeplinkWrapperFooter}>
-                    <Icon
-                        width={variables.modalWordmarkWidth}
-                        height={variables.modalWordmarkHeight}
-                        fill={colors.green}
-                        src={Expensicons.ExpensifyWordmark}
-                    />
-                </View>
-            </View>
-        );
-    }
-}
-
-AbracadabraModal.propTypes = propTypes;
-export default withLocalize(AbracadabraModal);
diff --git a/src/components/ValidateCode/JustSignedInModal.js b/src/components/ValidateCode/JustSignedInModal.js
new file mode 100644
index 000000000000..40b25e4a19e0
--- /dev/null
+++ b/src/components/ValidateCode/JustSignedInModal.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {View} from 'react-native';
+import colors from '../../styles/colors';
+import styles from '../../styles/styles';
+import Icon from '../Icon';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+import Text from '../Text';
+import * as Expensicons from '../Icon/Expensicons';
+import * as Illustrations from '../Icon/Illustrations';
+import variables from '../../styles/variables';
+
+const propTypes = {
+    ...withLocalizePropTypes,
+
+    /** Whether the 2FA is needed to get fully authenticated. */
+    is2FARequired: PropTypes.bool.isRequired,
+};
+
+function JustSignedInModal(props) {
+    return (
+        <View style={styles.deeplinkWrapperContainer}>
+            <View style={styles.deeplinkWrapperMessage}>
+                <View style={styles.mb2}>
+                    <Icon
+                        width={variables.modalTopIconWidth}
+                        height={props.is2FARequired ? variables.modalTopIconHeight : variables.modalTopBigIconHeight}
+                        src={props.is2FARequired ? Illustrations.SafeBlue : Illustrations.Abracadabra}
+                    />
+                </View>
+                <Text style={[styles.textHeadline, styles.textXXLarge, styles.textAlignCenter]}>
+                    {props.translate(props.is2FARequired ? 'validateCodeModal.tfaRequiredTitle' : 'validateCodeModal.successfulSignInTitle')}
+                </Text>
+                <View style={[styles.mt2, styles.mb2]}>
+                    <Text style={[styles.fontSizeNormal, styles.textAlignCenter]}>
+                        {props.translate(props.is2FARequired ? 'validateCodeModal.tfaRequiredDescription' : 'validateCodeModal.successfulSignInDescription')}
+                    </Text>
+                </View>
+            </View>
+            <View style={styles.deeplinkWrapperFooter}>
+                <Icon
+                    width={variables.modalWordmarkWidth}
+                    height={variables.modalWordmarkHeight}
+                    fill={colors.green}
+                    src={Expensicons.ExpensifyWordmark}
+                />
+            </View>
+        </View>
+    );
+}
+
+JustSignedInModal.propTypes = propTypes;
+export default withLocalize(JustSignedInModal);
diff --git a/src/components/ValidateCode/TfaRequiredModal.js b/src/components/ValidateCode/TfaRequiredModal.js
deleted file mode 100644
index a4afb79c84b2..000000000000
--- a/src/components/ValidateCode/TfaRequiredModal.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, {PureComponent} from 'react';
-import {View} from 'react-native';
-import colors from '../../styles/colors';
-import styles from '../../styles/styles';
-import Icon from '../Icon';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import Text from '../Text';
-import * as Expensicons from '../Icon/Expensicons';
-import * as Illustrations from '../Icon/Illustrations';
-import variables from '../../styles/variables';
-
-const propTypes = {
-    ...withLocalizePropTypes,
-};
-
-class TfaRequiredModal extends PureComponent {
-    render() {
-        return (
-            <View style={styles.deeplinkWrapperContainer}>
-                <View style={styles.deeplinkWrapperMessage}>
-                    <View style={styles.mb2}>
-                        <Icon
-                            width={variables.modalTopIconWidth}
-                            height={variables.modalTopIconHeight}
-                            src={Illustrations.SafeBlue}
-                        />
-                    </View>
-                    <Text style={[styles.textHeadline, styles.textXXLarge, styles.textAlignCenter]}>{this.props.translate('validateCodeModal.tfaRequiredTitle')}</Text>
-                    <View style={[styles.mt2, styles.mb2]}>
-                        <Text style={[styles.fontSizeNormal, styles.textAlignCenter]}>{this.props.translate('validateCodeModal.tfaRequiredDescription')}</Text>
-                    </View>
-                </View>
-                <View style={styles.deeplinkWrapperFooter}>
-                    <Icon
-                        width={variables.modalWordmarkWidth}
-                        height={variables.modalWordmarkHeight}
-                        fill={colors.green}
-                        src={Expensicons.ExpensifyWordmark}
-                    />
-                </View>
-            </View>
-        );
-    }
-}
-
-TfaRequiredModal.propTypes = propTypes;
-export default withLocalize(TfaRequiredModal);
diff --git a/src/pages/ValidateLoginPage/index.website.js b/src/pages/ValidateLoginPage/index.website.js
index 6dfc5d8d87b7..26bfdf902a22 100644
--- a/src/pages/ValidateLoginPage/index.website.js
+++ b/src/pages/ValidateLoginPage/index.website.js
@@ -11,12 +11,11 @@ import ONYXKEYS from '../../ONYXKEYS';
 import * as Session from '../../libs/actions/Session';
 import Permissions from '../../libs/Permissions';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
-import AbracadabraModal from '../../components/ValidateCode/AbracadabraModal';
 import ExpiredValidateCodeModal from '../../components/ValidateCode/ExpiredValidateCodeModal';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
 import CONST from '../../CONST';
-import TfaRequiredModal from '../../components/ValidateCode/TfaRequiredModal';
+import JustSignedInModal from '../../components/ValidateCode/JustSignedInModal';
 
 const propTypes = {
     /** The accountID and validateCode are passed via the URL */
@@ -124,8 +123,8 @@ class ValidateLoginPage extends Component {
         return (
             <>
                 {currentAuthState === CONST.AUTO_AUTH_STATE.FAILED && <ExpiredValidateCodeModal />}
-                {currentAuthState === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN && is2FARequired && !isSignedIn && <TfaRequiredModal />}
-                {currentAuthState === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN && isSignedIn && <AbracadabraModal />}
+                {currentAuthState === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN && is2FARequired && !isSignedIn && <JustSignedInModal is2FARequired />}
+                {currentAuthState === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN && isSignedIn && <JustSignedInModal is2FARequired={false} />}
                 {currentAuthState === CONST.AUTO_AUTH_STATE.NOT_STARTED && !isSignedIn && (
                     <ValidateCodeModal
                         accountID={this.getAccountID()}