feat(passkeys): show max-limit banner and disable Create button at passkey limit

Because:

* Users need clear feedback when they've reached the passkey limit and should not be able to attempt creating another one.

This commit:

* Threads passkeys.maxPerUser config from content-server to fxa-settings using the same PASSKEYS__MAX_PASSKEYS_PER_USER env var as auth-server
* Renders a warning Banner in the passkeys row when the limit is reached
* Passes disabled/disabledReason to UnitRow to gray out the Create button
Additional tweaks to align with latest UX designs:
* Renames canSync → prfEnabled on the Passkey type (no phase-1 UI; needed for the phase-2 passwordless-sync upgrade flow)
* Removes the sign-in-only SubRow badge (not shown in phase 1)
* Updates link copy to "Learn more" with FTL id passkey-row-info-link-2
* Tightens SubRow padding and UnitRow action-button top margin
* Adds className prop to Banner to allow margin overrides

Closes #FXA-13369

Author: vpomerleau

packages/fxa-content-server/server/lib/beta-settings.js

@@ -93,6 +93,9 @@ const settingsConfig = {
     count: config.get('recovery_codes.count'),
     length: config.get('recovery_codes.length'),
   },
+  passkeys: {
+    maxPerUser: config.get('passkeys.maxPerUser'),
+  },
   mfa: {
     otp: {
       expiresInMinutes: config.get('mfa.otp.expiresInMinutes'),

packages/fxa-content-server/server/lib/configuration.js

@@ -272,6 +272,14 @@ const conf = (module.exports = convict({
       env: 'PASSWORDLESS_SIGNUP_ENABLED',
     },
   },
+  passkeys: {
+    maxPerUser: {
+      default: 10,
+      doc: 'Maximum number of passkeys a single user account may register. Must stay in sync with auth-server PASSKEYS__MAX_PASSKEYS_PER_USER.',
+      format: Number,
+      env: 'PASSKEYS__MAX_PASSKEYS_PER_USER',
+    },
+  },
   darkMode: {
     enabled: {
       default: false,

packages/fxa-content-server/server/lib/routes/react-app/route-definition-index.js

@@ -64,6 +64,7 @@ function getIndexRouteDefinition(config) {
   const FEATURE_FLAGS_PASSKEY_AUTHENTICATION_ENABLED = config.get(
     'featureFlags.passkeyAuthenticationEnabled'
   );
+  const PASSKEYS_MAX_PER_USER = config.get('passkeys.maxPerUser');
   const DARK_MODE_ENABLED = config.get('darkMode.enabled');
   const GLEAN_ENABLED = config.get('glean.enabled');
   const GLEAN_APPLICATION_ID = config.get('glean.applicationId');
@@ -143,6 +144,9 @@ function getIndexRouteDefinition(config) {
       enabled: CMS_ENABLED,
       l10nEnabled: CMS_L10N_ENABLED,
     },
+    passkeys: {
+      maxPerUser: PASSKEYS_MAX_PER_USER,
+    },
     nimbus: {
       enabled: NIMBUS_ENABLED,
       preview: NIMBUS_PREVIEW,

packages/fxa-settings/src/components/Banner/index.tsx

@@ -27,6 +27,7 @@ export const Banner = ({
   link,
   isFancy,
   bannerId,
+  className,
   textAlignClassName = 'text-start',
   iconAlignClassName = 'self-center',
 }: BannerProps) => {
@@ -36,6 +37,7 @@ export const Banner = ({
       id={bannerId || ''}
       className={classNames(
         'my-4 flex flex-row no-wrap items-center px-4 py-3 gap-3.5 rounded-md border border-transparent text-sm text-grey-700',
+        className,
         textAlignClassName,
         textAlignClassName === 'text-center' && 'justify-center',
         type === 'error' && 'bg-red-100',

packages/fxa-settings/src/components/Banner/interfaces.ts

@@ -15,6 +15,7 @@ import { NotificationType } from '../../models';
  * @property {Animation} [animation] - Optional animation settings for the banner.
  * @property {DismissButtonProps} [dismissButton] - Optional properties for a dismiss button.
  * @property {BannerLinkProps} [link] - Optional properties for a link within the banner.
+ * @property {string} [className] - Optional CSS class overrides, e.g. to adjust the default vertical margin.
  */
 export type BannerProps = {
   type: NotificationType;
@@ -25,6 +26,7 @@ export type BannerProps = {
   link?: BannerLinkProps;
   isFancy?: boolean;
   bannerId?: string;
+  className?: string;
   iconAlignClassName?: 'self-start' | 'self-center';
   textAlignClassName?: 'text-start' | 'text-center';
 };

packages/fxa-settings/src/components/Settings/SubRow/en.ftl

@@ -49,9 +49,6 @@ passkey-sub-row-created-date = Created: { $createdDate }
 #   $lastUsedDate (String) - a localized date string
 passkey-sub-row-last-used-date = Last used: { $lastUsedDate }
 
-# These two sentences are referring to the passkey
-passkey-sub-row-sign-in-only = Sign in only. Can’t be used to sync.
-
 passkey-sub-row-delete-title = Delete passkey
 passkey-delete-modal-heading = Delete your passkey?
 passkey-delete-modal-content = This passkey will be removed from your account. You’ll need to sign in using a different way.

packages/fxa-settings/src/components/Settings/SubRow/index.stories.tsx

@@ -139,7 +139,7 @@ export const PasskeyWithSync: StoryFn = () => (
       name: 'MacBook Pro',
       createdAt: new Date('2026-01-01').getTime(),
       lastUsed: new Date('2026-02-01').getTime(),
-      canSync: true,
+      prfEnabled: true,
     }}
   />
 );
@@ -151,7 +151,7 @@ export const PasskeyWithoutSync: StoryFn = () => (
       name: 'iPhone 14 Pro',
       createdAt: new Date('2025-12-01').getTime(),
       lastUsed: new Date('2026-01-31').getTime(),
-      canSync: false,
+      prfEnabled: false,
     }}
   />
 );
@@ -162,7 +162,7 @@ export const PasskeyNeverUsed: StoryFn = () => (
       id: '3',
       name: 'Windows PC',
       createdAt: new Date('2025-11-01').getTime(),
-      canSync: true,
+      prfEnabled: true,
     }}
   />
 );

packages/fxa-settings/src/components/Settings/SubRow/index.test.tsx

@@ -15,7 +15,7 @@ import {
   MOCK_MASKED_NATIONAL_FORMAT_PHONE_NUMBER,
   MOCK_MASKED_PHONE_NUMBER_WITH_COPY,
 } from '../../../pages/mocks';
-import { Passkey } from '../UnitRowPasskey';
+import { PasskeyRowData } from '.';
 import { AppContext } from '../../../models';
 import { mockAppContext } from '../../../models/mocks';
 import { mockAuthClient } from './mock';
@@ -273,7 +273,7 @@ describe('PasskeySubRow', () => {
     name: 'MacBook Pro',
     createdAt: new Date('2026-01-01').getTime(),
     lastUsed: new Date('2026-02-01').getTime(),
-    canSync: true,
+    prfEnabled: true,
   };
 
   const mockDeletePasskey = jest.fn();
@@ -285,7 +285,7 @@ describe('PasskeySubRow', () => {
   });
 
   const renderPasskeySubRow = (
-    passkey: Passkey = mockPasskey,
+    passkey: PasskeyRowData = mockPasskey,
     deletePasskey = mockDeletePasskey
   ) => {
     return render(
@@ -312,21 +312,6 @@ describe('PasskeySubRow', () => {
     expect(screen.queryByText(/Last used:/)).not.toBeInTheDocument();
   });
 
-  it('renders message when canSync is false', () => {
-    const passkeyWithoutSync = { ...mockPasskey, canSync: false };
-    renderPasskeySubRow(passkeyWithoutSync);
-    expect(
-      screen.queryByText('Sign in only. Can’t be used to sync.')
-    ).toBeInTheDocument();
-  });
-
-  it('does not render message when canSync is true', () => {
-    renderPasskeySubRow();
-    expect(
-      screen.queryByText('Sign in only. Can’t be used to sync.')
-    ).not.toBeInTheDocument();
-  });
-
   it('opens modal when delete button is clicked', async () => {
     renderPasskeySubRow();
     const deleteButtons = screen.getAllByTitle(/Delete passkey/);

packages/fxa-settings/src/components/Settings/SubRow/index.tsx

@@ -99,7 +99,7 @@ const SubRow = ({
   return (
     <div
       className={classNames(
-        'flex flex-col w-full max-w-full mt-8 p-4 @mobileLandscape/unitRow:mt-4 @mobileLandscape/unitRow:rounded-lg border items-start text-sm gap-2',
+        'flex flex-col w-full max-w-full mt-4 px-4 py-3 @mobileLandscape/unitRow:rounded-lg border items-start text-sm gap-2',
         {
           'bg-grey-10 dark:bg-grey-700 border-transparent': !border,
           'bg-white dark:bg-grey-700 border-grey-100 dark:border-grey-500':
@@ -131,7 +131,7 @@ const SubRow = ({
               linkExternalProps && <ExtraInfoLink />}
           </div>
           {localizedDescription && (
-            <p className="text-sm w-full mx-2 mt-2">
+            <p className="text-sm w-full mt-1">
               {localizedDescription}{' '}
               {!localizedInfoMessage && linkExternalProps && <ExtraInfoLink />}
             </p>
@@ -342,17 +342,16 @@ export const BackupPhoneSubRow = ({
   );
 };
 
-// TODO: replace with actual Passkey type when available
-type Passkey = {
+export type PasskeyRowData = {
   id: string;
   name: string;
   createdAt: number;
   lastUsed?: number;
-  canSync: boolean;
+  prfEnabled: boolean;
 };
 
 export type PasskeySubRowProps = {
-  passkey: Passkey;
+  passkey: PasskeyRowData;
   // passing in as a prop for the sake of mocking.
   // TODO: replace with actual auth client API call
   deletePasskey?: (passkeyId: string) => Promise<void>;
@@ -440,19 +439,10 @@ export const PasskeySubRow = ({
     <>
       <SubRow
         idPrefix="passkey"
-        icon={
-          <PasskeyIcon ariaHidden className="h-8 w-5 ms-2 text-purple-600" />
-        }
+        icon={<PasskeyIcon ariaHidden className="h-8 w-5 text-purple-600" />}
         localizedRowTitle={passkey.name}
         localizedDescription={localizedDescription}
-        {...(!passkey.canSync && {
-          statusIcon: 'alert',
-          message: (
-            <FtlMsg id="passkey-sub-row-sign-in-only">
-              <p>Sign in only. Can’t be used to sync.</p>
-            </FtlMsg>
-          ),
-        })}
+        // TODO (passkeys phase 2): show upgrade prompt when passkey.prfEnabled
         onDeleteClick={(event) => {
           event.stopPropagation();
           revealDeleteModal();

packages/fxa-settings/src/components/Settings/UnitRow/index.tsx

@@ -209,7 +209,7 @@ export const UnitRow = ({
             secondaryCtaRoute ||
             revealSecondaryModal) && (
             <div className="unit-row-actions @mobileLandscape/unitRow:flex-1 @mobileLandscape/unitRow:flex @mobileLandscape/unitRow:justify-end ">
-              <div className="flex items-center h-8 gap-2 mt-2 @mobileLandscape/unitRow:mt-0 ">
+              <div className="flex items-center h-8 gap-2 mt-4 @mobileLandscape/unitRow:mt-0 ">
                 {/* Primary Action */}
                 {!hideCtaText &&
                   ctaText &&