[Payment due 12/7][$250] Expensify Card - Magic Code page doesn’t display email

[jponikarchuk]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.2.58-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: Exploratory
Email or phone of affected tester (no customers): biruknew45+66eeghhj@gmail.com
Issue reported by: Applause Internal Team
Device used: Web, mweb, android
App Component: Other

Action Performed:

Precondition -
Admin has issued a physical card to the member
Admin adds member as copilot (any access level)
Perform the following steps as a member:

1. Go to https://staging.new.expensify.com/
2. Go to Account
3. Open account switcher
4. Select Admin account
5. Open account switcher
6. Select Member account to change it back to the original account
7. Go to WS chat and Click on Add shipping details
8. Finish the flow and reach the magic code page

Expected Result:

On magic code page, user email should be included in.

Actual Result:

On the magic code page, the user’s email is missing.

It is reproducible on both validated and unvalidated accounts

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021990573821798768084
• Upwork Job ID: 1990573821798768084
• Last Price Increase: 2025-11-18

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @

[melvin-bot]

Triggered auto assignment to @Christinadobrzyn (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[jponikarchuk]

We have this open KI, but we can't reproduce it as validation is required for adding copilot. So, this KI is not reproducible.

[samranahm]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Magic Code page doesn’t display email

What is the root cause of that problem?

when a user switches accounts (using account switcher with copilot/delegate access), the account, primaryLogin not be updated correctly, resulting in an empty string being passed to the magic code description.
here

App/src/pages/MissingPersonalDetails/MissingPersonalDetailsMagicCodeModal.tsx

Line 29 in b6a3ee5

const primaryLogin = account?.primaryLogin ?? '';

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

we should get the email from session as fall back value

App/src/pages/MissingPersonalDetails/MissingPersonalDetailsMagicCodeModal.tsx

Line 29 in b6a3ee5

const primaryLogin = account?.primaryLogin ?? '';

    const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: true});
    const primaryLogin = account?.primaryLogin ?? session?.email ?? '';

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[ShridharGoel]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Magic code page doesn't show email.

What is the root cause of that problem?

Each magic-code flow reads the contact method from ONYXKEYS.ACCOUNT.primaryLogin. When a user becomes a copilot or switches accounts, the Account onyx key is temporarily cleared, so the UI falls back to an empty string. Example: the Expensify Card shipping flow builds primaryLogin from Account state and passes it to descriptionPrimary in the modal.

App/src/pages/MissingPersonalDetails/MissingPersonalDetailsMagicCodeModal.tsx

Lines 19 to 55 in a3ddfe7

	};
	function MissingPersonalDetailsMagicCodeModal({onClose, isValidateCodeActionModalVisible, handleSubmitForm}: MissingPersonalDetailsMagicCodeModalProps) {
	const {translate} = useLocalize();
	const [privatePersonalDetails] = useOnyx(ONYXKEYS.PRIVATE_PERSONAL_DETAILS, {canBeMissing: true});
	const [cardList] = useOnyx(ONYXKEYS.CARD_LIST, {canBeMissing: true});
	const [account] = useOnyx(ONYXKEYS.ACCOUNT, {canBeMissing: true});
	const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE, {canBeMissing: true});
	const privateDetailsErrors = privatePersonalDetails?.errors ?? undefined;
	const validateLoginError = getLatestError(privateDetailsErrors);
	const primaryLogin = account?.primaryLogin ?? '';
	const areAllCardsShipped = Object.values(cardList ?? {})?.every((card) => card?.state !== CONST.EXPENSIFY_CARD.STATE.STATE_NOT_ISSUED);
	const missingDetails = arePersonalDetailsMissing(privatePersonalDetails);
	useEffect(() => {
	if (missingDetails || !!privateDetailsErrors || !areAllCardsShipped) {
	return;
	}
	clearDraftValues(ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM);
	Navigation.goBack();
	}, [missingDetails, privateDetailsErrors, areAllCardsShipped]);
	const onBackButtonPress = () => {
	onClose?.();
	};
	const clearError = () => {
	if (isEmptyObject(validateLoginError) && isEmptyObject(validateCodeAction?.errorFields)) {
	return;
	}
	clearPersonalDetailsErrors();
	};
	return (
	<ValidateCodeActionModal

Because there is no fallback to the session email, the magic-code prompt renders without the user’s contact method, reproducing the missing-email bug across both validated and unvalidated users.

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

1. Introduce a hook that always returns the best-known contact method by prioritizing Account.primaryLogin and falling back to Session.email. This guarantees we still have the login even when the Account key is momentarily cleared.
2. Replace the account?.primaryLogin ?? '' logic in every cardPage.enterMagicCode consumer (missing personal details, Expensify Card verification, issue-new-card confirmation, etc.) with the new hook so they all share the same resilient source of truth.

Updated code examples:

// src/hooks/usePrimaryLogin.ts
import useOnyx from '@hooks/useOnyx';
import ONYXKEYS from '@src/ONYXKEYS';
import {primaryLoginSelector} from '@src/selectors/Account';
import {emailSelector} from '@src/selectors/Session';

function usePrimaryLogin(): string {
    const [primaryLogin] = useOnyx(ONYXKEYS.ACCOUNT, {selector: primaryLoginSelector, canBeMissing: true});
    const [sessionEmail] = useOnyx(ONYXKEYS.SESSION, {selector: emailSelector, canBeMissing: true});

    return primaryLogin || sessionEmail || '';
}

export default usePrimaryLogin;

// Example usage in MissingPersonalDetailsMagicCodeModal.tsx
const primaryLogin = usePrimaryLogin();

return (
    <ValidateCodeActionModal
        title={translate('cardPage.validateCardTitle')}
        descriptionPrimary={translate('cardPage.enterMagicCode', {contactMethod: primaryLogin})}
        /* ...rest of props */
    />
);

[ishpaul777]

I worked on this very similar issue, with fix to fallback to session?.email, but now i think its worth investigating why primaryLogin is missing in first place when switching from copilot to original and send it from BE if possible, i have BE access so i'll take this for investagation on BE.

@Christinadobrzyn Please dont make it external for now

[Christinadobrzyn]

Hi @ishpaul777 thank you for the information. I added an Internal label. Please let me know if I can help with anything!

[ishpaul777]

Okay I investigated this for a bit on backend, we actually send requesterEmail as response which is the primaryLogin for user, i think this will require a front-end fix but not quite what proposals are suggesting. leaving my RCA and solution feel free to make it yours

Root Cause

when User connect as delegate we clear some data from Onyx which includes account data like primaryLogin, but when user disconnect we dont add it back similar to how we add for session key

App/src/libs/actions/Delegate.ts

Lines 286 to 300 in cd0e87f

	.then(() => Onyx.clear(KEYS_TO_PRESERVE_DELEGATE_ACCESS))
	.then(() => {
	Onyx.set(ONYXKEYS.CREDENTIALS, {
	...stashedCredentials,
	accountID: response.requesterID,
	});
	Onyx.set(ONYXKEYS.SESSION, {
	...stashedSession,
	accountID: response.requesterID,
	email: requesterEmail,
	authToken,
	encryptedAuthToken: response.encryptedAuthToken,
	});
	Onyx.set(ONYXKEYS.STASHED_CREDENTIALS, {});
	Onyx.set(ONYXKEYS.STASHED_SESSION, {});

Solution

use requesterEmail from backend response add the primaryLogin to Account onyx key here:

App/src/libs/actions/Delegate.ts

Lines 286 to 300 in cd0e87f

	.then(() => Onyx.clear(KEYS_TO_PRESERVE_DELEGATE_ACCESS))
	.then(() => {
	Onyx.set(ONYXKEYS.CREDENTIALS, {
	...stashedCredentials,
	accountID: response.requesterID,
	});
	Onyx.set(ONYXKEYS.SESSION, {
	...stashedSession,
	accountID: response.requesterID,
	email: requesterEmail,
	authToken,
	encryptedAuthToken: response.encryptedAuthToken,
	});
	Onyx.set(ONYXKEYS.STASHED_CREDENTIALS, {});
	Onyx.set(ONYXKEYS.STASHED_SESSION, {});

---

since this requires frontend fix normal process should be followed @Christinadobrzyn please add a c+ so they can take over further reviewing process

[ShridharGoel]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When a copilot disconnects from an admin account and returns to their own account, the account switch flow reaches the "magic code" confirmation page without an email shown.

What is the root cause of that problem?

When a user connects as a delegate we call Onyx.clear, which wipes the ACCOUNT collection (including primaryLogin). On disconnect we repopulate ONYXKEYS.CREDENTIALS and ONYXKEYS.SESSION, but we never rebuild ACCOUNT, so primaryLogin stays blank until a later data fetch completes.

App/src/libs/actions/Delegate.ts

Lines 286 to 300 in cd0e87f

	.then(() => Onyx.clear(KEYS_TO_PRESERVE_DELEGATE_ACCESS))
	.then(() => {
	Onyx.set(ONYXKEYS.CREDENTIALS, {
	...stashedCredentials,
	accountID: response.requesterID,
	});
	Onyx.set(ONYXKEYS.SESSION, {
	...stashedSession,
	accountID: response.requesterID,
	email: requesterEmail,
	authToken,
	encryptedAuthToken: response.encryptedAuthToken,
	});
	Onyx.set(ONYXKEYS.STASHED_CREDENTIALS, {});
	Onyx.set(ONYXKEYS.STASHED_SESSION, {});

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

After clearing the preserved keys and restoring session/credentials, also merge accountID and primaryLogin back into ONYXKEYS.ACCOUNT using the requesterEmail we already receive from the backend.

Updated code (to be added right after the Onyx.set(ONYXKEYS.SESSION, …) call):

Onyx.merge(ONYXKEYS.ACCOUNT, {
    accountID: response.requesterID,
    primaryLogin: requesterEmail,
});