@byline/admin 6.7.2 → 6.9.0

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

package/src/modules/auth/components/sign-in-form.test.tsx

@@ -0,0 +1,92 @@
+import { act, type ReactNode } from 'react'
+
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, expect, it, vi } from 'vitest'
+
+const mocks = vi.hoisted(() => ({
+  enabled: true,
+  signIn: vi.fn(),
+  passkey: vi.fn(),
+  services: {} as any,
+}))
+vi.mock('../../../services/admin-services-context.js', () => ({
+  useBylineAdminServices: () => mocks.services,
+}))
+vi.mock('@byline/i18n/react', () => ({ useTranslation: () => ({ t: (key: string) => key }) }))
+vi.mock('@byline/core', () => ({ getAdminConfig: () => ({ routes: { admin: '/admin' } }) }))
+vi.mock('./passkey-browser.js', () => ({
+  signInWithPasskey: mocks.passkey,
+  passkeyErrorKey: () => 'passkeys.errors.cancelled',
+}))
+vi.mock('@byline/ui/react', () => {
+  const Box = ({ children }: { children: ReactNode }) => <div>{children}</div>
+  return {
+    Card: Object.assign(Box, {
+      Header: Box,
+      Title: Box,
+      Description: Box,
+      Content: Box,
+      Footer: Box,
+    }),
+    Alert: ({ children }: { children: ReactNode }) => <div role="alert">{children}</div>,
+    Button: ({ children, disabled, onClick, type }: any) => (
+      <button type={type} disabled={disabled} onClick={onClick}>
+        {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} />,
+    LoaderEllipsis: () => null,
+    PasskeyIcon: () => null,
+  }
+})
+
+import { SignInForm } from './sign-in-form.js'
+
+let root: Root
+let container: HTMLDivElement
+beforeEach(() => {
+  vi.resetAllMocks()
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  mocks.services = {
+    adminSignIn: mocks.signIn,
+    passkeys: { capability: async () => ({ enabled: mocks.enabled }) },
+  }
+  mocks.enabled = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+afterEach(async () => {
+  await act(async () => root.unmount())
+  container.remove()
+  vi.unstubAllGlobals()
+})
+it('retains password sign-in when passkeys are disabled or the host has no passkey services', async () => {
+  mocks.enabled = false
+  await act(async () => root.render(<SignInForm />))
+  expect(container.querySelector('input[type="password"]')).not.toBeNull()
+  expect(container.textContent).not.toContain('passkeys.signIn')
+  delete mocks.services.passkeys
+  await act(async () => root.render(<SignInForm />))
+  expect(container.querySelector('form')).not.toBeNull()
+})
+it('keeps password choice visible and restores controls after passkey cancellation', async () => {
+  mocks.passkey.mockRejectedValue(new Error('cancelled'))
+  await act(async () => root.render(<SignInForm />))
+  const button = [...container.querySelectorAll('button')].find(
+    (button) => button.textContent === 'passkeys.signIn'
+  )!
+  expect(button).toBeTruthy()
+  expect(container.querySelector('input[type="password"]')).not.toBeNull()
+  await act(async () => button.click())
+  expect(container.querySelector('[role="alert"]')?.textContent).toBe('passkeys.errors.cancelled')
+  expect(button.disabled).toBe(false)
+  expect(mocks.passkey).toHaveBeenCalledOnce()
+  expect(mocks.signIn).not.toHaveBeenCalled()
+})

package/src/modules/auth/components/sign-in-form.tsx

@@ -20,18 +20,28 @@
  * Stable override handles: `.byline-sign-in-card`, `.byline-sign-in-alert`,
  * `.byline-sign-in-form`, `.byline-sign-in-fields`,
  * `.byline-sign-in-actions`, `.byline-sign-in-button`,
- * `.byline-sign-in-home-link`.
+ * `.byline-sign-in-home-link`, `.byline-sign-in-alternate`,
+ * `.byline-sign-in-divider`, `.byline-passkey-sign-in-button`.
  */
 
-import { type FormEvent, useState } from 'react'
+import { type FormEvent, useEffect, useRef, useState } from 'react'
 
 import { getAdminConfig } from '@byline/core'
 import { useTranslation } from '@byline/i18n/react'
-import { Alert, Button, Card, Input, InputPassword, LoaderEllipsis } from '@byline/ui/react'
+import {
+  Alert,
+  Button,
+  Card,
+  Input,
+  InputPassword,
+  LoaderEllipsis,
+  PasskeyIcon,
+} from '@byline/ui/react'
 import cx from 'clsx'
 
 import { useBylineAdminServices } from '../../../services/admin-services-context.js'
 import { normalizeRootRelativeRedirect, resolveSignInFormRedirect } from '../safe-redirect.js'
+import { passkeyErrorKey, signInWithPasskey } from './passkey-browser.js'
 import styles from './sign-in-form.module.css'
 
 export interface SignInFormProps {
@@ -46,13 +56,47 @@ export interface SignInFormProps {
 }
 
 export function SignInForm({ redirectTo, homeUrl }: SignInFormProps) {
-  const { adminSignIn } = useBylineAdminServices()
+  const { adminSignIn, passkeys } = useBylineAdminServices()
   const { t } = useTranslation('byline-admin')
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [pending, setPending] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
+  const mounted = useRef(false)
+  const [passkeysEnabled, setPasskeysEnabled] = useState(false)
+  useEffect(() => {
+    let active = true
+    mounted.current = true
+    void passkeys
+      ?.capability()
+      .then(({ enabled }) => {
+        if (active) setPasskeysEnabled(enabled)
+      })
+      .catch(() => {})
+    return () => {
+      active = false
+      mounted.current = false
+    }
+  }, [passkeys])
+
+  async function handlePasskey() {
+    if (!passkeys || pending) return
+    setPending(true)
+    setError(null)
+    try {
+      await signInWithPasskey(passkeys, () => mounted.current)
+    } catch (error) {
+      if (mounted.current) {
+        setError(t(passkeyErrorKey(error)))
+        setPending(false)
+      }
+      return
+    }
+    const destination = resolveSignInFormRedirect(redirectTo, getAdminConfig().routes.admin)
+    window.location.assign(normalizeRootRelativeRedirect(destination) ?? '/')
+  }
+
   async function handleSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault()
     if (pending) return
@@ -144,6 +188,23 @@ export function SignInForm({ redirectTo, homeUrl }: SignInFormProps) {
           </div>
         </form>
       </Card.Content>
+      {passkeysEnabled && (
+        <Card.Footer className={cx('byline-sign-in-alternate', styles.alternate)}>
+          <div className={cx('byline-sign-in-divider', styles.divider)}>
+            <span>{t('auth.signIn.alternate')}</span>
+          </div>
+          <Button
+            type="button"
+            variant="outlined"
+            disabled={pending}
+            onClick={handlePasskey}
+            className={cx('byline-passkey-sign-in-button', styles['passkey-button'])}
+          >
+            <PasskeyIcon width="20px" height="20px" />
+            <span>{t('passkeys.signIn')}</span>
+          </Button>
+        </Card.Footer>
+      )}
     </Card>
   )
 }

package/src/modules/auth/index.ts

@@ -21,11 +21,19 @@
  * against `@byline/auth` rather than added here.
  */
 
+export { createAuthMaintenanceTasks } from './auth-maintenance.js'
 export {
   JwtSessionProvider,
   type JwtSessionProviderConfig,
   type NativeSessionEvent,
 } from './jwt-session-provider.js'
+export { createPasskeyRequestLimiter } from './passkey-rate-limiter.js'
+export {
+  assertPasskeyAttempt,
+  assertPasskeyBytes,
+  assertPasskeyClaim,
+  assertPasskeyTokenHash,
+} from './passkey-storage-validation.js'
 export { hashPassword, verifyPassword } from './password.js'
 export { resolveActor } from './resolve-actor.js'
 export {
@@ -35,7 +43,14 @@ export {
   type SignInRateLimitStore,
   type SignInSecurityEvent,
 } from './sign-in-rate-limiter.js'
+export type { AuthMaintenanceRepository } from './auth-maintenance-repository.js'
 export type { LoginSessionRow, LoginSessionsRepository } from './login-sessions-repository.js'
+export type {
+  PasskeyAttemptRow,
+  PasskeyClaimInput,
+  PasskeyCredentialRow,
+  PasskeysRepository,
+} from './passkeys-repository.js'
 export type {
   IssueRefreshTokenInput,
   RefreshTokenRow,