@byline/admin 6.7.2 → 6.9.0

package/src/modules/auth/auth-maintenance.ts

@@ -0,0 +1,62 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import type { RecurringTaskDefinition } from '@byline/core'
+
+import type { AdminStore } from '../../store.js'
+
+const DAY = 86_400_000
+
+/** Register for native sessions even on password-only sites; configuration never runs cleanup. */
+export function createAuthMaintenanceTasks(
+  store: AdminStore,
+  now: () => Date = () => new Date()
+): RecurringTaskDefinition[] {
+  const task = (
+    name: string,
+    retention: number,
+    batch: (cutoff: Date) => Promise<boolean>
+  ): RecurringTaskDefinition => ({
+    name: `auth.maintenance.${name}`,
+    intervalMs: 60_000,
+    leaseMs: 60_000,
+    async run(context) {
+      const started = performance.now()
+      const cutoff = new Date(now().getTime() - retention)
+      for (let n = 0; n < 32 && performance.now() - started < 30_000; n++) {
+        context.signal.throwIfAborted()
+        await context.heartbeat()
+        context.signal.throwIfAborted()
+        if (!(await batch(cutoff))) return { workRemaining: false }
+      }
+      return { workRemaining: true }
+    },
+  })
+  return [
+    task(
+      'attempts',
+      300_000,
+      async (cutoff) => (await store.authMaintenance.purgeAttempts(cutoff)) === 100
+    ),
+    task('logins', 30 * DAY, async (cutoff) => {
+      const candidate = await store.authMaintenance.findTerminalLogin(cutoff)
+      if (!candidate) return false
+      await store.withSessionLock(candidate.adminUserId, async (scoped) => {
+        await scoped.authMaintenance.pruneTerminalLogin({ ...candidate, before: cutoff })
+      })
+      // A candidate is not a cursor. Re-scan after each bounded transaction so
+      // a login with many refresh predecessors drains without a long-held lock.
+      return true
+    }),
+    task(
+      'legacy-refresh',
+      30 * DAY,
+      async (cutoff) => (await store.authMaintenance.purgeLegacyRefreshTokens(cutoff)) === 100
+    ),
+  ]
+}

package/src/modules/auth/components/passkey-browser.test.node.ts

@@ -0,0 +1,188 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type {
+  PasskeyAdminServices,
+  PasskeyPageBinding,
+} from '../../../services/admin-services-types.js'
+
+const browser = vi.hoisted(() => ({
+  supported: vi.fn(),
+  authentication: vi.fn(),
+  registration: vi.fn(),
+}))
+vi.mock('@simplewebauthn/browser', () => ({
+  browserSupportsWebAuthn: browser.supported,
+  startAuthentication: browser.authentication,
+  startRegistration: browser.registration,
+}))
+
+import {
+  enrollPasskey,
+  passkeyErrorKey,
+  provePasskeyAction,
+  signInWithPasskey,
+} from './passkey-browser.js'
+
+let services: PasskeyAdminServices
+let binding: PasskeyPageBinding
+const expiresAt = () => new Date(Date.now() + 60_000).toISOString()
+beforeEach(() => {
+  vi.resetAllMocks()
+  browser.supported.mockReturnValue(true)
+  browser.authentication.mockResolvedValue({ id: 'assertion' })
+  browser.registration.mockResolvedValue({ id: 'attestation' })
+  binding = { expectedSessionId: 'login-A', assertCurrent: vi.fn() }
+  const ceremony = () => ({ ceremonyId: 'attempt', expiresAt: expiresAt(), options: {} })
+  const grant = () => ({ grantId: 'grant', expiresAt: expiresAt() })
+  services = {
+    capability: vi.fn(),
+    captureLogin: vi.fn(() => binding),
+    managementContext: vi.fn(),
+    signInOptions: vi.fn(async () => ceremony()),
+    signIn: vi.fn(),
+    passwordProof: vi.fn(async () => grant()),
+    proofOptions: vi.fn(async () => ceremony()),
+    proof: vi.fn(async () => grant()),
+    enrollmentOptions: vi.fn(async () => ceremony()),
+    enrollment: vi.fn(),
+    list: vi.fn(),
+    rename: vi.fn(),
+    remove: vi.fn(),
+  } as unknown as PasskeyAdminServices
+})
+describe('browser passkey ceremonies', () => {
+  it('does not enter the cookie-changing submission until the prompt finishes', async () => {
+    let finish!: (value: unknown) => void
+    browser.authentication.mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          finish = resolve
+        })
+    )
+    const pending = signInWithPasskey(services)
+    await vi.waitFor(() => expect(browser.authentication).toHaveBeenCalledOnce())
+    expect(services.signIn).not.toHaveBeenCalled()
+    finish({ id: 'verified' })
+    await pending
+    expect(services.signIn).toHaveBeenCalledWith(
+      { data: { ceremonyId: 'attempt', response: { id: 'verified' } } },
+      expect.objectContaining({ expectedSessionId: 'login-A' })
+    )
+  })
+  it.each(['AbortError', 'NotAllowedError'])(
+    'cancellation %s does not submit or retry',
+    async (name) => {
+      browser.authentication.mockRejectedValue(Object.assign(new Error('cancelled'), { name }))
+      await expect(signInWithPasskey(services)).rejects.toThrow('cancelled')
+      expect(services.signInOptions).toHaveBeenCalledOnce()
+      expect(services.signIn).not.toHaveBeenCalled()
+    }
+  )
+  it('rejects a login switch during the authenticator prompt', async () => {
+    browser.authentication.mockImplementation(async () => {
+      vi.mocked(binding.assertCurrent).mockImplementation(() => {
+        throw new Error('session changed')
+      })
+      return { id: 'other-account' }
+    })
+    await expect(signInWithPasskey(services)).rejects.toThrow('session changed')
+    expect(services.signIn).not.toHaveBeenCalled()
+  })
+  it('abandons a completed prompt when the sign-in page has unmounted', async () => {
+    let active = true
+    browser.authentication.mockImplementation(async () => {
+      active = false
+      return {}
+    })
+    await expect(signInWithPasskey(services, () => active)).rejects.toThrow('page closed')
+    expect(services.signIn).not.toHaveBeenCalled()
+  })
+  it('does not open a device prompt for an expired challenge', async () => {
+    vi.mocked(services.signInOptions).mockResolvedValue({
+      ceremonyId: 'expired',
+      expiresAt: new Date(0).toISOString(),
+      options: {} as any,
+    })
+    await expect(signInWithPasskey(services)).rejects.toMatchObject({ code: 'ERR_INVALID_TOKEN' })
+    expect(browser.authentication).not.toHaveBeenCalled()
+  })
+  it('binds password proof and enrollment to the page login, without email input', async () => {
+    await enrollPasskey(services, binding, 'Laptop', 'password')
+    expect(services.passwordProof).toHaveBeenCalledWith({
+      data: { expectedSessionId: 'login-A', action: { purpose: 'enroll' }, password: 'password' },
+    })
+    expect(services.enrollmentOptions).toHaveBeenCalledWith({
+      data: { expectedSessionId: 'login-A', grantId: 'grant' },
+    })
+    expect(services.enrollment).toHaveBeenCalledWith({
+      data: {
+        expectedSessionId: 'login-A',
+        ceremonyId: 'attempt',
+        response: { id: 'attestation' },
+        name: 'Laptop',
+      },
+    })
+  })
+  it('does not enroll after a login change during registration', async () => {
+    browser.registration.mockImplementation(async () => {
+      vi.mocked(binding.assertCurrent).mockImplementation(() => {
+        throw new Error('session changed')
+      })
+      return { id: 'attestation' }
+    })
+    await expect(enrollPasskey(services, binding, 'Laptop', 'password')).rejects.toThrow(
+      'session changed'
+    )
+    expect(services.enrollment).not.toHaveBeenCalled()
+  })
+  it('passes a scoped removal action and never accepts a wrong-account proof', async () => {
+    const action = {
+      purpose: 'remove' as const,
+      targetUserId: 'target',
+      credentialRecordId: 'record',
+    }
+    vi.mocked(services.proof).mockRejectedValue(
+      Object.assign(new Error('wrong account'), { code: 'ERR_INVALID_CREDENTIALS' })
+    )
+    await expect(provePasskeyAction(services, binding, action)).rejects.toThrow('wrong account')
+    expect(services.proofOptions).toHaveBeenCalledWith({
+      data: { expectedSessionId: 'login-A', action },
+    })
+    expect(services.remove).not.toHaveBeenCalled()
+    expect(services.proof).toHaveBeenCalledOnce()
+  })
+  it('does not retry ambiguous enrollment completion', async () => {
+    vi.mocked(services.enrollment).mockRejectedValue(new Error('connection lost'))
+    await expect(enrollPasskey(services, binding, 'Laptop', 'password')).rejects.toThrow(
+      'connection lost'
+    )
+    expect(services.enrollment).toHaveBeenCalledOnce()
+    expect(services.enrollmentOptions).toHaveBeenCalledOnce()
+  })
+  it('keeps password proof available without WebAuthn support', async () => {
+    browser.supported.mockReturnValue(false)
+    await expect(
+      provePasskeyAction(
+        services,
+        binding,
+        { purpose: 'remove', targetUserId: 'target', credentialRecordId: 'key' },
+        'password'
+      )
+    ).resolves.toMatchObject({ grantId: 'grant' })
+    await expect(signInWithPasskey(services)).rejects.toMatchObject({ code: 'PASSKEY_UNSUPPORTED' })
+  })
+  it.each([
+    [{ code: 'ERR_INVALID_TOKEN' }, 'expired'],
+    [{ code: 'ERR_SESSION_CHANGED' }, 'sessionChanged'],
+    [{ code: 'ERR_INVALID_CREDENTIALS' }, 'proof'],
+    [{ code: 'ERROR_AUTHENTICATOR_MISSING_DISCOVERABLE_CREDENTIAL_SUPPORT' }, 'unsupported'],
+    [{ code: 'ERROR_AUTHENTICATOR_GENERAL_ERROR' }, 'device'],
+    [
+      { code: 'ERROR_PASSTHROUGH_SEE_CAUSE_PROPERTY', cause: { name: 'NotAllowedError' } },
+      'cancelled',
+    ],
+    [{ status: 429 }, 'rateLimited'],
+  ])('maps bounded public error %j to usable copy', (error, key) => {
+    expect(passkeyErrorKey(error)).toBe(`passkeys.errors.${key}`)
+  })
+})

package/src/modules/auth/components/passkey-browser.ts

@@ -0,0 +1,139 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import type { PasskeyManagementAction } from '@byline/auth'
+import {
+  browserSupportsWebAuthn,
+  type PublicKeyCredentialCreationOptionsJSON,
+  type PublicKeyCredentialRequestOptionsJSON,
+  startAuthentication,
+  startRegistration,
+} from '@simplewebauthn/browser'
+
+import type {
+  PasskeyAdminServices,
+  PasskeyPageBinding,
+} from '../../../services/admin-services-types.js'
+
+function ready(binding: PasskeyPageBinding, expiresAt?: string) {
+  binding.assertCurrent()
+  if (expiresAt && Date.parse(expiresAt) <= Date.now())
+    throw Object.assign(new Error('Expired ceremony'), { code: 'ERR_INVALID_TOKEN' })
+}
+function supported() {
+  if (!browserSupportsWebAuthn())
+    throw Object.assign(new Error('WebAuthn unavailable'), { code: 'PASSKEY_UNSUPPORTED' })
+}
+export async function signInWithPasskey(
+  services: PasskeyAdminServices,
+  isActive: () => boolean = () => true
+) {
+  supported()
+  const captured = services.captureLogin(true)
+  const binding = {
+    ...captured,
+    assertCurrent: () => {
+      if (!isActive()) throw new Error('Sign-in page closed')
+      captured.assertCurrent()
+    },
+  }
+  const ceremony = await services.signInOptions({ data: {} })
+  ready(binding, ceremony.expiresAt)
+  const response = await startAuthentication({
+    optionsJSON: ceremony.options as PublicKeyCredentialRequestOptionsJSON,
+  })
+  ready(binding, ceremony.expiresAt)
+  return services.signIn({ data: { ceremonyId: ceremony.ceremonyId, response } }, binding)
+}
+
+export async function provePasskeyAction(
+  services: PasskeyAdminServices,
+  binding: PasskeyPageBinding,
+  action: PasskeyManagementAction,
+  password?: string
+) {
+  ready(binding)
+  const expectedSessionId = binding.expectedSessionId
+  if (!expectedSessionId)
+    throw Object.assign(new Error('Login changed'), { code: 'ERR_SESSION_CHANGED' })
+  if (password !== undefined) {
+    const grant = await services.passwordProof({ data: { expectedSessionId, action, password } })
+    ready(binding, grant.expiresAt)
+    return grant
+  }
+  supported()
+  const ceremony = await services.proofOptions({ data: { expectedSessionId, action } })
+  ready(binding, ceremony.expiresAt)
+  const response = await startAuthentication({
+    optionsJSON: ceremony.options as PublicKeyCredentialRequestOptionsJSON,
+  })
+  ready(binding, ceremony.expiresAt)
+  const grant = await services.proof({
+    data: { expectedSessionId, ceremonyId: ceremony.ceremonyId, response },
+  })
+  ready(binding, grant.expiresAt)
+  return grant
+}
+
+export async function enrollPasskey(
+  services: PasskeyAdminServices,
+  binding: PasskeyPageBinding,
+  name: string,
+  password?: string
+) {
+  supported()
+  const grant = await provePasskeyAction(services, binding, { purpose: 'enroll' }, password)
+  const expectedSessionId = binding.expectedSessionId!
+  const ceremony = await services.enrollmentOptions({
+    data: { expectedSessionId, grantId: grant.grantId },
+  })
+  ready(binding, ceremony.expiresAt)
+  const response = await startRegistration({
+    optionsJSON: ceremony.options as PublicKeyCredentialCreationOptionsJSON,
+  })
+  ready(binding, ceremony.expiresAt)
+  return services.enrollment({
+    data: { expectedSessionId, ceremonyId: ceremony.ceremonyId, response, name },
+  })
+}
+
+/** Render fixed translated messages, never provider payloads or authenticator identifiers. */
+export function passkeyErrorKey(error: unknown): string {
+  const value = error as {
+    code?: string
+    name?: string
+    cause?: { name?: string }
+    status?: number
+  } | null
+  const name = value?.cause?.name ?? value?.name
+  if (
+    name === 'AbortError' ||
+    name === 'NotAllowedError' ||
+    value?.code === 'ERROR_CEREMONY_ABORTED'
+  )
+    return 'passkeys.errors.cancelled'
+  if (
+    name === 'ConstraintError' ||
+    name === 'NotSupportedError' ||
+    value?.code === 'PASSKEY_UNSUPPORTED' ||
+    value?.code?.startsWith('ERROR_AUTHENTICATOR_MISSING_') ||
+    value?.code === 'ERROR_AUTHENTICATOR_NO_SUPPORTED_PUBKEYCREDPARAMS_ALG'
+  )
+    return 'passkeys.errors.unsupported'
+  if (name === 'UnknownError' || value?.code === 'ERROR_AUTHENTICATOR_GENERAL_ERROR')
+    return 'passkeys.errors.device'
+  if (value?.code === 'ERROR_AUTHENTICATOR_PREVIOUSLY_REGISTERED')
+    return 'passkeys.errors.duplicate'
+  if (value?.code === 'ERR_INVALID_TOKEN') return 'passkeys.errors.expired'
+  if (value?.code === 'ERR_SESSION_CHANGED') return 'passkeys.errors.sessionChanged'
+  if (value?.code === 'ERR_PASSKEY_LIMIT') return 'passkeys.errors.limit'
+  if (value?.code === 'ERR_FORBIDDEN') return 'passkeys.errors.forbidden'
+  if (value?.code === 'ERR_INVALID_CREDENTIALS') return 'passkeys.errors.proof'
+  if (value?.status === 429) return 'passkeys.errors.rateLimited'
+  return 'passkeys.errors.unavailable'
+}

package/src/modules/auth/components/passkey-manager.module.css

@@ -0,0 +1,100 @@
+.manager {
+  padding: 1.25rem;
+  border: 1px solid var(--border-color, #8885);
+  border-radius: 0.5rem;
+}
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 1rem 0;
+}
+.empty + .add {
+  margin-top: 0.25rem;
+}
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid var(--border-color, #8885);
+  overflow-wrap: anywhere;
+}
+.row p {
+  font-size: 0.875rem;
+  margin: 0.25rem 0;
+}
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+/*
+ * Add and rename open in a drawer, matching the other account and user edit
+ * panels; remove opens a modal, matching other destructive confirmations.
+ * Both share the action row below: below 40rem the actions stack full-width
+ * (touch-sized), with the primary action on top and Cancel last. From 40rem
+ * the small action buttons sit in one right-aligned row, which fits every
+ * bundled locale. The modal is capped at 540px, and the drawer is 540px from
+ * 48rem (40px wider than the account drawers) so the three proof actions fit
+ * one row in French.
+ */
+.modal {
+  width: calc(100% - 2 * var(--spacing-8));
+  max-width: 540px;
+  margin-bottom: var(--spacing-8);
+}
+.drawer-body {
+  padding: var(--spacing-8);
+}
+.drawer-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  padding-top: var(--spacing-8);
+}
+.drawer-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-12);
+  margin-top: var(--spacing-8);
+}
+.drawer-skip {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.modal-actions {
+  flex-direction: column-reverse;
+  align-items: stretch;
+}
+@media (max-width: 39.99rem) {
+  .modal-actions > * {
+    min-height: 2.5rem;
+  }
+}
+@media (min-width: 40rem) {
+  .modal {
+    width: 100%;
+    margin-bottom: 0;
+  }
+  .modal-actions {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--spacing-8);
+  }
+}
+@media (min-width: 48rem) {
+  .drawer {
+    width: 540px;
+  }
+}

package/src/modules/auth/components/passkey-manager.test.tsx

@@ -0,0 +1,189 @@
+import { act, type ReactNode } from 'react'
+
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mocks = vi.hoisted(() => ({ services: {} as any, proof: vi.fn(), enroll: vi.fn() }))
+vi.mock('../../../services/admin-services-context.js', () => ({
+  useBylineAdminServices: () => ({ passkeys: mocks.services }),
+}))
+vi.mock('@byline/i18n/react', () => ({
+  useTranslation: () => ({
+    t: (key: string, values?: { name?: string }) =>
+      `${key}${values?.name ? ` ${values.name}` : ''}`,
+  }),
+}))
+vi.mock('@byline/core', () => ({ getAdminConfig: () => ({ routes: { signIn: '/sign-in' } }) }))
+vi.mock('./passkey-browser.js', () => ({
+  provePasskeyAction: mocks.proof,
+  enrollPasskey: mocks.enroll,
+  passkeyErrorKey: () => 'passkeys.errors.proof',
+}))
+vi.mock('@byline/ui/react', () => {
+  const Box = ({ children }: { children: ReactNode }) => <div>{children}</div>
+  const Modal = Object.assign(
+    ({ children, isOpen }: { children: ReactNode; isOpen: boolean }) =>
+      isOpen ? <div role="dialog">{children}</div> : null,
+    { Container: Box, Header: Box, Content: Box, Actions: Box }
+  )
+  const Drawer = Object.assign(
+    ({ children, isOpen }: { children: ReactNode; isOpen: boolean }) =>
+      isOpen ? <div role="dialog">{children}</div> : null,
+    { Container: Box, TopActions: Box, Header: Box, Content: Box }
+  )
+  return {
+    Modal,
+    Drawer,
+    CloseIcon: () => null,
+    IconButton: ({ children, onClick, ...rest }: any) => (
+      <button type="button" onClick={onClick} aria-label={rest['aria-label']}>
+        {children}
+      </button>
+    ),
+    Alert: ({ children }: { children: ReactNode }) => <div role="alert">{children}</div>,
+    Button: ({ children, onClick, disabled, ...rest }: any) => (
+      <button type="button" disabled={disabled} onClick={onClick} aria-label={rest['aria-label']}>
+        {children}
+      </button>
+    ),
+    Input: ({ label, ...rest }: any) => <input aria-label={label} {...rest} />,
+    InputPassword: ({
+      label,
+      showPasswordLabel: _show,
+      hidePasswordLabel: _hide,
+      ...rest
+    }: any) => <input type="password" aria-label={label} {...rest} />,
+  }
+})
+
+import { PasskeyManager } from './passkey-manager.js'
+
+let root: Root
+let container: HTMLDivElement
+const key = {
+  id: 'record',
+  name: 'Security key',
+  createdAt: new Date(0).toISOString(),
+  lastUsedAt: null,
+}
+beforeEach(() => {
+  vi.resetAllMocks()
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  mocks.services = {
+    capability: vi.fn().mockResolvedValue({ enabled: true }),
+    captureLogin: vi.fn(() => ({ expectedSessionId: 'login', assertCurrent: vi.fn() })),
+    managementContext: vi
+      .fn()
+      .mockResolvedValue({ id: 'self', isSuperAdmin: false, canManagePasskeys: false }),
+    list: vi.fn().mockResolvedValue([key]),
+    rename: vi.fn(),
+    remove: vi.fn(),
+  }
+  mocks.proof.mockResolvedValue({
+    grantId: 'grant',
+    expiresAt: new Date(Date.now() + 60_000).toISOString(),
+  })
+  mocks.services.remove.mockResolvedValue({ signedOut: false })
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+afterEach(async () => {
+  await act(async () => root.unmount())
+  container.remove()
+  vi.unstubAllGlobals()
+})
+const render = async (targetUserId = 'self', targetIsSuperAdmin = false) => {
+  await act(async () =>
+    root.render(
+      <PasskeyManager targetUserId={targetUserId} targetIsSuperAdmin={targetIsSuperAdmin} />
+    )
+  )
+}
+const click = async (label: string) => {
+  const button = [...container.querySelectorAll('button')].find(
+    (button) => button.textContent === label
+  )
+  expect(button).toBeTruthy()
+  await act(async () => button!.click())
+}
+describe('passkey manager controls', () => {
+  it('hides the flow when passkeys are disabled', async () => {
+    mocks.services.capability.mockResolvedValue({ enabled: false })
+    await render()
+    expect(container.innerHTML).toBe('')
+    expect(mocks.services.list).not.toHaveBeenCalled()
+  })
+  it('allows self-service enrollment and rename', async () => {
+    await render()
+    expect(container.textContent).toContain('passkeys.add')
+    expect(container.textContent).toContain('passkeys.rename')
+    expect(container.textContent).toContain('Security key')
+  })
+  it('keeps the admin view for the signed-in user when an admin screen passes a notice', async () => {
+    await act(async () =>
+      root.render(
+        <PasskeyManager targetUserId="self" ownAccountNotice={<p>own-account-notice</p>} />
+      )
+    )
+    expect(container.textContent).toContain('own-account-notice')
+    expect(container.textContent).toContain('Security key')
+    expect(container.textContent).toContain('passkeys.remove')
+    expect(container.textContent).not.toContain('passkeys.add')
+    expect(container.textContent).not.toContain('passkeys.rename')
+    expect(container.textContent).not.toContain('passkeys.description')
+  })
+  it('hides recovery without the ability and protects super-admin targets', async () => {
+    await render('other')
+    expect(container.innerHTML).toBe('')
+    expect(mocks.services.list).not.toHaveBeenCalled()
+    mocks.services.managementContext.mockResolvedValue({
+      id: 'self',
+      isSuperAdmin: false,
+      canManagePasskeys: true,
+    })
+    await render('super', true)
+    expect(container.innerHTML).toBe('')
+  })
+  it('offers only removal for an authorized recovery target', async () => {
+    mocks.services.managementContext.mockResolvedValue({
+      id: 'self',
+      isSuperAdmin: false,
+      canManagePasskeys: true,
+    })
+    await render('other')
+    expect(container.textContent).toContain('passkeys.remove')
+    expect(container.textContent).not.toContain('passkeys.add')
+    expect(container.textContent).not.toContain('passkeys.rename')
+  })
+  it('requires explicit confirmation before requesting proof and allows cancellation', async () => {
+    await render()
+    await click('passkeys.remove')
+    expect(container.querySelector('[role="dialog"]')?.textContent).toContain(
+      'passkeys.removeWarning Security key'
+    )
+    expect(mocks.proof).not.toHaveBeenCalled()
+    await click('common.actions.cancel')
+    expect(container.querySelector('[role="dialog"]')).toBeNull()
+    expect(mocks.services.remove).not.toHaveBeenCalled()
+  })
+  it('never removes a key after a failed or wrong-account fresh proof', async () => {
+    mocks.proof.mockRejectedValue(new Error('wrong account'))
+    await render()
+    await click('passkeys.remove')
+    await click('passkeys.usePasskey')
+    expect(container.querySelector('[role="alert"]')?.textContent).toBe('passkeys.errors.proof')
+    expect(mocks.services.remove).not.toHaveBeenCalled()
+    expect(mocks.proof).toHaveBeenCalledOnce()
+  })
+  it('shows completion only after confirmed removal and retains the actor view', async () => {
+    await render()
+    await click('passkeys.remove')
+    await click('passkeys.usePasskey')
+    expect(mocks.services.remove).toHaveBeenCalledWith({
+      data: { expectedSessionId: 'login', grantId: 'grant' },
+    })
+    expect(container.querySelector('[role="status"]')?.textContent).toBe('passkeys.removed')
+    expect(container.textContent).not.toContain('Security key')
+  })
+})