[Due for payment 2026-05-20] [$250] Add caution message to magic code input on login

[rafecolton]

Hello, we'd like to add a warning message to the magic code input on the login page. See mock below.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022052401076134869100
• Upwork Job ID: 2052401076134869100
• Last Price Increase: 2026-05-07

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @cretadn22 (External)

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022052401076134869100

[oqildev]

Proposal

What is the root cause of that problem?

This is a feature request, not a bug — there is no "wrong state" to point at. What blocks the desired behavior today is simply that the magic-code branch of BaseValidateCodeForm renders the MagicCodeInput, the resend link, and nothing else before the Sign In button. The mock asks for a scam‑warning notice (icon + bold "Avoid scams." + body copy "Do not share your code with anyone. Our team will never call, text, or email you for this code.") to sit between the "Didn't receive a magic code?" link/countdown and the Sign In button. That row does not exist in the form today, and the existing copy strings (validateCodeForm) do not include scam-warning text, so there is nothing to show.

Note: the warning is for the email/SMS magic code only. The 2FA / recovery branch (lines 312–359) is a different code path (authenticator app codes are not phished by phone calls) and the mock does not show the warning there, so the change must not apply to it.

What changes do you think we should make in order to solve the problem?

The change belongs at the render layer in BaseValidateCodeForm.tsx, because (a) the warning is signin-specific and we should not pollute MagicCodeInput, which is also used for 2FA, contact‑method validation, copilot magic codes, and card-details unlock, and (b) it does not depend on any state — it is static copy plus an icon, so a selector/hook is unnecessary.

Concretely:

1. Add three new translation keys under validateCodeForm in src/languages/en.ts (and mirror them across every other src/languages/*.ts file — this is a localized, user‑visible string):

   • cautionTitle: "Avoid scams."
   • cautionMessage: "Do not share your code with anyone. Our team will never call, text, or email you for this code."
   • (Optionally collapse to a single key with bold markup if the design prefers that.)

2. In BaseValidateCodeForm.tsx, inside the magic-code branch only, render a new inline notice immediately after the View that holds the countdown / resend link (lines 381–405) and before the closing </View> that wraps the magic-code branch. Pseudo-code:

   <View flexRow alignItemsStart mt4>
       <Icon src={Expensicons.Shield} fill={theme.success} small additionalStyles={[mr2, mt1]} />
       <View flex1>
           <Text bold>{translate('validateCodeForm.cautionTitle')}</Text>
           <Text muted>{translate('validateCodeForm.cautionMessage')}</Text>
       </View>
   </View>
   

   • Use the existing Shield Expensicon (expensify-icons.chunk.ts:209) since the mock shows a shield-style mark.
   • Keep flex1 on the text column so the body wraps on narrow layouts (useResponsiveLayout's shouldUseNarrowLayout already governs the surrounding form widths via signInPageWelcomeFormContainer).

3. Do not render the notice in the 2FA / recovery path (lines 312–359). The branch split at line 312 already gives us this for free — the new view simply lives in the else arm.

Edge cases:

• Offline: nothing to do — the notice is static copy, no network dependency.
• isVisible === false: the form is wrapped in withToggleVisibilityView, so the whole subtree (including the new notice) is already hidden when the form is not active. No extra guard needed.
• Error state (hasError): the existing FormHelpMessage for incorrect codes (line 380) is rendered above the resend link; the new caution sits below it, so it remains visible regardless of error state — which is desirable (a wrong‑code submission is exactly when a user might have been pressured by a scammer).
• Localization: every language file under src/languages/ must get the two new strings; missing keys would fall through to the TranslationPaths type error caught by npm run typecheck.

What alternative solutions did you explore?

1. Add the warning to welcomeText in SignInPage.tsx:239-250 — Rejected: welcomeText is rendered as a single <Text> with no icon support inside SignInPageContent, and it sits above the magic-code input. The mock places the notice below the resend link, with an icon and a bolded heading, so reusing welcomeText would not match the design.
2. Use the existing Banner component (src/components/Banner.tsx) — Rejected: Banner renders a card-style background and is geared toward dismissable in-app notices; the mock is an inline icon+text row on the existing dark form background, with no card and no close button. Forcing Banner would require styling overrides that defeat the point of using the shared component.
3. Add the notice inside MagicCodeInput — Rejected: MagicCodeInput is also rendered in 2FA, contact-method validation, copilot, and card-detail unlock flows where the scam framing ("our team will never call/text/email you for this code") is incorrect or out of place. Render-layer placement in BaseValidateCodeForm keeps the message scoped to the signin flow.

[yusufdeveloper2903]

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.

[dilshodmackbook-sketch]

Proposal

What is the root cause of that problem?

This is a feature request, not a bug — there is currently no caution/security warning rendered alongside the magic code input on the sign-in page.

The magic code input on login is rendered by BaseValidateCodeForm here, in the non-2FA branch. The view contains the MagicCodeInput, error message, and the countdown / "Didn't receive a magic code?" link — but no scam‑prevention copy:

https://github.com/Expensify/App/blob/main/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx#L360-L407

The translation namespace validateCodeForm in en.ts also has no key for this warning message — only the resend / error strings are defined:

https://github.com/Expensify/App/blob/main/src/languages/en.ts#L2909-L2923

So we need to (a) add a new translation key for the caution copy and (b) render it under the magic code input on the sign-in form, matching the mock.

What changes do you think we should make in order to solve the problem?

I'd add the caution copy as a new validateCodeForm.scamWarning key (and its translations in es.ts), then render it inside the existing magic code branch in BaseValidateCodeForm.tsx, right under the resend-link / countdown row, with a small icon and the "Avoid scams." lead bolded as in the mock.

1. Add the translation key — src/languages/en.ts (and mirror in es.ts):

 validateCodeForm: {
     magicCodeNotReceived: "Didn't receive a magic code?",
+    scamWarning: {
+        title: 'Avoid scams.',
+        message: 'Do not share your code with anyone. Our team will never call, text, or email you for this code.',
+    },
     enterAuthenticatorCode: 'Please enter your authenticator code',

2. Render the caution row under the resend link in the non-2FA branch of BaseValidateCodeForm.tsx (around src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx#L381-L405):

                     <View style={[styles.alignItemsStart]}>
                         {isCountdownRunning && !isOffline ? (
                             ...ValidateCodeCountdown...
                         ) : (
                             ...PressableWithFeedback (resend)...
                         )}
                     </View>
+                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt4, styles.gap2]}>
+                        <Icon src={Expensicons.Lock} fill={theme.success} small />
+                        <Text style={[styles.textLabelSupporting, styles.flexShrink1]}>
+                            <Text style={[styles.textBold, styles.textLabelSupporting]}>{translate('validateCodeForm.scamWarning.title')}</Text>
+                            {` ${translate('validateCodeForm.scamWarning.message')}`}
+                        </Text>
+                    </View>

Supporting changes (no diff needed — straightforward):

• Import Icon, Expensicons, and useTheme at the top of BaseValidateCodeForm.tsx.
• Mirror the new scamWarning.{title,message} keys in src/languages/es.ts.
• Limit rendering to the magic code branch only (not the 2FA / recovery code branch) so the warning doesn't appear on the 2FA step, matching the mock which only shows it during the magic code entry.

Final-state styling matches the mock: green lock glyph + bolded "Avoid scams." lead followed by the regular caution sentence in textLabelSupporting.

What alternative solutions did you explore? (Optional)

• Reusing validateCodeModal.doNotShare ("Do not share your code with anyone. Expensify will never ask you for it!") — rejected because the wording in the mock is different (specifically calls out call/text/email vectors), and that key belongs to a different flow (validateCodeModal), so co‑opting it would couple two unrelated UIs.
• Putting the message above the input — rejected because the mock places it below the resend/countdown row, after the input, where it reads as a footnote rather than a header.
• Hard‑coding the string in the component — rejected because all visible copy in the sign‑in form goes through useLocalize() / en.ts, and skipping that would break translations.

[github-actions]

⚠️ @yusufdeveloper2903 Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.

[trasnake87]

Proposal

Add a static caution banner directly underneath the magic-code input on the sign-in page (the ValidateCode step, before 2FA is requested) so users are visibly warned not to share their code, exactly as drawn in the design mock.

Root cause

This is a missing-feature request, not a regression — there is no existing copy or component rendering a "Avoid scams…" notice anywhere on the sign-in flow. The relevant render path is:

• src/pages/signin/SignInPage.tsx mounts <ValidateCodeForm /> once the user has submitted their email.
• src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx then renders one of two branches:
  • The 2FA branch (account?.requiresTwoFactorAuth && !!credentials?.validateCode) at lines 312–359.
  • The magic-code branch (else) at lines 360–407, which is the screen shown in the mock.

The magic-code branch currently renders only the MagicCodeInput, an inline error message, and either the live countdown or a "Didn't receive a magic code?" resend pressable. It then immediately renders the Sign in Button (lines 408–418) — there is no caution copy anywhere between them:

// src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx:360-407 (current)
<View style={[styles.mv3]}>
    <MagicCodeInput
        autoComplete={autoComplete}
        ref={(magicCodeInput) => { ... }}
        name="validateCode"
        value={validateCode}
        onChangeText={(text) => onTextInput(text, 'validateCode')}
        onFulfill={validateAndSubmitForm}
        errorText={formError?.validateCode ? translate(formError?.validateCode) : ''}
        hasError={hasError}
        autoFocus
        key="validateCode"
        testID="validateCode"
    />
    {hasError && <FormHelpMessage message={getLatestErrorMessage(account)} />}
    <View style={[styles.alignItemsStart]}>
        {isCountdownRunning && !isOffline ? (
            <View style={[styles.mt2, styles.flexRow, styles.renderHTML]}>
                <ValidateCodeCountdown ... />
            </View>
        ) : (
            <PressableWithFeedback ... >
                <Text style={[StyleUtils.getDisabledLinkStyles(shouldDisableResendValidateCode)]}>
                    {hasError ? translate('validateCodeForm.requestNewCodeAfterErrorOccurred') : translate('validateCodeForm.magicCodeNotReceived')}
                </Text>
            </PressableWithFeedback>
        )}
    </View>
</View>

The translation source src/languages/en.ts:2908-2922 (validateCodeForm) likewise has no entry for an "avoid scams" string. It contains magicCodeNotReceived, requestNewCode, etc. — but nothing for a caution line. The only adjacent precedent is validateCodeModal.doNotShare at src/languages/en.ts:740-743 ("Do not share your code with anyone. Expensify will never ask you for it!"), which is shown only on the deep-link magic code modal at src/components/ValidateCode/ValidateCodeModal.tsx:76, not on the sign-in form. The bug is that this protection is shown only on a screen most users don't see.

Proposed fix

1 - Add two translation strings under validateCodeForm so the bold and non-bold parts can be styled independently. Replace the block at src/languages/en.ts:2908-2922 with:

// src/languages/en.ts
validateCodeForm: {
    magicCodeNotReceived: "Didn't receive a magic code?",
    enterAuthenticatorCode: 'Please enter your authenticator code',
    enterRecoveryCode: 'Please enter your recovery code',
    requiredWhen2FAEnabled: 'Required when 2FA is enabled',
    requestNewCode: ({timeRemaining}: {timeRemaining: string}) => `Request a new code in <a>${timeRemaining}</a>`,
    requestNewCodeAfterErrorOccurred: 'Request a new code',
    timeRemainingAnnouncement: ({timeRemaining}: {timeRemaining: number}) => `Time remaining: ${timeRemaining} ${timeRemaining === 1 ? 'second' : 'seconds'}`,
    timeExpiredAnnouncement: 'The time has expired',
    scamWarningTitle: 'Avoid scams. Do not share your code with anyone.',
    scamWarningDescription: 'Our team will never call, text, or email you for this code.',
    error: {
        pleaseFillMagicCode: 'Please enter your magic code',
        incorrectMagicCode: 'Incorrect or invalid magic code. Please try again or request a new code.',
        pleaseFillTwoFactorAuth: 'Please enter your two-factor authentication code',
    },
},

Mirror the two new keys in every other locale file already touched by the validateCodeForm block — src/languages/de.ts, es.ts, fr.ts, it.ts, ja.ts, nl.ts, pl.ts, pt-BR.ts, zh-hans.ts — using the same wording until translations land (this is the same convention used when requestNewCodeAfterErrorOccurred was added).

2 - Render the caution row inside the magic-code branch only. In src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx, import the icon hook and add a single <View> with a small Exclamation icon plus an inline-styled <Text> containing a bold leading sentence. Add the import alongside the existing ones (right after line 21):

// src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
import useTheme from '@hooks/useTheme';
import Icon from '@components/Icon';

Then inside the component (next to the existing useThemeStyles/useLocalize calls around line 55), grab the theme and the icon:

// src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx
const theme = useTheme();
const expensifyIcons = useMemoizedLazyExpensifyIcons(['Exclamation']);

Finally, insert the caution row immediately after the resend/countdown <View> (line 405) but before the closing </View> of the magic-code branch on line 406, so it sits between "Didn't receive a magic code?" and the Sign in button — matching the mock:

// src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx
            </View>
            <View style={[styles.flexRow, styles.alignItemsStart, styles.mt4]}>
                <Icon
                    src={expensifyIcons.Exclamation}
                    fill={theme.icon}
                    small
                    additionalStyles={[styles.mr2, styles.mt1]}
                />
                <Text style={[styles.flex1, styles.textLabelSupporting]}>
                    <Text style={[styles.textLabelSupporting, styles.textBold]}>{translate('validateCodeForm.scamWarningTitle')}</Text>
                    {' '}
                    {translate('validateCodeForm.scamWarningDescription')}
                </Text>
            </View>
        </View>
    ) }

Place it inside the else block (the magic-code branch) only — do not add it to the 2FA branch (lines 312–359), since the mock and issue body are scoped to "the magic code input on the login page".

Why this approach

Co-locating the caution row inside the magic-code branch of BaseValidateCodeForm.tsx keeps the warning bound to the exact UI state where the magic code is visible — when the form pivots to 2FA (which uses a different code, not the email magic code), the warning correctly disappears. Using the existing expensifyIcons.Exclamation asset (assets/images/exclamation.svg) with fill={theme.icon} and the small flag is the same idiom already used in FormHelpMessage at src/components/FormHelpMessage.tsx:126-133 for its isInfo variant, and in InlineSystemMessage at src/components/InlineSystemMessage.tsx:22-29, so the visual weight matches other inline informational icons in the app. Splitting the copy into two translation keys (scamWarningTitle / scamWarningDescription) lets the bold leading sentence render natively via nested <Text> with styles.textBold (defined at src/styles/index.ts:616-618) without going through RenderHTML/Parser, which would be heavier and inconsistent with the rest of the form. Reusing FormHelpMessage with isInfo and shouldRenderMessageAsHTML was considered but rejected because its <muted-text-label> wrapper at src/components/FormHelpMessage.tsx:103 does not preserve <strong> weight, so the bold leading sentence in the mock would be lost.

[ryntgh]

Proposal

What is the root cause of that problem?

Improvement

What changes do you think we should make in order to solve the problem?

We should add a caution block directly in the login magic code form (inside the validate code branch, below the resend/countdown area)

                    <View style={[styles.mt5, styles.flexRow, styles.alignItemsCenter]}>
                        <View style={[styles.mr3]}>
                            <Icon
                                src={expensifyIcons.Exclamation}
                                fill={theme.icon}
                                medium
                            />
                        </View>
                        <View style={styles.flex1}>
                            <RenderHTML html={translate('validateCodeForm.avoidScamsMessage')} />
                        </View>
                    </View>

App/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx

Line 405 in 72af49f

</View>

Add the copy in validateCodeForm translations:

    validateCodeForm: {
        ...
        avoidScamsMessage: '<strong>Avoid scams. Do not share your code with anyone.</strong> Our team will never call, text, or email you for this code.',
    },

App/src/languages/en.ts

Lines 2915 to 2929 in 72af49f

	validateCodeForm: {
	magicCodeNotReceived: "Didn't receive a magic code?",
	enterAuthenticatorCode: 'Please enter your authenticator code',
	enterRecoveryCode: 'Please enter your recovery code',
	requiredWhen2FAEnabled: 'Required when 2FA is enabled',
	requestNewCode: ({timeRemaining}: {timeRemaining: string}) => `Request a new code in <a>${timeRemaining}</a>`,
	requestNewCodeAfterErrorOccurred: 'Request a new code',
	timeRemainingAnnouncement: ({timeRemaining}: {timeRemaining: number}) => `Time remaining: ${timeRemaining} ${timeRemaining === 1 ? 'second' : 'seconds'}`,
	timeExpiredAnnouncement: 'The time has expired',
	error: {
	pleaseFillMagicCode: 'Please enter your magic code',
	incorrectMagicCode: 'Incorrect or invalid magic code. Please try again or request a new code.',
	pleaseFillTwoFactorAuth: 'Please enter your two-factor authentication code',
	},
	},

As per our philosophies, we should avoid string concatenation. So I think we should use RenderHTML here

What alternative solutions did you explore? (Optional)

N/A

Test branch

Desktop	Mobile

[github-actions]

⚠️ @ryntgh Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).