@meith/web 0.16.0

package/src/components/auth/passkey-client.ts

@@ -0,0 +1,171 @@
+'use client'
+
+import { type Copy, fromCopy } from '../shell/copy-record'
+
+export interface PasskeyProblem {
+  readonly message: string
+}
+
+function base64UrlToBytes(value: string): Uint8Array<ArrayBuffer> {
+  const padded = value.replace(/-/g, '+').replace(/_/g, '/')
+  const binary = atob(padded.padEnd(Math.ceil(padded.length / 4) * 4, '='))
+  return Uint8Array.from(binary, (character) => character.charCodeAt(0))
+}
+
+function bytesToBase64Url(buffer: ArrayBuffer): string {
+  let binary = ''
+  for (const byte of new Uint8Array(buffer)) binary += String.fromCharCode(byte)
+  return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
+}
+
+export function passkeysAvailable(): boolean {
+  return (
+    typeof window !== 'undefined' &&
+    typeof window.PublicKeyCredential === 'function' &&
+    typeof navigator.credentials?.create === 'function'
+  )
+}
+
+async function readProblem(response: Response, copy: Copy): Promise<string> {
+  try {
+    const body = (await response.json()) as { error?: { message?: string } }
+    return body.error?.message ?? fromCopy(copy, 'authForm.passkey.failed')
+  } catch {
+    return fromCopy(copy, 'authForm.passkey.failed')
+  }
+}
+
+type Purpose = 'register' | 'authenticate' | 'second-factor' | 'credential-proof'
+
+async function options(purpose: Purpose, copy: Copy): Promise<Record<string, unknown>> {
+  const response = await fetch(`/auth/passkey/options?for=${purpose}`, {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: '{}',
+  })
+
+  if (!response.ok) throw new Error(await readProblem(response, copy))
+  return (await response.json()) as Record<string, unknown>
+}
+
+async function submit(
+  purpose: Purpose,
+  body: Record<string, unknown>,
+  copy: Copy,
+): Promise<Record<string, unknown>> {
+  const response = await fetch(`/auth/passkey/verify?for=${purpose}`, {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+
+  if (!response.ok) throw new Error(await readProblem(response, copy))
+  return (await response.json()) as Record<string, unknown>
+}
+
+export async function enrolPasskey(label: string, copy: Copy): Promise<void> {
+  const issued = await options('register', copy)
+
+  const credential = (await navigator.credentials.create({
+    publicKey: {
+      challenge: base64UrlToBytes(issued.challenge as string),
+      rp: issued.rp as PublicKeyCredentialRpEntity,
+      user: {
+        ...(issued.user as { name: string; displayName: string }),
+        id: base64UrlToBytes((issued.user as { id: string }).id),
+      },
+      pubKeyCredParams: issued.pubKeyCredParams as PublicKeyCredentialParameters[],
+      excludeCredentials: (issued.excludeCredentials as { id: string }[]).map((entry) => ({
+        type: 'public-key' as const,
+        id: base64UrlToBytes(entry.id),
+      })),
+      authenticatorSelection: issued.authenticatorSelection as AuthenticatorSelectionCriteria,
+      timeout: issued.timeout as number,
+      attestation: 'none',
+    },
+  })) as PublicKeyCredential | null
+
+  if (credential === null) throw new Error(fromCopy(copy, 'authForm.passkey.noneCreated'))
+
+  const response = credential.response as AuthenticatorAttestationResponse
+
+  await submit(
+    'register',
+    {
+      label,
+      clientDataJSON: bytesToBase64Url(response.clientDataJSON),
+      attestationObject: bytesToBase64Url(response.attestationObject),
+      transports: typeof response.getTransports === 'function' ? response.getTransports() : [],
+    },
+    copy,
+  )
+}
+
+export async function signInWithPasskey(next: string | undefined, copy: Copy): Promise<string> {
+  return assertPasskey('authenticate', next, copy)
+}
+
+/**
+ * The same exchange, against a sign-in that has already given its password.
+ * The board scopes the challenge to that member's own credentials, so the
+ * browser offers only the keys that could finish this particular sign-in.
+ */
+export async function confirmWithPasskey(next: string | undefined, copy: Copy): Promise<string> {
+  return assertPasskey('second-factor', next, copy)
+}
+
+export async function proveWithPasskey(next: string | undefined, copy: Copy): Promise<string> {
+  return assertPasskey('credential-proof', next, copy)
+}
+
+async function assertPasskey(
+  purpose: Exclude<Purpose, 'register'>,
+  next: string | undefined,
+  copy: Copy,
+): Promise<string> {
+  const issued = await options(purpose, copy)
+
+  const allow = issued.allowCredentials as { id: string }[] | undefined
+
+  const credential = (await navigator.credentials.get({
+    publicKey: {
+      challenge: base64UrlToBytes(issued.challenge as string),
+      rpId: issued.rpId as string,
+      userVerification: issued.userVerification as UserVerificationRequirement,
+      timeout: issued.timeout as number,
+      ...(allow === undefined
+        ? {}
+        : {
+            allowCredentials: allow.map((entry) => ({
+              type: 'public-key' as const,
+              id: base64UrlToBytes(entry.id),
+            })),
+          }),
+    },
+  })) as PublicKeyCredential | null
+
+  if (credential === null) throw new Error(fromCopy(copy, 'authForm.passkey.noneOffered'))
+
+  const response = credential.response as AuthenticatorAssertionResponse
+
+  const outcome = await submit(
+    purpose,
+    {
+      id: credential.id,
+      clientDataJSON: bytesToBase64Url(response.clientDataJSON),
+      authenticatorData: bytesToBase64Url(response.authenticatorData),
+      signature: bytesToBase64Url(response.signature),
+      ...(next === undefined ? {} : { next }),
+    },
+    copy,
+  )
+
+  return typeof outcome.next === 'string' ? outcome.next : '/'
+}
+
+export function passkeyMessage(error: unknown, copy: Copy): string {
+  if (error instanceof DOMException && error.name === 'NotAllowedError') {
+    return fromCopy(copy, 'authForm.passkey.cancelled')
+  }
+  return error instanceof Error ? error.message : fromCopy(copy, 'authForm.passkey.failed')
+}

package/src/components/auth/passkey-second-factor.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+import { Alert, AlertDescription, Separator } from '@meith/ui'
+import { Button } from '@meith/ui/button'
+
+import { type Copy, fromCopy } from '../shell/copy'
+import { confirmWithPasskey, passkeyMessage, passkeysAvailable } from './passkey-client'
+
+export function PasskeySecondFactor({
+  next,
+  copy,
+}: {
+  readonly next?: string | undefined
+  readonly copy: Copy
+}) {
+  const [available, setAvailable] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    setAvailable(passkeysAvailable())
+  }, [])
+
+  if (!available) return null
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center gap-3">
+        <Separator className="flex-1" />
+        <span className="text-xs uppercase tracking-wide text-muted-foreground">
+          {fromCopy(copy, 'authForm.or')}
+        </span>
+        <Separator className="flex-1" />
+      </div>
+
+      {error === null ? null : (
+        <Alert tone="error">
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      <Button
+        type="button"
+        variant="outline"
+        size="lg"
+        className="w-full"
+        disabled={busy}
+        onClick={() => {
+          setError(null)
+          setBusy(true)
+          confirmWithPasskey(next, copy)
+            .then((destination) => {
+              window.location.assign(destination)
+            })
+            .catch((problem: unknown) => {
+              setError(passkeyMessage(problem, copy))
+              setBusy(false)
+            })
+        }}
+      >
+        {busy
+          ? fromCopy(copy, 'authForm.passkey.waiting')
+          : fromCopy(copy, 'authForm.passkey.confirm')}
+      </Button>
+    </div>
+  )
+}

package/src/components/auth/passkey-sign-in.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+import { Alert, AlertDescription } from '@meith/ui'
+import { Button } from '@meith/ui/button'
+
+import { type Copy, fromCopy } from '../shell/copy'
+import { passkeyMessage, passkeysAvailable, signInWithPasskey } from './passkey-client'
+
+export function PasskeySignIn({
+  next,
+  copy,
+}: {
+  readonly next?: string | undefined
+  readonly copy: Copy
+}) {
+  const [available, setAvailable] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    setAvailable(passkeysAvailable())
+  }, [])
+
+  if (!available) return null
+
+  return (
+    <div className="flex flex-col gap-2">
+      {error === null ? null : (
+        <Alert tone="error">
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      <Button
+        type="button"
+        variant="outline"
+        size="lg"
+        className="w-full"
+        disabled={busy}
+        onClick={() => {
+          setError(null)
+          setBusy(true)
+          signInWithPasskey(next, copy)
+            .then((destination) => {
+              window.location.assign(destination)
+            })
+            .catch((problem: unknown) => {
+              setError(passkeyMessage(problem, copy))
+              setBusy(false)
+            })
+        }}
+      >
+        {busy
+          ? fromCopy(copy, 'authForm.passkey.waiting')
+          : fromCopy(copy, 'authForm.passkey.signIn')}
+      </Button>
+    </div>
+  )
+}

package/src/components/auth/register-form.tsx

@@ -0,0 +1,136 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { registerAction } from '@/server/auth-actions'
+import { EMPTY_STATE } from '@/server/auth-form-state'
+
+import { CustomField, type CustomFieldInput } from '../profile/custom-field'
+import { type Copy, fromCopy } from '../shell/copy'
+import { Field, FormError, SubmitButton } from './form-controls'
+
+const CONTROL =
+  'h-10 rounded-md border border-input bg-background px-3 text-sm text-foreground outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40'
+
+export interface ChallengeInput {
+  readonly prompt: string | null
+  readonly token: string
+  readonly honeypot: boolean
+  readonly issuedAt: number
+}
+
+export interface RegistrationLimits {
+  readonly minPasswordLength: number
+  readonly usernameMin: number
+  readonly usernameMax: number
+}
+
+export interface TermsInput {
+  readonly label: string
+  readonly href: string
+}
+
+export function RegisterForm({
+  customFields = [],
+  challenge,
+  limits,
+  terms = null,
+  copy,
+}: {
+  customFields?: readonly CustomFieldInput[]
+  challenge?: ChallengeInput
+  limits: RegistrationLimits
+  terms?: TermsInput | null | undefined
+  copy: Copy
+}) {
+  const [state, action] = useActionState(registerAction, EMPTY_STATE)
+  return (
+    <form action={action} className="flex flex-col gap-4" noValidate>
+      <FormError message={state.error} />
+      <Field
+        label={fromCopy(copy, 'authForm.register.username')}
+        name="username"
+        autoComplete="username"
+        minLength={limits.usernameMin}
+        maxLength={limits.usernameMax}
+        defaultValue={state.values?.username}
+        hint={fromCopy(copy, 'authForm.register.usernameHint')}
+      />
+      <Field
+        label={fromCopy(copy, 'authForm.email')}
+        name="email"
+        type="email"
+        autoComplete="email"
+        defaultValue={state.values?.email}
+      />
+      <Field
+        label={fromCopy(copy, 'authForm.register.password')}
+        name="password"
+        type="password"
+        autoComplete="new-password"
+        minLength={limits.minPasswordLength}
+        hint={fromCopy(copy, 'authForm.passwordHint')}
+      />
+      {customFields.map((field) => (
+        <CustomField key={field.key} field={field} className={CONTROL} />
+      ))}
+
+      {challenge !== undefined && (
+        <>
+          <input type="hidden" name="_issued" value={challenge.issuedAt} />
+          <input type="hidden" name="_challenge" value={challenge.token} />
+
+          {challenge.honeypot && (
+            <div aria-hidden="true" className="hidden">
+              <label htmlFor="contact_url">{fromCopy(copy, 'authForm.register.honeypot')}</label>
+              <input
+                id="contact_url"
+                name="contact_url"
+                type="text"
+                tabIndex={-1}
+                autoComplete="off"
+                defaultValue=""
+              />
+            </div>
+          )}
+
+          {challenge.prompt !== null && (
+            <Field
+              label={challenge.prompt}
+              name="challenge_answer"
+              autoComplete="off"
+              hint={fromCopy(copy, 'authForm.register.challengeHint')}
+            />
+          )}
+        </>
+      )}
+
+      {terms !== null && (
+        <label className="flex items-start gap-2 text-sm text-muted-foreground">
+          <input
+            type="checkbox"
+            name="terms"
+            value="1"
+            required
+            defaultChecked={state.values?.terms === '1'}
+            className="mt-0.5 size-4 rounded border-input accent-primary"
+          />
+          <span>
+            {copy['authForm.register.termsLead']}
+            <a
+              href={terms.href}
+              target="_blank"
+              rel="noreferrer"
+              className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
+            >
+              {terms.label}
+            </a>
+            {copy['authForm.register.termsTail']}
+          </span>
+        </label>
+      )}
+
+      <SubmitButton>{fromCopy(copy, 'authForm.register.submit')}</SubmitButton>
+    </form>
+  )
+}

package/src/components/auth/resend-verification-form.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { resendVerificationAction } from '@/server/auth-actions'
+import { EMPTY_STATE } from '@/server/auth-form-state'
+
+import { type Copy, fromCopy } from '../shell/copy'
+import { Field, FormError, FormNotice, SubmitButton } from './form-controls'
+
+export function ResendVerificationForm({
+  email,
+  copy,
+}: {
+  email?: string | undefined
+  copy: Copy
+}) {
+  const [state, action] = useActionState(resendVerificationAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="flex flex-col gap-4" noValidate>
+      <FormNotice message={state.notice} />
+      <FormError message={state.error} />
+      <Field
+        label={fromCopy(copy, 'authForm.email')}
+        name="email"
+        type="email"
+        autoComplete="email"
+        defaultValue={state.values?.email ?? email}
+      />
+      <SubmitButton>{fromCopy(copy, 'authForm.resend.submit')}</SubmitButton>
+    </form>
+  )
+}

package/src/components/auth/reset-confirm-form.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { confirmResetAction } from '@/server/auth-actions'
+import { EMPTY_STATE } from '@/server/auth-form-state'
+
+import { type Copy, fromCopy } from '../shell/copy'
+import { Field, FormError, SubmitButton } from './form-controls'
+
+export function ResetConfirmForm({
+  token,
+  minLength,
+  copy,
+}: {
+  token: string
+  minLength: number
+  copy: Copy
+}) {
+  const [state, action] = useActionState(confirmResetAction, EMPTY_STATE)
+  return (
+    <form action={action} className="flex flex-col gap-4" noValidate>
+      <FormError message={state.error} />
+      <input type="hidden" name="token" value={token} />
+      <Field
+        label={fromCopy(copy, 'authForm.resetConfirm.password')}
+        name="password"
+        type="password"
+        autoComplete="new-password"
+        minLength={minLength}
+        hint={fromCopy(copy, 'authForm.passwordHint')}
+      />
+      <Field
+        label={fromCopy(copy, 'authForm.resetConfirm.confirm')}
+        name="confirm"
+        type="password"
+        autoComplete="new-password"
+        minLength={minLength}
+      />
+      <SubmitButton>{fromCopy(copy, 'authForm.resetConfirm.submit')}</SubmitButton>
+    </form>
+  )
+}

package/src/components/auth/reset-request-form.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { requestResetAction } from '@/server/auth-actions'
+import { EMPTY_STATE } from '@/server/auth-form-state'
+
+import { type Copy, fromCopy } from '../shell/copy'
+import { Field, FormError, FormNotice, SubmitButton } from './form-controls'
+
+export function ResetRequestForm({ copy }: { copy: Copy }) {
+  const [state, action] = useActionState(requestResetAction, EMPTY_STATE)
+  const devToken = state.values?.devToken
+  return (
+    <form action={action} className="flex flex-col gap-4" noValidate>
+      <FormNotice message={state.notice} />
+      <FormError message={state.error} />
+      {devToken ? (
+        <a
+          href={`/reset/confirm?token=${devToken}`}
+          className="rounded-md border border-border bg-muted px-3 py-2 text-sm text-foreground underline underline-offset-2"
+        >
+          {fromCopy(copy, 'authForm.reset.continue')}
+        </a>
+      ) : null}
+      <Field
+        label={fromCopy(copy, 'authForm.email')}
+        name="email"
+        type="email"
+        autoComplete="email"
+      />
+      <SubmitButton>{fromCopy(copy, 'authForm.reset.submit')}</SubmitButton>
+    </form>
+  )
+}

package/src/components/auth/second-factor-form.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { Button } from '@meith/ui/button'
+
+import { abandonSecondFactorAction, verifySecondFactorAction } from '@/server/auth-actions'
+import { EMPTY_STATE } from '@/server/auth-form-state'
+
+import { type Copy, fromCopy } from '../shell/copy'
+import { Field, FormError, SubmitButton } from './form-controls'
+
+export function SecondFactorForm({
+  next,
+  recoveryCodesLeft,
+  copy,
+}: {
+  readonly next?: string | undefined
+  readonly recoveryCodesLeft: number
+  readonly copy: Copy
+}) {
+  const [state, action] = useActionState(verifySecondFactorAction, EMPTY_STATE)
+
+  return (
+    <div className="flex flex-col gap-4">
+      <form action={action} className="flex flex-col gap-4" noValidate>
+        <FormError message={state.error} />
+
+        <Field
+          label={fromCopy(copy, 'authForm.secondFactor.code')}
+          name="code"
+          autoComplete="one-time-code"
+          hint={
+            recoveryCodesLeft > 0
+              ? fromCopy(copy, 'authForm.secondFactor.recoveryHint')
+              : fromCopy(copy, 'authForm.secondFactor.recoveryHintExhausted')
+          }
+        />
+
+        {next ? <input type="hidden" name="next" value={next} /> : null}
+        <SubmitButton>{fromCopy(copy, 'authForm.secondFactor.submit')}</SubmitButton>
+      </form>
+
+      <form action={abandonSecondFactorAction}>
+        <Button type="submit" variant="ghost" size="sm">
+          {fromCopy(copy, 'authForm.secondFactor.cancel')}
+        </Button>
+      </form>
+    </div>
+  )
+}

package/src/components/auth/sso-buttons.tsx

@@ -0,0 +1,47 @@
+import { buttonVariants, Separator } from '@meith/ui'
+
+import type { SsoButtonModel } from '@/view/auth-copy'
+
+import { type Copy, fromCopy } from '../shell/copy-record'
+
+export function SsoButtons({
+  providers,
+  next,
+  lede,
+  copy,
+}: {
+  readonly providers: readonly SsoButtonModel[]
+  readonly next?: string | undefined
+  readonly lede?: string | undefined
+  readonly copy: Copy
+}) {
+  if (providers.length === 0) return null
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-2">
+        {providers.map((provider) => (
+          <form key={provider.id} method="post" action={`/auth/sso/${provider.id}`}>
+            {next ? <input type="hidden" name="next" value={next} /> : null}
+            <button
+              type="submit"
+              className={buttonVariants({ variant: 'outline', size: 'lg', className: 'w-full' })}
+            >
+              {provider.cta}
+            </button>
+          </form>
+        ))}
+      </div>
+
+      <p className="text-xs text-muted-foreground">{lede ?? fromCopy(copy, 'authForm.sso.lede')}</p>
+
+      <div className="flex items-center gap-3">
+        <Separator className="flex-1" />
+        <span className="text-xs uppercase tracking-wide text-muted-foreground">
+          {fromCopy(copy, 'authForm.or')}
+        </span>
+        <Separator className="flex-1" />
+      </div>
+    </div>
+  )
+}