feat(settings): wire passkey management UI to backend#20380
feat(settings): wire passkey management UI to backend#20380MagentaManifold wants to merge 1 commit intomainfrom
Conversation
There was a problem hiding this comment.
Pull request overview
Wires the Settings “Passkeys” management UI into the FxA backend by adding passkeys to the settings account state/storage model, fetching passkeys from auth-server, and invoking backend APIs for passkey operations. It also fixes auth-server passkey handlers to treat uid as hex when constructing buffers.
Changes:
- Add
passkeysto settings account state, unified localStorage schema, and account data fetching/refresh flows. - Update Settings UI components (UnitRowPasskey/PasskeySubRow) to read passkeys from account context and call backend passkey APIs.
- Fix auth-server passkey/account handlers to use
Buffer.from(uid, 'hex')when querying passkeys.
Reviewed changes
Copilot reviewed 16 out of 16 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/fxa-settings/src/models/contexts/AppContext.ts | Adds passkeys to the default mock account context. |
| packages/fxa-settings/src/models/contexts/AccountStateContext.tsx | Extends account state model to include passkeys and serializes it through unified storage. |
| packages/fxa-settings/src/models/Account.ts | Adds passkeys getter, refresh support, and passkey delete/rename methods. |
| packages/fxa-settings/src/lib/hooks/useAccountData.ts | Adds passkeys support to consolidated account fetch/field refetch logic. |
| packages/fxa-settings/src/lib/account-storage.ts | Extends unified localStorage schema to persist passkeys. |
| packages/fxa-settings/src/components/Settings/UnitRowPasskey/index.tsx | Switches to reading passkeys from useAccount() and keys subrows by credentialId. |
| packages/fxa-settings/src/components/Settings/UnitRowPasskey/index.test.tsx | Updates tests to provide passkeys through AppContext. |
| packages/fxa-settings/src/components/Settings/UnitRowPasskey/index.stories.tsx | Updates stories to provide passkeys (and mock passkey methods) via AppContext. |
| packages/fxa-settings/src/components/Settings/SubRow/index.tsx | Updates passkey row data shape and calls account.deletePasskey from UI. |
| packages/fxa-settings/src/components/Settings/SubRow/index.test.tsx | Updates passkey subrow tests to mock useAccount() instead of passing deletePasskey as a prop. |
| packages/fxa-settings/src/components/Settings/SubRow/index.stories.tsx | Updates passkey stories to new passkey data shape. |
| packages/fxa-settings/src/components/Settings/Security/index.tsx | Adds UnitRowPasskey into Security settings behind a feature flag. |
| packages/fxa-content-server/server/config/local.json-dist | Adds passkey-related feature flags to local config template. |
| packages/fxa-auth-server/lib/routes/passkeys.ts | Uses hex-decoding for uid buffer conversion in passkey routes. |
| packages/fxa-auth-server/lib/routes/account.ts | Uses hex-decoding for uid when listing passkeys in the consolidated /account response. |
| libs/accounts/passkey/src/lib/passkey.repository.in.spec.ts | Updates test description to reflect lastUsedAt naming. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @@ -85,6 +89,13 @@ export const Security = forwardRef<HTMLDivElement>((_, ref) => { | |||
| </Localized> | |||
| <hr className="unit-row-hr" /> | |||
|
|
|||
| {passkeyRegistrationEnabled && ( | |||
| <> | |||
| <UnitRowPasskey /> | |||
| <hr className="unit-row-hr" /> | |||
| </> | |||
| )} | |||
There was a problem hiding this comment.
This section is gated on featureFlags.passkeyRegistrationEnabled, which will hide passkey management entirely when registration is disabled but listing/deleting existing passkeys is still enabled. Consider gating the row on featureFlags.passkeysEnabled (and optionally disabling only the “Create” CTA when passkeyRegistrationEnabled is false).
There was a problem hiding this comment.
passkeyRegistrationEnabled is for management UI as well
There was a problem hiding this comment.
EDIT: well actually it should be gated on both, i.e., passkeysEnabled && passkeyRegistrationEnabled
Because: * we want passkey management UI to actually work This commit: * wires passkey management UI to backend Closes FXA-13073
77e2f9f to
bdfe514
Compare
Because
This pull request
Issue that this pull request solves
Closes: FXA-13073
Checklist
Put an
xin the boxes that applyHow to review (Optional)
Screenshots (Optional)
Please attach the screenshots of the changes made in case of change in user interface.
Other information (Optional)
Any other information that is important to this pull request.