task(settings): passkey registration UI flow by dschom · Pull Request #20385 · mozilla/fxa

dschom · 2026-04-16T01:29:06Z

Because

We want to allow users to register passkeys

This pull request

Enables bass key registration on the settings page.

Issue that this pull request solves

Closes: FXA-13072

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)

In your .env file set FEATURE_FLAGS_PASSKEYS_ENABLED=true and FEATURE_FLAGS_PASSKEY_REGISTRATION_ENABLED=true
Start he stack
Go to settings page
Try adding one more passkeys
Try deleting passkeys
Suggested review order: Storybooks, Manual Testing
Risky or complex parts: I have only really tested this on mac. I'll try to test on adroid and iphone today. I do not have a windows machine to test with, and haven't manually be be able to trip the 'unsupported' state.

Screenshots (Optional)

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

Other information (Optional)

This PR was done almost entirely by Claude by hooking up the Figma and Jira MCP servers and directing Claude to do the ticket. I've looked over the code, but will be taking a harder look now this is officially up for review. One other minor thing to note, I had to manually add support for deleting the passkey since that was in Figma, but not directly called out in the ticket.

Copilot

Pull request overview

Adds an end-to-end passkey registration UI to the FxA Settings “Security” section, including a new “Create passkey” route guarded by MFA and UI to list existing passkeys.

Changes:

Introduces /settings/passkeys/add with an MFA-guarded “ceremony in progress” modal and WebAuthn registration completion.
Adds a Passkeys row to the Security section that fetches and renders the user’s passkeys (plus max-limit banner behavior).
Extends the Account model with JWT-scoped helpers for starting/finishing passkey registration.

Reviewed changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
packages/fxa-settings/src/models/Account.ts	Adds JWT-scoped wrappers for begin/complete passkey registration.
packages/fxa-settings/src/components/Settings/index.tsx	Registers the MFA-guarded `/passkeys/add` route behind a feature flag.
packages/fxa-settings/src/components/Settings/Security/index.tsx	Shows the Passkeys unit row in the Security section behind a feature flag.
packages/fxa-settings/src/components/Settings/UnitRowPasskey/index.tsx	Fetches passkeys via auth-client and renders the Passkeys unit row + subrows.
packages/fxa-settings/src/components/Settings/UnitRow/index.tsx	Tweaks CTA rendering logic to allow disabled CTAs to render actions container.
packages/fxa-settings/src/components/Settings/SubRow/index.tsx	Updates passkey subrow typing and adds “sign in only” messaging + MFA-guarded delete modal.
packages/fxa-settings/src/components/Settings/PagePasskeyAdd/index.tsx	Implements the WebAuthn registration ceremony and success/error handling.
.test.tsx / .stories.tsx / *.ftl	Updates tests/stories and adds localization strings for the new passkey UI.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+## Error / limit messages
+
+passkey-row-webauthn-not-supported = Your browser or device doesn't support passkeys.
+passkey-row-limit-reached = You've used all 10 passkeys. Delete a passkey to create a new one.


+          {config.featureFlags?.passkeyRegistrationEnabled && (
+            <MfaGuardPagePasskeyAdd path="/passkeys/add" />
+          )}


+        {config.featureFlags?.passkeyRegistrationEnabled && (
+          <>
+            <hr className="unit-row-hr" />
+            <UnitRowPasskey />
+          </>
+        )}


+    mockListPasskeys.mockResolvedValue([]);
+    renderUnitRowPasskey();
+    await waitFor(() => {
+      expect(screen.getByText('Not set')).toBeInTheDocument();
+    });
  });

-  it('renders all passkey sub-rows', () => {
+  it('renders all passkey sub-rows', async () => {
    renderUnitRowPasskey();
-    expect(screen.getByText('MacBook Pro')).toBeInTheDocument();
-    expect(screen.getByText('iPhone 15')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('passkey-sub-row-passkey-1')


MagentaManifold · 2026-04-17T19:18:51Z

+  const [passkeys, setPasskeys] = useState<Passkey[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchPasskeys = useCallback(async () => {


Passkey display & delete are basically the whole point of my ticket 😭 The way you did it isn't the best though (see my PR). It's nice to have them for testing registration stuff out, but I recommend not including them when you merge it. Or... you can copy everything from my PR and merge all these in one go 🤔 (in hindsight these two tickets really should be done at the same time by one person, bc they are kinda mutually blocking)


  const learnMoreLink = (
    <FtlMsg id="passkey-row-info-link-2">
      <LinkExternal


+page-passkey-add-error-timed-out = Passkey setup timed out or was cancelled
+page-passkey-add-error-not-supported = Your browser or device doesn't support passkeys.


+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  const navigateToSettings = useCallback(() => {
+    navigateWithQuery(SETTINGS_PATH + '#security', { replace: true });
+  }, [navigateWithQuery]);
+
+  const handleCancel = useCallback(() => {
+    abortControllerRef.current?.abort();


+    } finally {
+      setLoading(false);
+    }
+  };


vpomerleau · 2026-04-17T19:16:42Z

+        {...(!passkey.backupEligible && {
+          statusIcon: 'alert',
+          message: (
+            <FtlMsg id="passkey-sub-row-sign-in-only">
+              <p>Sign in only. Can’t be used to sync.</p>
+            </FtlMsg>
+          ),
+        })}


This block should be removed for a few reasons:

we are not showing an alert/warning in phase 1, as it is not actionable

backupEligible is not related to Firefox Sync or (future) eligibility for passwordless sign-in to sync. backupEligible is about the passkey itself and whether it is device-bound (e.g., security key) or capable of backup between devices (e.g., Apple keychain) - we're not using that information for any UI state at the moment

Suggested change

{...(!passkey.backupEligible && {

statusIcon: 'alert',

message: (

<FtlMsg id="passkey-sub-row-sign-in-only">

<p>Sign in only. Can’t be used to sync.</p>

</FtlMsg>

),

})}

MagentaManifold · 2026-04-17T18:35:51Z

+    >
+      <div className="absolute inset-0 bg-grey-100/50 dark:bg-grey-900/50" />
+      <div className="relative bg-white dark:bg-grey-700 rounded-xl shadow-lg p-8 w-[480px] max-w-[calc(100vw-2rem)] text-center">
+        <LoadingSpinner className="flex justify-center mb-6" />


I dunno why, but the loading spinner looks weird in storybook (it looks fine in other places)

MagentaManifold · 2026-04-17T18:39:41Z

+      className="fixed inset-0 flex items-center justify-center z-50"
+      data-testid="page-passkey-add"
+    >
+      <div className="absolute inset-0 bg-grey-100/50 dark:bg-grey-900/50" />


We have a Modal component that handles darkening the background. Should we just use that instead?

(🤔 Modal gets dismissed when you click outside, so maybe that could be a reason to not use it here?)

If it's a separate page then we don't need this backdrop at all since there's nothing behind it

MagentaManifold · 2026-04-17T18:47:06Z

+      data-testid="page-passkey-add"
+    >
+      <div className="absolute inset-0 bg-grey-100/50 dark:bg-grey-900/50" />
+      <div className="relative bg-white dark:bg-grey-700 rounded-xl shadow-lg p-8 w-[480px] max-w-[calc(100vw-2rem)] text-center">


max-w-[calc(100vw-2rem)] feels over complicated. mx-2 would work. (Mixing rem and px also isn't great) w-[480px] can be replaced with w-120. And again, Modal does all these for you, unless there's a good reason to not use it.

Actually wait, is this supposed to be a separate page or a pop up modal? The story makes it look like a modal. If it's a separate page, we have FlowContainer.

NOOOO the design updated after I made the components! Passkey delete is also a separate page now 😭 I gotta redo it

MagentaManifold · 2026-04-17T19:18:51Z

+  const [passkeys, setPasskeys] = useState<Passkey[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchPasskeys = useCallback(async () => {


Passkey display & delete are basically the whole point of my ticket 😭 The way you did it isn't the best though (see my PR). It's nice to have them for testing registration stuff out, but I recommend not including them when you merge it. Or... you can copy everything from my PR and merge all these in one go 🤔 (in hindsight these two tickets really should be done at the same time by one person, bc they are kinda mutually blocking)

vpomerleau

I checked out the branch and successfully tested the registration flow in local environment. 🙌

Some of the issues I spotted are flagged in my comments or the copilot review.

In addition, I noticed that registration with 1 password fails. Might not be a big deal since production doesn't support extensions but the fix looks to be simple (sent via Slack).

vpomerleau · 2026-04-17T19:19:48Z

    });
  }

+  async beginPasskeyRegistrationWithJwt(): Promise<PublicKeyCredentialCreationOptionsJSON> {


Looks like these are unused and safe to remove.

vpomerleau · 2026-04-17T19:28:53Z

+      alertBar.error(
+        ftlMsgResolver.getMsg(
+          'passkey-row-webauthn-not-supported',
+          "Your browser or device doesn't support passkeys."


All strings in fallbacks and ftl should use curly quote ’ instead of straight quote '

Suggested change

"Your browser or device doesn't support passkeys."

"Your browser or device doesn’t support passkeys."

vpomerleau · 2026-04-17T19:30:49Z

+  const handleDeletePasskey = async (credentialId: string) => {
+    try {
+      // Delete the passkeys
+      await account.deletePasskeyWithJwt(credentialId);


There's overlap between this PR and #20380 for passkey listing/deletion, but either way we should be consistent about directly using authClient or adding to the account model (we have been moving towards directly using authClient)

dschom force-pushed the FXA-13072 branch 7 times, most recently from 6f7e194 to 2c1700c Compare April 16, 2026 23:18

dschom marked this pull request as ready for review April 17, 2026 15:36

dschom requested review from a team as code owners April 17, 2026 15:36

dschom requested a review from vpomerleau April 17, 2026 15:36

vpomerleau requested a review from Copilot April 17, 2026 16:30

Copilot started reviewing on behalf of vpomerleau April 17, 2026 16:30 View session

dschom force-pushed the FXA-13072 branch from 2c1700c to d0b3abb Compare April 17, 2026 16:36

task(settings): passkey registration UI flow

f296a7b

dschom force-pushed the FXA-13072 branch from d0b3abb to f296a7b Compare April 17, 2026 16:37

Copilot AI reviewed Apr 17, 2026

View reviewed changes

vpomerleau reviewed Apr 17, 2026

View reviewed changes

MagentaManifold reviewed Apr 17, 2026

View reviewed changes

vpomerleau reviewed Apr 17, 2026

View reviewed changes

vpomerleau mentioned this pull request Apr 17, 2026

Passkey type fixes #20401

Open

5 tasks

		page-passkey-add-error-timed-out = Passkey setup timed out or was cancelled
		page-passkey-add-error-not-supported = Your browser or device doesn't support passkeys.

	"Your browser or device doesn't support passkeys."
	"Your browser or device doesn’t support passkeys."

Conversation

dschom commented Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Because

This pull request

Issue that this pull request solves

Checklist

How to review (Optional)

Screenshots (Optional)

Other information (Optional)

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vpomerleau left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

dschom commented Apr 16, 2026 •

edited

Loading