fix(passkeys): Show passkeys unsupported error in alert bar#20544
Open
vpomerleau wants to merge 1 commit intomainfrom
Open
fix(passkeys): Show passkeys unsupported error in alert bar#20544vpomerleau wants to merge 1 commit intomainfrom
vpomerleau wants to merge 1 commit intomainfrom
Conversation
Because: * The implementation matched an outdated design This commit: * Update the error messsage, and include a support link in the error component * Show the updated message in an alert bar, not inline Closes #FXA-13683
Contributor
There was a problem hiding this comment.
Pull request overview
Updates the passkeys “not supported” UX in Firefox Accounts Settings to match the newer design by switching from an inline/banner message to an AlertBar message and adding a “Learn more” support link.
Changes:
- Update WebAuthn NotSupportedError localization keys/text (including a new
-v2registration string) and add a dedicated “Learn more” link label. - Introduce a shared
UnsupportedPasskeyAlertReact component and trigger it viauseAlertBar()from the Passkeys settings row and passkey creation flow. - Add a WebAuthn support pre-check before mounting the MFA guard for passkey creation, with updated unit tests/stories.
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/fxa-settings/src/lib/passkeys/webauthn-errors.ts | Updates NotSupportedError FTL id/text for registration and aligns fallback text. |
| packages/fxa-settings/src/lib/passkeys/index.ts | Re-exports passkeys constants. |
| packages/fxa-settings/src/lib/passkeys/en.ftl | Adds new not-supported-v2 message and link label; updates auth not-supported text. |
| packages/fxa-settings/src/lib/passkeys/constants.ts | Introduces PASSKEY_SUPPORT_URL constant (currently placeholder). |
| packages/fxa-settings/src/components/Settings/UnsupportedPasskeyAlert/index.tsx | Adds shared alert content with localized text + external support link. |
| packages/fxa-settings/src/components/Settings/UnitRowPasskey/index.tsx | Uses AlertBar for unsupported WebAuthn instead of inline error banner; uses shared support URL. |
| packages/fxa-settings/src/components/Settings/UnitRowPasskey/index.test.tsx | Updates tests to assert AlertBar push behavior and support link URL. |
| packages/fxa-settings/src/components/Settings/UnitRowPasskey/index.stories.tsx | Adds AlertBar to stories so pushed alerts are visible. |
| packages/fxa-settings/src/components/Settings/UnitRowPasskey/en.ftl | Removes old inline “webauthn not supported” banner string. |
| packages/fxa-settings/src/components/Settings/PagePasskeyAdd/index.tsx | Adds pre-check to avoid MFA prompt when WebAuthn is unsupported; special-cases NotSupported to use shared alert. |
| packages/fxa-settings/src/components/Settings/PagePasskeyAdd/index.test.tsx | Adds coverage for NotSupported alert content/link and for the pre-check redirect behavior. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+5
to
+7
| // TODO: Update with the actual SUMO support article link once published. | ||
| export const PASSKEY_SUPPORT_URL = | ||
| 'https://support.mozilla.org/kb/placeholder-article'; |
| ).toHaveBeenCalledWith({ | ||
| event: { reason: 'not_supported' }, | ||
| }); | ||
| // Defensive defensive case: pre-check at MfaGuardPagePasskeyAdd is the |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Because
This pull request
Issue that this pull request solves
Closes: FXA-13683
Checklist
Put an
xin the boxes that applyHow to review (Optional)
Screenshots (Optional)
Other information (Optional)
Any other information that is important to this pull request.