Skip to content

feat(settings): add passkey-context copy to FlowSetup2faPrompt - #21021

Merged
vbudhram merged 1 commit into
mainfrom
fxa-13822
Aug 14, 2026
Merged

feat(settings): add passkey-context copy to FlowSetup2faPrompt#21021
vbudhram merged 1 commit into
mainfrom
fxa-13822

Conversation

@vbudhram

@vbudhram vbudhram commented Aug 13, 2026

Copy link
Copy Markdown
Contributor

Because

  • When a relying party requires two-step authentication and the user signed in with a passkey, the current copy is misleading. It says the service "requires you to set up two-step authentication to keep your account safe", but the passkey ceremony already authenticated the user. The setup protects the other sign-in methods, not the passkey path.
  • UX has finalized the replacement copy.

This pull request

  • Adds a success banner ("Successfully signed in with passkey") and swaps the body copy on FlowSetup2faPrompt when the session came from a passkey. Page label, heading, authenticator-apps line, and Continue button are unchanged.
  • Adds two FTL ids and leaves the existing ids alone. The new body string reuses the shared -product-mozilla-account term.
  • Wires the signal end to end. isPasskeySession already reached handleNavigation from the passkey sign-in flow but was dropped by createSigninLocationState; it now survives into SigninLocationState and flows through the InlineTotpSetup container to the prompt.
  • An error banner replaces the success banner rather than stacking with it.
  • Unit tests cover the propagation and both copy paths; the two AAL2 passkey functional tests assert the banner.

Caveat: the flag lives in router state, so a hard reload of /inline_totp_setup falls back to the generic copy. Reading sessionStatus().details.sessionVerificationMethod would survive reloads, but it is also true for a cached passkey session, where "Successfully signed in with passkey" would be inaccurate.

Issue that this pull request solves

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

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)

  • Propagation path: Signin/utils.ts (createSigninLocationState) → InlineTotpSetup/container.tsxFlowSetup2faPrompt/index.tsx.
  • The l10n strings are the part worth a careful read, because new ids go to Pontoon.

Screenshots (Optional)

None. Visual fidelity was not checked. Open the Pages/InlineTotpSetupSignedInWithPasskey story and compare against Figma node 3958-21735.

Other information (Optional)

Verification: nx lint fxa-settings and yarn compile clean; 74 tests pass across FlowSetup2faPrompt, InlineTotpSetup, and Signin/utils. Playwright not run locally.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates FlowSetup2faPrompt (in fxa-settings) to present clearer copy when the user has just signed in with a passkey and is being prompted to set up two-step authentication, including new localized strings, tests, and a Storybook story.

Changes:

  • Added an optional signedInWithPasskey prop to conditionally show a success banner and alternate body copy.
  • Added new Fluent strings (en.ftl) for the passkey success banner and passkey-specific description copy.
  • Updated unit tests and Storybook stories to cover the passkey path.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File Description
packages/fxa-settings/src/components/Settings/FlowSetup2faPrompt/index.tsx Adds signedInWithPasskey branching for banner + description copy using Fluent resolver.
packages/fxa-settings/src/components/Settings/FlowSetup2faPrompt/index.test.tsx Adds tests covering the new passkey banner and copy branch.
packages/fxa-settings/src/components/Settings/FlowSetup2faPrompt/index.stories.tsx Adds a Storybook story for the passkey branch.
packages/fxa-settings/src/components/Settings/FlowSetup2faPrompt/en.ftl Adds two new Fluent message IDs for the passkey branch.

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

Comment thread packages/fxa-settings/src/components/Settings/FlowSetup2faPrompt/index.tsx Outdated
@vpomerleau
vpomerleau self-requested a review August 13, 2026 18:34
@vpomerleau
vpomerleau marked this pull request as draft August 13, 2026 18:34
Because:

* Telling a passkey user the service "requires you to set up two-step
  authentication to keep your account safe" is misleading. The passkey
  already authenticated them; the setup protects the other sign-in
  methods.
* UX has finalized the replacement copy.

This commit:

* Swaps the body copy and adds a success banner on FlowSetup2faPrompt
  when the session came from a passkey.
* Adds two FTL ids, reusing the shared -product-mozilla-account term.
* Forwards isPasskeySession into SigninLocationState and on through the
  InlineTotpSetup container, so the copy actually renders.
* Lets an error banner replace the success banner rather than stack.
* Covers both paths in unit tests, a Storybook story, and the two AAL2
  passkey functional tests.

Closes #FXA-13822
@vpomerleau
vpomerleau marked this pull request as ready for review August 13, 2026 20:15
@vbudhram
vbudhram merged commit 95e9b8d into main Aug 14, 2026
21 checks passed
@vbudhram
vbudhram deleted the fxa-13822 branch August 14, 2026 16:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants