@byline/admin 6.7.2 → 6.8.0

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')
+  })
+})

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

@@ -0,0 +1,386 @@
+'use client'
+
+/**
+ * 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 React from 'react'
+import { useEffect, useId, useRef, useState } from 'react'
+
+import type { PasskeyCredentialSummary } from '@byline/auth'
+import { getAdminConfig } from '@byline/core'
+import { useTranslation } from '@byline/i18n/react'
+import {
+  Alert,
+  Button,
+  CloseIcon,
+  Drawer,
+  IconButton,
+  Input,
+  InputPassword,
+  Modal,
+} from '@byline/ui/react'
+
+import {
+  type PasskeyPageBinding,
+  useBylineAdminServices,
+} from '../../../services/admin-services-context.js'
+import { enrollPasskey, passkeyErrorKey, provePasskeyAction } from './passkey-browser.js'
+import styles from './passkey-manager.module.css'
+
+type Edit = { kind: 'enroll' } | { kind: 'rename' | 'remove'; credential: PasskeyCredentialSummary }
+
+/** A host page's card component, so the passkey panel matches the cards around it. */
+type PasskeySectionComponent = React.ComponentType<{
+  title: string
+  children: React.ReactNode
+}>
+
+export function PasskeyManager({
+  targetUserId,
+  targetIsSuperAdmin = false,
+  section: Section,
+  ownAccountNotice,
+}: {
+  targetUserId: string
+  targetIsSuperAdmin?: boolean
+  /** Renders the panel inside the page's own card; defaults to a standalone card. */
+  section?: PasskeySectionComponent
+  /**
+   * Admin screens pass this to keep the admin (recovery) view even when the
+   * target is the signed-in user; it replaces the description in that case,
+   * typically pointing the user to their own account page.
+   */
+  ownAccountNotice?: React.ReactNode
+}) {
+  const { passkeys } = useBylineAdminServices()
+  const { t } = useTranslation('byline-admin')
+  const id = useId()
+  const binding = useRef<PasskeyPageBinding | null>(null)
+  const [enabled, setEnabled] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const [allowed, setAllowed] = useState(false)
+  const [self, setSelf] = useState(false)
+  const [credentials, setCredentials] = useState<PasskeyCredentialSummary[]>([])
+  const [edit, setEdit] = useState<Edit | null>(null)
+  const [name, setName] = useState('')
+  const [password, setPassword] = useState('')
+  const [pending, setPending] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [notice, setNotice] = useState<string | null>(null)
+  const mounted = useRef(false)
+  useEffect(() => {
+    let active = true
+    mounted.current = true
+    setAllowed(false)
+    setEnabled(false)
+    setLoading(true)
+    setError(null)
+    if (passkeys)
+      void (async () => {
+        if (!(await passkeys.capability()).enabled || !active) return
+        setEnabled(true)
+        const captured = passkeys.captureLogin()
+        const page = {
+          ...captured,
+          assertCurrent: () => {
+            if (!active) throw new Error('Passkey page closed')
+            captured.assertCurrent()
+          },
+        }
+        binding.current = page
+        const actor = await passkeys.managementContext(page)
+        const isSelf = actor.id === targetUserId
+        if (!isSelf && (!actor.canManagePasskeys || (targetIsSuperAdmin && !actor.isSuperAdmin)))
+          return
+        page.assertCurrent()
+        setSelf(isSelf)
+        setAllowed(true)
+        const rows = await passkeys.list({
+          data: { expectedSessionId: page.expectedSessionId!, targetUserId },
+        })
+        page.assertCurrent()
+        setCredentials(rows)
+        setLoading(false)
+      })().catch((error) => {
+        if (active) setError(passkeyErrorKey(error))
+      })
+    return () => {
+      active = false
+      mounted.current = false
+      binding.current = null
+    }
+  }, [passkeys, targetUserId, targetIsSuperAdmin])
+
+  function open(value: Edit) {
+    setEdit(value)
+    setName(value.kind === 'rename' ? value.credential.name : '')
+    setPassword('')
+    setError(null)
+    setNotice(null)
+  }
+  function close() {
+    if (pending) return
+    setEdit(null)
+    setPassword('')
+    setError(null)
+  }
+  async function perform(usePassword: boolean) {
+    const page = binding.current
+    if (!passkeys || !edit || !page?.expectedSessionId || pending) return
+    setPending(true)
+    setError(null)
+    const suppliedPassword = usePassword ? password : undefined
+    setPassword('')
+    try {
+      page.assertCurrent()
+      const expectedSessionId = page.expectedSessionId
+      if (edit.kind === 'rename') {
+        const updated = await passkeys.rename({
+          data: { expectedSessionId, credentialRecordId: edit.credential.id, name: name.trim() },
+        })
+        page.assertCurrent()
+        setCredentials((rows) => rows.map((row) => (row.id === updated.id ? updated : row)))
+        setNotice('passkeys.renamed')
+      } else if (edit.kind === 'enroll') {
+        const created = await enrollPasskey(passkeys, page, name.trim(), suppliedPassword)
+        page.assertCurrent()
+        setCredentials((rows) => [...rows, created])
+        setNotice('passkeys.added')
+      } else {
+        const grant = await provePasskeyAction(
+          passkeys,
+          page,
+          { purpose: 'remove', targetUserId, credentialRecordId: edit.credential.id },
+          suppliedPassword
+        )
+        page.assertCurrent()
+        const result = await passkeys.remove({
+          data: { expectedSessionId, grantId: grant.grantId },
+        })
+        if (result.signedOut) {
+          window.location.assign(getAdminConfig().routes.signIn)
+          return
+        }
+        page.assertCurrent()
+        setCredentials((rows) => rows.filter((row) => row.id !== edit.credential.id))
+        setNotice('passkeys.removed')
+      }
+      setEdit(null)
+    } catch (error) {
+      if (mounted.current) setError(passkeyErrorKey(error))
+    } finally {
+      if (mounted.current) setPending(false)
+    }
+  }
+
+  if (!passkeys || !enabled) return null
+  if (!allowed) return error ? <Alert intent="danger">{t(error)}</Alert> : null
+  // Admin screens keep the recovery view for the signed-in user too.
+  const selfService = self && ownAccountNotice === undefined
+  const fields = (
+    <>
+      {error && <Alert intent="danger">{t(error)}</Alert>}
+      {edit?.kind === 'remove' ? (
+        <p>{t('passkeys.removeWarning', { name: edit.credential.name })}</p>
+      ) : (
+        <Input
+          id={`${id}-name`}
+          name="passkey-name"
+          label={t('passkeys.name')}
+          value={name}
+          maxLength={80}
+          disabled={pending}
+          onChange={(event) => setName(event.currentTarget.value)}
+        />
+      )}
+      {edit?.kind !== 'rename' && (
+        <>
+          <p>{t('passkeys.proofDescription')}</p>
+          <InputPassword
+            id={`${id}-password`}
+            name="passkey-password"
+            label={t('common.fields.password')}
+            autoComplete="current-password"
+            value={password}
+            disabled={pending}
+            onChange={(event) => setPassword(event.currentTarget.value)}
+            showPasswordLabel={t('common.actions.showPassword')}
+            hidePasswordLabel={t('common.actions.hidePassword')}
+          />
+        </>
+      )}
+      {pending && <p role="status">{t('passkeys.waiting')}</p>}
+    </>
+  )
+  const actions = (
+    <>
+      <Button type="button" size="sm" intent="noeffect" disabled={pending} onClick={close}>
+        {t('common.actions.cancel')}
+      </Button>
+      {edit?.kind === 'rename' ? (
+        <Button
+          type="button"
+          size="sm"
+          disabled={pending || !name.trim()}
+          onClick={() => void perform(false)}
+        >
+          {t('common.actions.save')}
+        </Button>
+      ) : (
+        <>
+          <Button
+            type="button"
+            size="sm"
+            disabled={pending || !password || (edit?.kind === 'enroll' && !name.trim())}
+            onClick={() => void perform(true)}
+          >
+            {t('passkeys.usePassword')}
+          </Button>
+          <Button
+            type="button"
+            size="sm"
+            disabled={pending || (edit?.kind === 'enroll' && !name.trim())}
+            onClick={() => void perform(false)}
+          >
+            {t('passkeys.usePasskey')}
+          </Button>
+        </>
+      )}
+    </>
+  )
+  const body = (
+    <>
+      {self && ownAccountNotice !== undefined ? (
+        ownAccountNotice
+      ) : (
+        <p>{t(selfService ? 'passkeys.description' : 'passkeys.recoveryDescription')}</p>
+      )}
+      {!edit && error && <Alert intent="danger">{t(error)}</Alert>}
+      {notice && <p role="status">{t(notice)}</p>}
+      {loading ? (
+        <p role="status">{t('common.loading')}</p>
+      ) : credentials.length === 0 ? (
+        <p className={styles.empty}>{t('passkeys.empty')}</p>
+      ) : (
+        <ul className={styles.list}>
+          {credentials.map((credential) => (
+            <li key={credential.id} className={styles.row}>
+              <div>
+                <strong>{credential.name}</strong>
+                <p>
+                  {t('passkeys.lastUsed')}:{' '}
+                  {credential.lastUsedAt
+                    ? new Date(credential.lastUsedAt).toLocaleString()
+                    : t('common.never')}
+                </p>
+              </div>
+              <div className={styles.actions}>
+                {selfService && (
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant="text"
+                    onClick={() => open({ kind: 'rename', credential })}
+                    aria-label={t('passkeys.renameNamed', { name: credential.name })}
+                  >
+                    {t('passkeys.rename')}
+                  </Button>
+                )}
+                <Button
+                  type="button"
+                  size="sm"
+                  intent="danger"
+                  variant="text"
+                  onClick={() => open({ kind: 'remove', credential })}
+                  aria-label={t('passkeys.removeNamed', { name: credential.name })}
+                >
+                  {t('passkeys.remove')}
+                </Button>
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+      {selfService && (
+        <Button
+          type="button"
+          size="sm"
+          disabled={loading}
+          onClick={() => open({ kind: 'enroll' })}
+          className={styles.add}
+        >
+          {t('passkeys.add')}
+        </Button>
+      )}
+      <Modal
+        isOpen={edit?.kind === 'remove'}
+        onDismiss={close}
+        closeOnOverlayClick={false}
+        ariaLabel={t('passkeys.remove')}
+      >
+        <Modal.Container className={`byline-passkey-modal ${styles.modal}`}>
+          <Modal.Header>
+            <h2>{t('passkeys.remove')}</h2>
+          </Modal.Header>
+          <Modal.Content>{fields}</Modal.Content>
+          <Modal.Actions className={`byline-passkey-modal-actions ${styles['modal-actions']}`}>
+            {actions}
+          </Modal.Actions>
+        </Modal.Container>
+      </Modal>
+      <Drawer
+        id={`${id}-passkey-drawer`}
+        closeOnOverlayClick={false}
+        width="medium"
+        topOffset="46px"
+        isOpen={edit !== null && edit.kind !== 'remove'}
+        onDismiss={close}
+        className={`byline-passkey-drawer ${styles.drawer}`}
+      >
+        <Drawer.Container
+          aria-hidden={edit === null || edit.kind === 'remove'}
+          className={`byline-passkey-drawer-body ${styles['drawer-body']}`}
+        >
+          <Drawer.TopActions>
+            <button type="button" tabIndex={0} className={styles['drawer-skip']}>
+              no action
+            </button>
+            <IconButton aria-label={t('common.actions.close')} size="sm" onClick={close}>
+              <CloseIcon width="14px" height="14px" svgClassName="white-icon stroke-white" />
+            </IconButton>
+          </Drawer.TopActions>
+          <Drawer.Header>
+            <h2>{t(edit?.kind === 'rename' ? 'passkeys.rename' : 'passkeys.add')}</h2>
+          </Drawer.Header>
+          <Drawer.Content>
+            <div className={`byline-passkey-drawer-form ${styles['drawer-form']}`}>
+              {fields}
+              <div
+                className={`byline-passkey-drawer-actions ${styles['drawer-actions']} ${styles['modal-actions']}`}
+              >
+                {actions}
+              </div>
+            </div>
+          </Drawer.Content>
+        </Drawer.Container>
+      </Drawer>
+    </>
+  )
+  if (Section)
+    return (
+      <Section title={t('passkeys.title')}>
+        <div className="byline-passkey-manager">{body}</div>
+      </Section>
+    )
+  return (
+    <section className={`byline-passkey-manager ${styles.manager}`} aria-labelledby={`${id}-title`}>
+      <h2 id={`${id}-title`}>{t('passkeys.title')}</h2>
+      {body}
+    </section>
+  )
+}

package/src/modules/auth/components/sign-in-form.module.css

@@ -9,6 +9,9 @@
  *   .byline-sign-in-actions   — action row (optional Home link + submit button)
  *   .byline-sign-in-home-link — left-side "Home" link (rendered when homeUrl is set)
  *   .byline-sign-in-button    — the submit button (min-width)
+ *   .byline-sign-in-alternate — footer holding alternate sign-in methods (passkeys)
+ *   .byline-sign-in-divider   — "Or continue with" rule above the alternate methods
+ *   .byline-passkey-sign-in-button — full-width passkey button
  */
 
 .card,
@@ -60,3 +63,37 @@
   /* Always floats right whether or not a Home link is present on the left. */
   margin-left: auto;
 }
+
+.alternate,
+:global(.byline-sign-in-alternate) {
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--spacing-16);
+  padding-bottom: var(--spacing-24);
+}
+
+.divider,
+:global(.byline-sign-in-divider) {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-12);
+  color: var(--gray-500);
+  font-size: var(--font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.divider::before,
+.divider::after,
+:global(.byline-sign-in-divider)::before,
+:global(.byline-sign-in-divider)::after {
+  content: "";
+  flex: 1;
+  border-top: var(--border-width-thin) var(--border-style-solid) var(--border-color, #8885);
+}
+
+.passkey-button,
+:global(.byline-passkey-sign-in-button) {
+  width: 100%;
+  gap: var(--spacing-8);
+}