@kelpie/ui 0.10.0 → 0.12.0

package/src/pages/admin/WorkspaceSettingsPage.tsx

@@ -74,8 +74,6 @@ function WorkspaceSettingsForm({
   const [name, setName] = useState(workspace.name)
   const [slug, setSlug] = useState(workspace.slug)
   const [timezone, setTimezone] = useState(workspace.timezone)
-  const [tagline, setTagline] = useState(workspace.tagline ?? '')
-  const [oneLiner, setOneLiner] = useState(workspace.oneLiner ?? '')
   const [saved, setSaved] = useState(false)
 
   const canEdit = session?.role === 'owner' || session?.role === 'admin'
@@ -92,10 +90,6 @@ function WorkspaceSettingsForm({
         name: name.trim(),
         slug: slug.trim(),
         timezone,
-        // Empty is not blank text, it is no tagline. `null` clears the column;
-        // an empty string would store one and hand agents an empty identity.
-        tagline: tagline.trim().length === 0 ? null : tagline.trim(),
-        oneLiner: oneLiner.trim().length === 0 ? null : oneLiner.trim(),
       })
       .then(() => {
         setSaved(true)
@@ -107,7 +101,7 @@ function WorkspaceSettingsForm({
     <div className="animate-slide-in mx-auto max-w-4xl space-y-8">
       <PageHeader
         title="Workspace"
-        description="Name, address, timezone, and how the company introduces itself to an agent."
+        description="Name, address, and timezone."
       />
 
       <form onSubmit={save} className="space-y-4">
@@ -135,30 +129,6 @@ function WorkspaceSettingsForm({
           />
         </Field>
 
-        <Field label="Tagline" hint="The short identity an agent loads first.">
-          <input
-            value={tagline}
-            onChange={(event) => {
-              setTagline(event.target.value)
-            }}
-            placeholder="CRM and company brain for agent-native startups"
-            disabled={!canEdit}
-            className="w-full max-w-xl rounded-md border border-border bg-surface-raised px-3 py-2 text-[13px] outline-none focus:border-accent focus:ring-2 focus:ring-accent/20 disabled:opacity-60"
-          />
-        </Field>
-
-        <Field label="One-liner" hint="What the company does, in a sentence.">
-          <textarea
-            value={oneLiner}
-            onChange={(event) => {
-              setOneLiner(event.target.value)
-            }}
-            rows={2}
-            disabled={!canEdit}
-            className="w-full max-w-xl rounded-md border border-border bg-surface-raised px-3 py-2 text-[13px] outline-none focus:border-accent focus:ring-2 focus:ring-accent/20 disabled:opacity-60"
-          />
-        </Field>
-
         <Field label="Timezone">
           <select
             value={timezone}

package/src/pages/auth/AuthForm.tsx

@@ -116,3 +116,41 @@ export function SecondaryButton({
     </button>
   )
 }
+
+/**
+ * A labelled rule, for a module separating its own buttons from the password
+ * form above them. Core never renders one itself; see `AuthMethods`.
+ */
+export function AuthDivider({ label = 'or' }: { readonly label?: string }): React.JSX.Element {
+  return (
+    <div className="flex items-center gap-3 py-1">
+      <span className="h-px flex-1 bg-border" />
+      <span className="text-[11px] text-ink-faint">{label}</span>
+      <span className="h-px flex-1 bg-border" />
+    </div>
+  )
+}
+
+/**
+ * The secondary button as a link.
+ *
+ * A plain anchor, not a router link: a sign-in method leaves the app for its
+ * provider, and the destination is a server route the SPA router knows nothing
+ * about.
+ */
+export function AuthLinkButton({
+  label,
+  href,
+}: {
+  readonly label: string
+  readonly href: string
+}): React.JSX.Element {
+  return (
+    <a
+      href={href}
+      className="block w-full rounded-md border border-border bg-surface px-3.5 py-2 text-center text-[12px] font-medium text-ink-muted transition hover:bg-surface-raised"
+    >
+      {label}
+    </a>
+  )
+}

package/src/pages/auth/AuthMethods.tsx

@@ -0,0 +1,29 @@
+import { Fragment } from 'react'
+
+import { useAuthMethods } from '../../registry/context.ts'
+import type { AuthMethodContext } from '../../registry/contributions.ts'
+
+/**
+ * The `auth.methods` slot, rendered by the signed-out pages beside their form.
+ *
+ * Nothing is drawn around the contributions: no divider, no "or" rule. Whether
+ * a module has anything to show is decided at run time (a sign-in module with
+ * no provider configured renders nothing), so core framing would leave a
+ * heading over an empty space. A module that draws buttons draws its own
+ * divider with `AuthDivider`.
+ */
+export function AuthMethods({ intent, next }: AuthMethodContext): React.JSX.Element | null {
+  const methods = useAuthMethods()
+
+  if (methods.length === 0) {
+    return null
+  }
+
+  return (
+    <div className="mt-4 space-y-2">
+      {methods.map((method) => (
+        <Fragment key={method.id}>{method.render({ intent, next })}</Fragment>
+      ))}
+    </div>
+  )
+}

package/src/pages/auth/SignInPage.tsx

@@ -6,6 +6,8 @@ import { useLogIn } from '../../api/resources/session.ts'
 import { ErrorPanel } from '../../components/QueryState.tsx'
 import { SubmitButton, TextField } from './AuthForm.tsx'
 import { AuthLayout } from './AuthLayout.tsx'
+import { AuthMethods } from './AuthMethods.tsx'
+import { safeNext } from './nextPath.ts'
 
 /**
  * Sign in, against `POST /v1/auth/login`.
@@ -15,14 +17,6 @@ import { AuthLayout } from './AuthLayout.tsx'
  * People with the invitation still unaccepted.
  */
 
-/**
- * Only a path within this app. An absolute URL in `?next=` would turn the
- * sign-in form into an open redirect.
- */
-function safeNext(value: string | null): string {
-  return value !== null && value.startsWith('/') && !value.startsWith('//') ? value : '/dashboard'
-}
-
 export function SignInPage(): React.JSX.Element {
   const navigate = useNavigate()
   const [searchParameters] = useSearchParams()
@@ -78,6 +72,7 @@ export function SignInPage(): React.JSX.Element {
         {logIn.error !== null && <ErrorPanel error={logIn.error} />}
         <SubmitButton label="Sign in" pendingLabel="Signing in…" isPending={logIn.isPending} />
       </form>
+      <AuthMethods intent="login" next={next} />
     </AuthLayout>
   )
 }

package/src/pages/auth/SignUpPage.tsx

@@ -7,6 +7,7 @@ import { useSignUp } from '../../api/resources/session.ts'
 import { ErrorPanel } from '../../components/QueryState.tsx'
 import { SubmitButton, TextField } from './AuthForm.tsx'
 import { AuthLayout } from './AuthLayout.tsx'
+import { AuthMethods } from './AuthMethods.tsx'
 
 /**
  * Creating an account, against `POST /v1/auth/signup`.
@@ -94,6 +95,12 @@ export function SignUpPage(): React.JSX.Element {
         {signUp.error !== null && <ErrorPanel error={signUp.error} />}
         <SubmitButton label="Continue" pendingLabel="Creating…" isPending={signUp.isPending} />
       </form>
+      {/*
+        `/dashboard` rather than the verification screen a password signup goes
+        to: an account a module provisions is verified already, and having no
+        workspace, `SessionGate` sends it on to the workspace step itself.
+      */}
+      <AuthMethods intent="signup" next="/dashboard" />
     </AuthLayout>
   )
 }

package/src/pages/auth/nextPath.ts

@@ -0,0 +1,17 @@
+/**
+ * Where a signed-out page sends the browser once it is signed in.
+ *
+ * Its own file rather than beside the form controls: a module exporting a
+ * component and a function from one file loses Fast Refresh, and this is
+ * exported to modules, which is the reason it is not page-local. A module
+ * contributing a sign-in method is handed the result and has to be able to
+ * rely on what it means.
+ */
+
+/**
+ * Only a path within this app. An absolute URL in `?next=` would turn a
+ * sign-in page into an open redirect.
+ */
+export function safeNext(value: string | null): string {
+  return value !== null && value.startsWith('/') && !value.startsWith('//') ? value : '/dashboard'
+}

package/src/pages/forms/AddFieldMenu.tsx

@@ -1,4 +1,4 @@
-import { FORM_FIELD_MAP_TARGET_LABELS } from '@kelpie/schemas'
+import { labelForMapTarget } from '@kelpie/schemas'
 import type { FormFieldInput } from '@kelpie/schemas'
 import { useEffect, useRef, useState } from 'react'
 
@@ -92,7 +92,7 @@ export function AddFieldMenu({ fields, onAdd }: AddFieldMenuProps): React.JSX.El
                 >
                   <span>{preset.label}</span>
                   <span className="shrink-0 text-[11px] text-ink-faint">
-                    {FORM_FIELD_MAP_TARGET_LABELS[preset.mapTo]}
+                    {labelForMapTarget(preset.mapTo)}
                   </span>
                 </button>
               ))}

package/src/pages/forms/FieldsEditor.tsx

@@ -9,24 +9,24 @@ import {
 import type { DragEndEvent } from '@dnd-kit/core'
 import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
-import { FORM_FIELD_MAP_TARGET_LABELS, FORM_OPTION_VALUE_TYPES } from '@kelpie/schemas'
+import { FORM_OPTION_VALUE_TYPES } from '@kelpie/schemas'
 import type {
   Form,
   FormFieldInput,
-  FormFieldMapTarget,
   FormFieldOptionInput,
   FormFieldType,
 } from '@kelpie/schemas'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 
 import { useConsentPurposes } from '../../api/resources/consentPurposes.ts'
+import { useCustomFields } from '../../api/resources/customFields.ts'
 import type { ConsentPurpose } from '@kelpie/schemas'
 import { useUpdateFormFields } from '../../api/resources/forms.ts'
 import { ErrorPanel } from '../../components/QueryState.tsx'
 import { AddFieldMenu } from './AddFieldMenu.tsx'
+import { MapTargetSearch } from './MapTargetSearch.tsx'
 import {
   FIELD_TYPE_OPTIONS,
-  MAP_TARGET_OPTIONS,
   editField,
   fieldsChanged,
   findProblems,
@@ -78,6 +78,17 @@ export function FieldsEditor({ form }: FieldsEditorProps): React.JSX.Element {
   const [fields, setFields] = useState<EditableField[]>(() => toEditableFields(form))
   const [selectedId, setSelectedId] = useState<string | null>(null)
   const updateFields = useUpdateFormFields()
+  const customFields = useCustomFields()
+  const customFieldDefinitions = useMemo(
+    () =>
+      customFields.records.map((definition) => ({
+        objectType: definition.objectType,
+        key: definition.key,
+        label: definition.label,
+        type: definition.type,
+      })),
+    [customFields.records],
+  )
   const fieldsRef = useRef<readonly EditableField[]>(fields)
   fieldsRef.current = fields
   const sensors = useSensors(
@@ -104,7 +115,7 @@ export function FieldsEditor({ form }: FieldsEditorProps): React.JSX.Element {
     setFields(next)
   }, [form])
 
-  const problems = findProblems(fields, form.createDeal)
+  const problems = findProblems(fields, form.createDeal, { customFieldDefinitions })
   const changed = fieldsChanged(form, fields)
   const selected = fields.find((field) => field.id === selectedId)
 
@@ -190,6 +201,8 @@ export function FieldsEditor({ form }: FieldsEditorProps): React.JSX.Element {
         ) : (
           <FieldSettings
             field={selected}
+            fields={fields}
+            customFieldDefinitions={customFieldDefinitions}
             problem={problems.byField.get(selected.id)}
             onChange={(change) => {
               setFields((current) => editField(current, selected.id, change))
@@ -424,6 +437,13 @@ function ConsentPreview({ field }: { readonly field: EditableField }): React.JSX
 
 interface FieldSettingsProps {
   readonly field: EditableField
+  readonly fields: readonly EditableField[]
+  readonly customFieldDefinitions: readonly {
+    readonly objectType: import('@kelpie/schemas').CustomFieldObjectType
+    readonly key: string
+    readonly label: string
+    readonly type: import('@kelpie/schemas').CustomFieldType
+  }[]
   readonly problem: string | undefined
   readonly onChange: (change: Partial<FormFieldInput>) => void
   readonly onRemove: () => void
@@ -433,11 +453,21 @@ interface FieldSettingsProps {
 /** The panel a selected field's settings edit in. */
 function FieldSettings({
   field,
+  fields,
+  customFieldDefinitions,
   problem,
   onChange,
   onRemove,
   onClose,
 }: FieldSettingsProps): React.JSX.Element {
+  const usedTargets = useMemo(
+    () =>
+      new Set(
+        fields.filter((entry) => entry.id !== field.id).map((entry) => entry.mapTo),
+      ),
+    [fields, field.id],
+  )
+
   return (
     <aside className="rounded-lg border border-border bg-surface-raised p-4 lg:sticky lg:top-4">
       <div className="mb-3 flex items-center justify-between gap-2">
@@ -464,24 +494,19 @@ function FieldSettings({
           />
         </label>
 
-        <label className="block">
+        <div className="block">
           <span className="mb-1 block text-[11px] font-medium text-ink-faint">Maps to</span>
-          <select
-            className={inputClass}
+          <MapTargetSearch
             value={field.mapTo}
-            onChange={(event) => {
-              const mapTo = event.target.value as FormFieldMapTarget
-
-              onChange({ mapTo, type: typeForTarget(mapTo, field.type) })
+            usedTargets={usedTargets}
+            onChange={(mapTo) => {
+              onChange({
+                mapTo,
+                type: typeForTarget(mapTo, field.type, customFieldDefinitions),
+              })
             }}
-          >
-            {MAP_TARGET_OPTIONS.map((option) => (
-              <option key={option.value} value={option.value}>
-                {FORM_FIELD_MAP_TARGET_LABELS[option.value]}
-              </option>
-            ))}
-          </select>
-        </label>
+          />
+        </div>
 
         <label className="block">
           <span className="mb-1 block text-[11px] font-medium text-ink-faint">Type</span>

package/src/pages/forms/MapTargetSearch.tsx

@@ -0,0 +1,69 @@
+import {
+  isRepeatableMapTarget,
+  labelForMapTarget,
+  listMapTargetEntries,
+  metaForMapTargetEntry,
+} from '@kelpie/schemas'
+import type { CustomFieldDefinition } from '@kelpie/schemas'
+
+import { useCustomFields } from '../../api/resources/customFields.ts'
+import { EntitySearch } from '../../components/EntitySearch.tsx'
+import type { SearchOption } from '../../components/EntitySearch.tsx'
+
+export interface MapTargetSearchProps {
+  readonly value: string
+  readonly usedTargets: ReadonlySet<string>
+  readonly onChange: (target: string) => void
+}
+
+function toCustomRefs(
+  definitions: readonly CustomFieldDefinition[],
+): readonly { objectType: CustomFieldDefinition['objectType']; key: string; label: string; type: CustomFieldDefinition['type'] }[] {
+  return definitions.map((definition) => ({
+    objectType: definition.objectType,
+    key: definition.key,
+    label: definition.label,
+    type: definition.type,
+  }))
+}
+
+export function MapTargetSearch({
+  value,
+  usedTargets,
+  onChange,
+}: MapTargetSearchProps): React.JSX.Element {
+  const customFields = useCustomFields()
+  const customRefs = toCustomRefs(customFields.records)
+  const entries = listMapTargetEntries(customRefs)
+
+  const options: readonly SearchOption[] = entries
+    .filter((entry) => entry.target === value || !usedTargets.has(entry.target) || isRepeatableMapTarget(entry.target))
+    .map((entry) => {
+      const customType =
+        entry.fieldKind === 'custom'
+          ? customRefs.find(
+              (definition) =>
+                entry.target.endsWith(`.custom_fields.${definition.key}`) &&
+                entry.target.startsWith(`${definition.objectType}.`),
+            )?.type
+          : undefined
+
+      return {
+        id: entry.target,
+        label: labelForMapTarget(entry.target, customRefs),
+        meta: metaForMapTargetEntry(entry, customType),
+      }
+    })
+
+  return (
+    <EntitySearch
+      options={options}
+      value={value}
+      onChange={onChange}
+      placeholder="Search object and field…"
+      emptyMessage="No matching fields"
+      limit={12}
+      size="md"
+    />
+  )
+}

package/src/pages/forms/fieldList.ts

@@ -1,10 +1,19 @@
 import {
-  FORM_FIELD_MAP_TARGETS,
   FORM_FIELD_TYPES,
+  isCompatibleFormFieldType,
+  isKnownMapTarget,
+  isRepeatableMapTarget,
   PERSON_CONSENT_TARGET,
   PERSON_EMAIL_TARGET,
+  suggestedFormFieldType,
+} from '@kelpie/schemas'
+import type {
+  CustomFieldDefinitionRef,
+  Form,
+  FormFieldInput,
+  FormFieldMapTarget,
+  FormFieldType,
 } from '@kelpie/schemas'
-import type { Form, FormFieldInput, FormFieldMapTarget, FormFieldType } from '@kelpie/schemas'
 
 import { CRM_FIELD_PRESETS, NEW_SELECT_OPTIONS } from './template.ts'
 
@@ -28,10 +37,9 @@ export interface EditableField extends FormFieldInput {
 
 export const FIELD_TYPE_OPTIONS = FORM_FIELD_TYPES.map((type) => ({ value: type, label: type }))
 
-export const MAP_TARGET_OPTIONS = FORM_FIELD_MAP_TARGETS.map((target) => ({
-  value: target,
-  label: target,
-}))
+export interface FindProblemsOptions {
+  readonly customFieldDefinitions?: readonly CustomFieldDefinitionRef[]
+}
 
 /** Reads a saved form into the shape the builder edits. */
 export function toEditableFields(form: Form): EditableField[] {
@@ -92,8 +100,7 @@ export function editField(
       // that may repeat — consent's uniqueness is per purpose, not per
       // target, and is enforced when the purpose is picked.
       return change.mapTo !== undefined &&
-        change.mapTo !== 'submission' &&
-        change.mapTo !== PERSON_CONSENT_TARGET &&
+        !isRepeatableMapTarget(change.mapTo) &&
         field.mapTo === change.mapTo
         ? { ...field, mapTo: 'submission' }
         : field
@@ -182,11 +189,13 @@ export interface FieldListProblems {
 export function findProblems(
   fields: readonly EditableField[],
   createsDeal: boolean,
+  options: FindProblemsOptions = {},
 ): FieldListProblems {
   const list: string[] = []
   const byField = new Map<string, string>()
-  const seen = new Set<FormFieldMapTarget>()
+  const seen = new Set<string>()
   const usedConsentPurposes = new Set<string>()
+  const customFieldDefinitions = options.customFieldDefinitions ?? []
 
   if (!fields.some((field) => field.mapTo === PERSON_EMAIL_TARGET)) {
     list.push(`One field must map to ${PERSON_EMAIL_TARGET}, or no submission can be processed.`)
@@ -197,6 +206,15 @@ export function findProblems(
   }
 
   for (const field of fields) {
+    if (!isKnownMapTarget(field.mapTo, customFieldDefinitions)) {
+      byField.set(field.id, `Unknown map target ${field.mapTo}.`)
+    } else if (
+      field.mapTo !== PERSON_CONSENT_TARGET &&
+      !isCompatibleFormFieldType(field.type, field.mapTo, customFieldDefinitions)
+    ) {
+      byField.set(field.id, `A ${field.type} field cannot map to ${field.mapTo}.`)
+    }
+
     if (field.mapTo === PERSON_CONSENT_TARGET) {
       const purposes = field.consentPurposeIds ?? []
       if (field.type === 'notice' && (field.statement ?? '').trim().length === 0) {
@@ -224,7 +242,7 @@ export function findProblems(
           }
         }
       }
-    } else if (field.mapTo !== 'submission') {
+    } else if (!isRepeatableMapTarget(field.mapTo)) {
       if (seen.has(field.mapTo)) {
         byField.set(field.id, `Another field already maps to ${field.mapTo}.`)
       }
@@ -252,12 +270,12 @@ export function isUsable(problems: FieldListProblems): boolean {
 }
 
 /** The types a mapping can sensibly render as. */
-export function typeForTarget(target: FormFieldMapTarget, current: FormFieldType): FormFieldType {
-  if (target === PERSON_EMAIL_TARGET) return 'email'
-  if (target === PERSON_CONSENT_TARGET) {
-    return current === 'notice' ? 'notice' : 'consent'
-  }
-  return current === 'consent' || current === 'notice' ? 'text' : current
+export function typeForTarget(
+  target: FormFieldMapTarget,
+  current: FormFieldType,
+  customFieldDefinitions: readonly CustomFieldDefinitionRef[] = [],
+): FormFieldType {
+  return suggestedFormFieldType(target, customFieldDefinitions, current)
 }
 
 /**

package/src/pages/forms/template.ts

@@ -70,6 +70,13 @@ export const CRM_FIELD_PRESETS: readonly FormFieldInput[] = [
     mapTo: 'person.email',
     placeholder: 'you@company.com',
   },
+  {
+    label: 'Phone',
+    type: 'text',
+    required: false,
+    mapTo: 'person.phones',
+    placeholder: 'Phone number',
+  },
   { label: 'Company', type: 'text', required: false, mapTo: 'company.name', placeholder: 'Company name' },
   {
     label: 'Company website',

package/src/registry/context.ts

@@ -2,6 +2,7 @@ import { createContext, useContext } from 'react'
 import type { ComponentType } from 'react'
 
 import type {
+  AuthMethod,
   DashboardCard,
   ExtensibleRecordType,
   NavItem,
@@ -53,6 +54,11 @@ export function useDashboardCards(): readonly DashboardCard[] {
   return useUiExtensions().dashboardCards()
 }
 
+/** Extra ways to sign in, for the signed-out pages to render beside their form. */
+export function useAuthMethods(): readonly AuthMethod[] {
+  return useUiExtensions().authMethods()
+}
+
 /**
  * The component to render for an overridable: a module's replacement, or core's
  * own. Core calls this instead of rendering its component directly.

package/src/registry/contributions.ts

@@ -25,6 +25,32 @@ export interface NavItem {
   readonly icon?: ReactNode
 }
 
+/**
+ * What a sign-in method is rendering against.
+ *
+ * `intent` because the same button reads differently on the two pages, and
+ * `next` because where the browser lands afterwards is the page's to decide,
+ * not the module's. The page has already checked it is a path within the app.
+ */
+export interface AuthMethodContext {
+  readonly intent: 'login' | 'signup'
+  readonly next: string
+}
+
+/**
+ * Another way to sign in, offered beside the password form.
+ *
+ * Core renders whatever a module returns and nothing around it: no divider, no
+ * heading. A module cannot always tell at build time whether it has anything to
+ * offer (an unconfigured provider renders nothing at all), and core framing
+ * would then decorate an empty space.
+ */
+export interface AuthMethod {
+  readonly id: string
+  readonly order?: number
+  readonly render: (context: AuthMethodContext) => ReactNode
+}
+
 /** A whole page, mounted under the shell's chrome. */
 export interface RouteContribution {
   readonly path: string

package/src/registry/registry.ts

@@ -1,6 +1,7 @@
 import type { ComponentType } from 'react'
 
 import type {
+  AuthMethod,
   DashboardCard,
   ExtensibleRecordType,
   NavItem,
@@ -31,6 +32,8 @@ export interface UiModuleContext {
   recordTab(objectType: ExtensibleRecordType, tab: RecordTab): void
   recordSidebarCard(objectType: ExtensibleRecordType, card: RecordSidebarCard): void
   dashboardCard(card: DashboardCard): void
+  /** Another way to sign in, rendered beside the password form on `/login` and `/signup`. */
+  authMethod(method: AuthMethod): void
   /** Replaces a core component. Prefer a slot; see `modules.md`. */
   override<Props>(token: Overridable<Props>, component: ComponentType<Props>): void
 }
@@ -47,6 +50,7 @@ export interface UiExtensions {
   recordTabs(objectType: ExtensibleRecordType): readonly RecordTab[]
   recordSidebarCards(objectType: ExtensibleRecordType): readonly RecordSidebarCard[]
   dashboardCards(): readonly DashboardCard[]
+  authMethods(): readonly AuthMethod[]
   componentFor<Props>(token: Overridable<Props>): ComponentType<Props>
 }
 
@@ -70,6 +74,7 @@ interface Accumulator {
   readonly recordTabs: Map<ExtensibleRecordType, RecordTab[]>
   readonly recordSidebarCards: Map<ExtensibleRecordType, RecordSidebarCard[]>
   readonly dashboardCards: DashboardCard[]
+  readonly authMethods: AuthMethod[]
   readonly overrides: OverrideStore
 }
 
@@ -134,6 +139,11 @@ function createModuleContext(
       accumulator.dashboardCards.push(card)
     },
 
+    authMethod(method) {
+      claim(taken, module.id, 'auth.methods', method.id)
+      accumulator.authMethods.push(method)
+    },
+
     override(token, component) {
       if (accumulator.overrides.has(token.key)) {
         throw new UiModuleError(
@@ -158,6 +168,7 @@ export function registerUiModules(modules: readonly UiModule[]): UiExtensions {
     recordTabs: new Map(),
     recordSidebarCards: new Map(),
     dashboardCards: [],
+    authMethods: [],
     overrides: createOverrideStore(),
   }
   const taken = new Set<string>()
@@ -179,6 +190,7 @@ export function registerUiModules(modules: readonly UiModule[]): UiExtensions {
     recordSidebarCards: (objectType) =>
       inSlotOrder(accumulator.recordSidebarCards.get(objectType) ?? []),
     dashboardCards: () => inSlotOrder(accumulator.dashboardCards),
+    authMethods: () => inSlotOrder(accumulator.authMethods),
     componentFor: (token) => accumulator.overrides.get(token),
   }
 }