fix(settings): clear stale errors when another signin method starts

[vbudhram]

Because

• A passkey error stayed on the card after the user started a different sign-in method.
• A card banner or tooltip error stayed on the card after the user clicked passkey, Google or Apple.
• Two errors at once on the email-first and sign-in pages confuse the user.

This pull request

• Adds a clearError function to the usePasskeySignIn hook in signin-flow.ts.
• Clears the passkey error on the Index page when the user submits the email form or clicks Google or Apple.
• Clears the banner and tooltip errors on the Index page when the user clicks passkey, Google or Apple.
• Applies the same two rules on the Signin page.
• Adds 8 tests, 4 in each page test file. The Index Subject mock now turns the passkey feature flags on.

Issue that this pull request solves

Closes: https://mozilla-hub.atlassian.net/browse/FXA-14227

Checklist

Put an x in the boxes that apply

• My commit is GPG signed.
• If applicable, I have modified or added tests which pass locally.
• I have added necessary documentation (if appropriate).
• I have verified that my changes render correctly in RTL (if appropriate).
• I have manually reviewed all AI generated code.

How to review (Optional)

• Key files/areas to focus on: clearErrors in Index/index.tsx and Signin/index.tsx, and clearError in signin-flow.ts.
• Suggested review order: the hook, then the Index page, then the Signin page, then the tests.
• Risky or complex parts: the Index page mock wraps the page in AppContext to set the passkey flags. The Google and Apple buttons use the existing onContinueWithGoogle and onContinueWithApple props, so ThirdPartyAuth is unchanged.

Screenshots (Optional)

Please attach the screenshots of the changes made in case of change in user interface.

None. The change removes an error that is already on the screen. It adds no new UI.

Other information (Optional)

The ticket screenshots could not be read by the pipeline. The two clearing rules are implemented as written in the ticket text.

Local results:

• node scripts/test.js --watchAll=false src/pages/Index src/pages/Signin/index.test.tsx src/lib/passkeys in fxa-settings: 421 passed, 0 failed.
• npx nx lint fxa-settings: exit 0. npx tsc -p packages/fxa-settings/tsconfig.json --noEmit: no errors.

The Playwright functional tests did not run locally. CI covers them.

[Copilot]

🟢 Approval recommended

The implementation consistently clears conflicting errors and provides focused coverage for each affected sign-in flow.

Pull request overview

Clears stale authentication errors when users switch sign-in methods.

Changes:

• Exposes passkey error clearing from usePasskeySignIn.
• Clears conflicting banner, tooltip, and passkey errors across Index and Signin.
• Adds interaction tests and passkey-enabled test setup.

File summaries

File	Description
packages/fxa-settings/src/lib/passkeys/signin-flow.ts	Exposes clearError.
packages/fxa-settings/src/pages/Index/index.tsx	Clears stale errors between methods.
packages/fxa-settings/src/pages/Index/index.test.tsx	Tests Index error clearing.
packages/fxa-settings/src/pages/Index/mocks.tsx	Enables passkeys in tests.
packages/fxa-settings/src/pages/Signin/index.tsx	Clears Signin error collisions.
packages/fxa-settings/src/pages/Signin/index.test.tsx	Tests Signin error clearing.

Review details

• Files reviewed: 6/6 changed files
• Comments generated: 0
• Review effort level: Balanced

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.