[$250] Web/Safari - Account -The email field error appears after successfully signing in with an Apple account

[IuliiaHerets]

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: v9.0.65-1 Reproducible in staging?: Y Reproducible in production?: Y If this was caught during regression testing, add the test name, ID and link from TestRail: Issue reported by: Applause Internal Team

Action Performed:

1. Go to the sign-in page (log out if you're already logged in)
2. Click on the Apple button
3. Enter or select a Apple Account

Expected Result:

The user is logged correctly into NewDot, no errors are displayed,

Actual Result:

The email field error appears after successfully signing in with an Apple account

Workaround:

Unknown

Platforms:

• [ ] Android: Standalone
• [ ] Android: HybridApp
• [ ] Android: mWeb Chrome
• [ ] iOS: Standalone
• [ ] iOS: HybridApp
• [ ] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/2086417a-a44a-4068-98d2-c50c6a18d968

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021859629436988834132
• Upwork Job ID: 1859629436988834132
• Last Price Increase: 2024-11-21

Issue Owner

Current Issue Owner: @akinwale

[melvin-bot[bot]]

Triggered auto assignment to @sakluger (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.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[huult]

Edited by proposal-police: This proposal was edited at 2024-11-21 18:05:48 UTC.

Proposal

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

The email field error appears after successfully signing in with an Apple account

What is the root cause of that problem?

When we click the Apple icon, a popup appears that prevents the onBlur of the TextInput from being executed. When we return to the Expensify app, the onBlur is executed and validates with the login value as ''.

https://github.com/Expensify/App/blob/b4a8a41f46468a2f336070054f4036d9c04f94a7/src/pages/signin/LoginForm/BaseLoginForm.tsx#L245-L252

https://github.com/user-attachments/assets/53b86695-1933-425b-abe3-e28c70bbf100

The reason validate(login); is executed is that isSigningWithAppleOrGoogle.current is not updated to true for desktop web, so the early return is not triggered.

isSigningWithAppleOrGoogle.current is not updated to true because we did not add the onPress handler for the desktop web version

https://github.com/Expensify/App/blob/f84785d53768a155bad3398ebb46d48c3f9eaf57/src/components/SignInButtons/AppleSignIn/index.tsx#L139

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

To resolve this issue, we must call onPress when AppleSignIn is clicked so that isSigningWithAppleOrGoogle.current can be updated. This allows the onBlur to return early without calling validate(login);. Something like this:

We pass the onPress prop from BaseLoginForm to AppleSignInDiv and add an event listener for the click to call onPress

// src/components/SignInButtons/AppleSignIn/index.tsx#L83

    React.useEffect(() => {
        const appleSignInButton = document.getElementById('appleid-signin');
        if (!appleSignInButton && !isDesktopFlow) {
            return;
        }

        appleSignInButton?.addEventListener('click', () => {
            onPress?.();
        });

        return () => {
            appleSignInButton?.removeEventListener('click', () => {
                onPress?.();
            });
        };
    });

note: If Google Sign-In has the same issue, we can reuse this solution

Test branch

POC

https://github.com/user-attachments/assets/430cf29b-fe16-4685-8db6-001e0806588b

What alternative solutions did you explore? (Optional)