@owlmeans/client-auth 0.1.18-rc.8 → 0.1.18

package/src/login/i18n.ts

@@ -0,0 +1,29 @@
+
+
+import en from './i18n/en.json' with { type: 'json' }
+import pl from './i18n/pl.json' with { type: 'json' }
+import ru from './i18n/ru.json' with { type: 'json' }
+import be from './i18n/be.json' with { type: 'json' }
+import uk from './i18n/uk.json' with { type: 'json' }
+import es from './i18n/es.json' with { type: 'json' }
+import de from './i18n/de.json' with { type: 'json' }
+import fr from './i18n/fr.json' with { type: 'json' }
+import { i18nHelper } from '@owlmeans/i18n'
+
+/**
+ * The sign-in screen's copy, registered into the `auth` library resource.
+ *
+ * `_addI18n` PUSHES rather than replaces, so this coexists with `@owlmeans/web-client`'s own
+ * `auth` registration (which owns `dispatcher.*` and `surrogate.*`) and the two merge by tier and
+ * priority. Registering here rather than in a UI package is what lets the plain fallback screen
+ * and every styled one read the same keys — so the seven-language rule holds on every path a user
+ * can actually reach, not only the pretty one.
+ */
+i18nHelper.addI18nLib('en', 'auth', en)
+i18nHelper.addI18nLib('pl', 'auth', pl)
+i18nHelper.addI18nLib('ru', 'auth', ru)
+i18nHelper.addI18nLib('be', 'auth', be)
+i18nHelper.addI18nLib('uk', 'auth', uk)
+i18nHelper.addI18nLib('es', 'auth', es)
+i18nHelper.addI18nLib('de', 'auth', de)
+i18nHelper.addI18nLib('fr', 'auth', fr)

package/src/login/index.ts

@@ -1,6 +1,27 @@
+import './i18n.js'
+
 export * from './consts.js'
 export * from './types.js'
+export type * from './env/types.js'
+export type * from './adopt/types.js'
+export type * from './methods/types.js'
+export type * from './resume/types.js'
+export type * from './terms/types.js'
+export type * from './credit/types.js'
+export type * from './surrogate/types.js'
+export type * from './land/types.js'
+export type * from './start/types.js'
 export * from './env.js'
 export * from './adopt.js'
+export * from './methods.js'
+export * from './flow.js'
+export * from './resume.js'
+export * from './terms-config.js'
+export * from './terms.js'
+export * from './credit.js'
+export * from './surrogate.js'
+export * from './screen.js'
 export * from './service.js'
+export * from './start.js'
 export * from './hook.js'
+export * from './land.js'

package/src/login/land/types.ts

@@ -0,0 +1,54 @@
+import type { LoginLandingParams } from '../types.js'
+
+/** Where a finished sign-in (or a pending step) lands. */
+export interface LoginLanding {
+  alias: string
+  params?: LoginLandingParams
+  query?: LoginLandingParams
+  /** The step alias this landing came from, when it came from one. */
+  step?: string
+}
+
+/** Options for {@link LoginService.landAfterLogin}-shaped helpers (./land.js). */
+export interface LandOptions {
+  /** Where to land when nothing else claims the flow. Defaults to `{ alias: HOME }`. */
+  fallback?: LoginLanding
+  /** `false` skips `resumeSuspendedFlow` — the caller already has its own concrete destination. */
+  resume?: boolean
+  /** Skip every step up to and including this alias — the resume point for a step's re-entry. */
+  after?: string
+  /**
+   * Overrides the step/hook timeout for this call. Mainly for tests; production callers leave it
+   * at the default (`LOGIN_STEP_TIMEOUT`).
+   */
+  stepTimeout?: number
+}
+
+/** Where one context's finished sign-in goes: its pending steps, a suspended flow, or the fallback. */
+export interface LoginLandingHelper {
+  /**
+   * Where a finished sign-in should go: the first pending step, else a suspended flow, else the
+   * fallback (ordinarily `HOME`).
+   *
+   * Re-checks `env().surrogate` even though {@link landAfterLogin} already did — this function is
+   * also called directly (e.g. from `useContinueLogin`, after the surrogate window has already
+   * closed), and the check is cheap insurance either way: **no step and no landing hook ever runs
+   * inside the surrogate popup.** It has nothing of its own to collect and nowhere to navigate —
+   * the popup's own `DispatcherHOC` has no `navigate() → HOME` at all.
+   */
+  continueLogin: (opts?: LandOptions) => Promise<LoginLanding>
+  /**
+   * The whole post-sign-in landing decision: run any due landing hooks for a freshly seen token,
+   * then delegate to {@link continueLogin} for where the flow actually goes.
+   *
+   * This is what a plugin that just adopted a token calls in place of the old inline
+   * "`resumeSuspendedFlow` else `HOME`" — `DispatcherHOC`, the supervisor plugin and both Google
+   * plugins all replace their own copy of that logic with this one.
+   */
+  landAfterLogin: (opts?: LandOptions) => Promise<LoginLanding>
+  /**
+   * The absolute URL a landing resolves to — the same shape the supervisor and Google plugins
+   * already build their own `window.location.href` from.
+   */
+  landingUrl: (landing: LoginLanding) => Promise<string>
+}

package/src/login/land.ts

@@ -0,0 +1,149 @@
+import type { AuthService } from '@owlmeans/auth-common'
+import { DISPATCHER } from '@owlmeans/auth'
+import { HOME, memoHelper } from '@owlmeans/context'
+import type { ClientContext } from '@owlmeans/client'
+import type { ClientEntrypoint } from '@owlmeans/client-entrypoint'
+import { DEFAULT_ALIAS as AUTH_ALIAS } from '../consts.js'
+import { ensureLoginService } from './service.js'
+import type { LoginContext, LoginService } from './types.js'
+import type { LandOptions, LoginLanding, LoginLandingHelper } from './land/types.js'
+import { LOGIN_LANDED_STORAGE, LOGIN_STEP_TIMEOUT } from './consts.js'
+import { flowLandingOf } from '@owlmeans/client-flow'
+
+/**
+ * Race a promise against a bound, resolving to `onTimeout` (never rejecting) if the bound wins.
+ *
+ * A synchronous throw from the wrapped call is turned into a rejection by the caller before this
+ * ever sees it, so the only two outcomes here are "settled in time" and "timed out". `onTimeout`
+ * defaults to `undefined` — every existing caller that omits it keeps its old fail-open meaning;
+ * `continueLogin` passes a step's own `required` flag through it so a step that hangs is read the
+ * same way as one that throws.
+ */
+const withTimeout = async <T>(
+  promise: Promise<T>, ms: number, onTimeout?: T
+): Promise<T | undefined> => {
+  let timer: ReturnType<typeof setTimeout> | undefined
+  try {
+    return await Promise.race<T | undefined>([
+      promise,
+      new Promise<T | undefined>(resolve => { timer = setTimeout(() => resolve(onTimeout), ms) }),
+    ])
+  } finally {
+    if (timer != null) {
+      clearTimeout(timer)
+    }
+  }
+}
+
+export const makeLoginLandingHelper = (ctx: LoginContext): LoginLandingHelper => {
+  /**
+   * Run every registered landing hook, once per distinct token.
+   *
+   * The stored token is overwritten BEFORE the hooks run, not after: a hook that throws or hangs
+   * must never make the same token re-run the whole set on the next call, since surviving exactly
+   * that is what the bound-and-swallow contract is for. The raw token string is the marker rather
+   * than a digest of it — it never leaves the browser, and this package already keeps the terms
+   * acceptance marker the same way (`LOGIN_TERMS_STORAGE`).
+   */
+  const runLandingHooks = async (login: LoginService, timeout: number): Promise<void> => {
+    const auth = ctx.service<AuthService>(AUTH_ALIAS)
+    const token = await auth.authenticated()
+    if (token == null) {
+      return
+    }
+
+    let last: string | null = null
+    try {
+      last = window.localStorage.getItem(LOGIN_LANDED_STORAGE)
+    } catch {
+      // Storage can be unavailable (private modes, blocked cookies). Treated as "never landed",
+      // which just re-runs the hooks — the safe direction, same as the terms-acceptance marker.
+    }
+    if (last === token) {
+      return
+    }
+
+    try {
+      window.localStorage.setItem(LOGIN_LANDED_STORAGE, token)
+    } catch { /* nothing to remember if storage was never available */ }
+
+    for (const hook of login.landingHooks()) {
+      await withTimeout(Promise.resolve().then(() => hook.landed(ctx)), timeout).catch(() => undefined)
+    }
+  }
+
+  const continueLogin = async (opts?: LandOptions): Promise<LoginLanding> => {
+    const login = ensureLoginService(ctx)
+    if (login.env().surrogate) {
+      return { alias: DISPATCHER }
+    }
+
+    const timeout = opts?.stepTimeout ?? LOGIN_STEP_TIMEOUT
+    const auth = ctx.service<AuthService>(AUTH_ALIAS)
+    const token = await auth.authenticated()
+
+    if (token != null) {
+      const steps = login.steps()
+      let start = 0
+      if (opts?.after != null) {
+        const index = steps.findIndex(step => step.alias === opts.after)
+        if (index >= 0) {
+          start = index + 1
+        }
+      }
+
+      for (let i = start; i < steps.length; i++) {
+        const step = steps[i]
+        // Registration proves only that some module reached the bundle — the step's own screen may
+        // not be bound in this tree (an older target, a partial import). Skipped, never thrown.
+        if (!ctx.hasEntrypoint(step.entrypoint)) {
+          continue
+        }
+
+        // A step that throws or hangs fails OPEN ("not pending") by default — UNLESS it declared
+        // itself `required`, in which case a broken read must show the step rather than let the
+        // person through it unconfirmed (a Terms box moved here from the sign-in screen).
+        const onBroken = step.required === true
+        const pending = await withTimeout(
+          Promise.resolve().then(() => step.pending(ctx)), timeout, onBroken
+        ).catch(() => onBroken)
+
+        if (pending === true) {
+          return { alias: step.entrypoint, query: await step.query?.(ctx), step: step.alias }
+        }
+      }
+    }
+
+    if (opts?.resume !== false) {
+      const landing = await flowLandingOf(ctx as unknown as ClientContext).resumeSuspendedFlow()
+      if (landing != null) {
+        return { alias: landing.entrypoint, query: landing.query }
+      }
+    }
+
+    return opts?.fallback ?? { alias: HOME }
+  }
+
+  const landAfterLogin = async (opts?: LandOptions): Promise<LoginLanding> => {
+    const login = ensureLoginService(ctx)
+    // Never run a step or a landing hook while THIS document is the surrogate popup — see the note
+    // on `continueLogin`.
+    if (login.env().surrogate) {
+      return { alias: DISPATCHER }
+    }
+
+    await runLandingHooks(login, opts?.stepTimeout ?? LOGIN_STEP_TIMEOUT)
+
+    return continueLogin(opts)
+  }
+
+  const landingUrl = async (landing: LoginLanding): Promise<string> =>
+    await ctx.entrypoint<ClientEntrypoint<string>>(landing.alias).url(
+      { params: landing.params, query: landing.query }, { absolute: true }
+    )
+
+  return { continueLogin, landAfterLogin, landingUrl }
+}
+
+/** The landing helper of a context — one per context. */
+export const loginLandingOf = memoHelper.oncePer(makeLoginLandingHelper)

package/src/login/methods/types.ts

@@ -0,0 +1,32 @@
+import type { LoginScreenConfig } from '@owlmeans/config'
+import type { LoginMethod, LoginMethodContext, LoginMethodSource } from '../types.js'
+
+/** The sign-in methods on offer: the global source registry and the resolution of a screen's list. */
+export interface LoginMethodsHelper {
+  /** Register a source globally — replacing an earlier one of the same alias. */
+  registerMethodSource: (source: LoginMethodSource) => void
+  /** The globally registered sources, in registration order. */
+  listMethodSources: () => LoginMethodSource[]
+  /**
+   * Everything the current environment may be offered, in the order it should be offered in.
+   *
+   * Resolution order matters and is not arbitrary:
+   *
+   * 1. Sources produce candidates. A source that throws is skipped rather than taking the screen
+   *    down — a misconfigured provider list must not remove the sign-in method that does work.
+   * 2. `restricted` candidates are dropped unless the configuration named them, which is what makes
+   *    an operator login opt-in rather than merely unadvertised.
+   * 3. An explicit `methods` list is both a filter AND the order, because an app that bothered to
+   *    list them means that list.
+   */
+  resolveLoginMethods: (
+    ctx: LoginMethodContext, cfg?: LoginScreenConfig, extra?: LoginMethodSource[]
+  ) => LoginMethod[]
+  /**
+   * The method a screen highlights and focuses.
+   *
+   * The first `primary` one, else the first offered. It is highlighted, never started: requirement
+   * one of this whole feature is that nothing leaves the document without a click.
+   */
+  primaryLoginMethod: (methods: LoginMethod[]) => LoginMethod | null
+}

package/src/login/methods.ts

@@ -0,0 +1,109 @@
+import type { LoginMethodConfig, LoginScreenConfig } from '@owlmeans/config'
+import { DEFAULT_METHOD_ORDER } from './consts.js'
+import type { LoginMethod, LoginMethodContext, LoginMethodSource } from './types.js'
+import type { LoginMethodsHelper } from './methods/types.js'
+import { logger } from '@owlmeans/log'
+
+const log = logger('client-auth:login')
+
+/**
+ * The module-global registry of method SOURCES.
+ *
+ * A source, rather than a method, because the two things that offer sign-in methods answer
+ * different questions at different times: the plugin registry knows what code is loaded, and the
+ * OIDC configuration knows what an entity is federated with. Both are answered per render — a
+ * provider list can arrive from the api-config middleware after the first paint.
+ *
+ * Global, like the `AuthenticationPlugin` map it mirrors, because a package registers its source
+ * from a side-effect import that has no context to hang it on. A context-scoped registry exists
+ * alongside it on the login service, and both are merged by `resolveLoginMethods`.
+ */
+const sources: LoginMethodSource[] = []
+
+export const createLoginMethodsHelper = (): LoginMethodsHelper => {
+  const registerMethodSource = (source: LoginMethodSource): void => {
+    const existing = sources.findIndex(candidate => candidate.alias === source.alias)
+    if (existing >= 0) {
+      sources.splice(existing, 1)
+    }
+    sources.push(source)
+  }
+
+  const listMethodSources = (): LoginMethodSource[] => [...sources]
+
+  /** Normalize a config entry, which may be a bare id or a full override object. */
+  const asConfig = (entry: string | LoginMethodConfig): LoginMethodConfig =>
+    typeof entry === 'string' ? { id: entry } : entry
+
+  const merge = (method: LoginMethod, override: LoginMethodConfig | undefined): LoginMethod =>
+    override == null ? method : {
+      ...method,
+      ...(override.label != null ? { label: override.label } : {}),
+      ...(override.i18nKey != null ? { i18nKey: override.i18nKey } : {}),
+      ...(override.icon != null ? { icon: override.icon } : {}),
+      ...(override.order != null ? { order: override.order } : {}),
+      ...(override.emphasis != null ? { emphasis: override.emphasis } : {}),
+      ...(override.params != null ? { params: { ...method.params, ...override.params } } : {}),
+    }
+
+  const resolveLoginMethods = (
+    ctx: LoginMethodContext, cfg?: LoginScreenConfig, extra: LoginMethodSource[] = []
+  ): LoginMethod[] => {
+    const candidates: LoginMethod[] = []
+    for (const source of [...sources, ...extra]) {
+      try {
+        candidates.push(...source.list(ctx))
+      } catch (e) {
+        log.warn('Login method source failed', { source: source.alias, error: e })
+      }
+    }
+
+    const overrides = cfg?.overrides ?? {}
+    const listed = cfg?.methods?.map(asConfig)
+    const listedIds = listed?.map(entry => entry.id).filter((id): id is string => id != null)
+
+    const offered = candidates
+      .filter(method => {
+        const override = overrides[method.id] ?? listed?.find(entry => entry.id === method.id)
+        if (override?.enabled === false || override?.hidden === true) {
+          return false
+        }
+        // A restricted method is offered only where the configuration asked for it — by naming it in
+        // `methods`, or by enabling it in `overrides`. Registering the plugin is deliberately not
+        // enough: an operator login that appears wherever its code happens to be bundled is an
+        // operator login in production.
+        if (method.restricted === true
+          && listedIds?.includes(method.id) !== true
+          && override?.enabled !== true) {
+          return false
+        }
+        return true
+      })
+      .map(method => merge(method, overrides[method.id]))
+
+    if (listedIds != null) {
+      return listedIds
+        .map(id => {
+          const method = offered.find(candidate => candidate.id === id)
+          return method != null ? merge(method, listed?.find(entry => entry.id === id)) : null
+        })
+        .filter((method): method is LoginMethod => method != null)
+    }
+
+    return offered.sort((a, b) => {
+      const order = (a.order ?? DEFAULT_METHOD_ORDER) - (b.order ?? DEFAULT_METHOD_ORDER)
+      return order !== 0 ? order : a.id.localeCompare(b.id)
+    })
+  }
+
+  const primaryLoginMethod = (methods: LoginMethod[]): LoginMethod | null =>
+    methods.find(method => method.emphasis === 'primary') ?? methods[0] ?? null
+
+  return { registerMethodSource, listMethodSources, resolveLoginMethods, primaryLoginMethod }
+}
+
+export const loginMethodsHelper = createLoginMethodsHelper()
+
+/** @deprecated compat:factory-refactor — use `loginMethodsHelper.primaryLoginMethod(…)` */
+export const primaryLoginMethod = (methods: LoginMethod[]): LoginMethod | null =>
+  loginMethodsHelper.primaryLoginMethod(methods)

package/src/login/resume/types.ts

@@ -0,0 +1,24 @@
+import type { LoginOutcome, ResumeAction } from '../consts.js'
+
+/** How a settled sign-in outcome is read: by a screen that stayed put, and by a resuming dispatcher. */
+export interface LoginResumeHelper {
+  /**
+   * The message key a FINISHED sign-in attempt should show, or null when it actually went somewhere.
+   *
+   * A dispatcher may treat `Passed` as "carry on with the ordinary continuation", because it has one.
+   * A screen does not: the user clicked, the document did not move, and nothing rendered — which is
+   * indistinguishable from a broken button, and is exactly how a null authorization URL used to
+   * present itself. Every outcome that leaves the user looking at the same screen therefore has to
+   * say something.
+   */
+  loginAttemptError: (outcome: LoginOutcome | null) => string | null
+  /**
+   * The one reading of a `resume` outcome, shared by every dispatcher.
+   *
+   * Shared because three dispatchers — `web-client`, `web-oidc-rp` and `mui-oidc-rp` — have to agree
+   * on it, and the last time they each held their own copy of a decision they drifted, which is how a
+   * popup came to render the application inside itself in two packages at once. It is also the whole
+   * rule, so it is testable without a DOM.
+   */
+  resumeAction: (outcome: LoginOutcome) => ResumeAction
+}

package/src/login/resume.ts

@@ -0,0 +1,45 @@
+import { LoginOutcome, ResumeAction } from './consts.js'
+import type { LoginResumeHelper } from './resume/types.js'
+
+export const createLoginResumeHelper = (): LoginResumeHelper => {
+  const loginAttemptError = (outcome: LoginOutcome | null): string | null => {
+    switch (outcome) {
+      case LoginOutcome.Gesture:
+      case LoginOutcome.Blocked:
+        // The window never opened. That is the popup blocker, and it has its own copy.
+        return 'login.error.blocked'
+      case LoginOutcome.Failed:
+      case LoginOutcome.Passed:
+        return 'login.error.failed'
+      default:
+        // Handled, Redirected and Orphaned all did something; Orphaned reports itself elsewhere.
+        return null
+    }
+  }
+
+  const resumeAction = (outcome: LoginOutcome): ResumeAction => {
+    switch (outcome) {
+      case LoginOutcome.Handled:
+      case LoginOutcome.Redirected:
+        return ResumeAction.Stop
+      case LoginOutcome.Orphaned:
+      case LoginOutcome.Failed:
+      case LoginOutcome.Gesture:
+      case LoginOutcome.Blocked:
+        return ResumeAction.Render
+      default:
+        return ResumeAction.Navigate
+    }
+  }
+
+  return { loginAttemptError, resumeAction }
+}
+
+export const loginResumeHelper = createLoginResumeHelper()
+
+/** @deprecated compat:factory-refactor — use `loginResumeHelper.loginAttemptError(…)` */
+export const loginAttemptError = (outcome: LoginOutcome | null): string | null =>
+  loginResumeHelper.loginAttemptError(outcome)
+
+/** @deprecated compat:factory-refactor — use `loginResumeHelper.resumeAction(…)` */
+export const resumeAction = (outcome: LoginOutcome): ResumeAction => loginResumeHelper.resumeAction(outcome)

package/src/login/screen.tsx

@@ -0,0 +1,140 @@
+import { useCallback, useState, type CSSProperties, type FC, type ReactNode } from 'react'
+import { useContext } from '@owlmeans/client'
+import type { CommonConfig } from '@owlmeans/config'
+import type { LoginContext, LoginMethod, LoginScreenProps, LoginService } from './types.js'
+import type { TermsSentencePart } from './terms/types.js'
+import { LOGIN_SERVICE } from './consts.js'
+import { loginMethodsHelper } from './methods.js'
+import { loginTermsHelper } from './terms.js'
+import { resolveCredit } from './credit.js'
+import { box, page } from './consts.local.js'
+
+const renderParts = (parts: TermsSentencePart[]): ReactNode =>
+  parts.map((part, index) => part.href != null
+    ? <a key={index} href={part.href} target="_blank" rel="noreferrer noopener">{part.text}</a>
+    : <span key={index}>{part.text}</span>)
+
+const button = (emphasis?: string): CSSProperties => ({
+  display: 'block', width: '100%', marginTop: '.5rem', padding: '.625rem 1rem',
+  fontSize: '1rem', cursor: 'pointer', borderRadius: '.375rem',
+  border: '1px solid currentColor',
+  ...(emphasis === 'primary' ? { fontWeight: 600 } : {}),
+})
+
+/**
+ * The sign-in screen every application gets, whether or not it registered a styled one.
+ *
+ * It exists because a relying party must render SOMETHING rather than start a flow on its own, and
+ * a relying party may not depend on a UI family. So this is deliberately plain: raw elements and
+ * inline styles, no Tailwind class that a consumer's stylesheet would have to scan for, no shadcn
+ * primitive a consumer would have to vendor. An application that registers a real screen through
+ * `login().registerScreen(...)` never sees it.
+ *
+ * Because it is the floor rather than the design, it still has to be correct: it offers the same
+ * methods, enforces the same terms confirmation, centres the same way, and renders the same
+ * credit line.
+ */
+export const FallbackLoginScreen: FC<LoginScreenProps> = props => {
+  const context = useContext() as unknown as LoginContext
+  const t = props.translate ?? ((_key: string, defaultValue: string) => defaultValue)
+  const cfg = props.config ?? (context.cfg as CommonConfig).security?.auth?.login
+  const brand = (context.cfg as CommonConfig).brand
+
+  const login = context.service<LoginService>(LOGIN_SERVICE)
+  const env = login.env()
+  const resolved = loginTermsHelper.resolveTerms(props.terms ?? cfg?.terms)
+  const credit = resolveCredit(cfg?.credit, brand, context.cfg.service)
+  const resolveLabel = loginTermsHelper.termsLabelResolver(t, props.locale)
+  const deferred = loginTermsHelper.termsDeferred(context)
+
+  const [accepted, setAccepted] = useState(() => loginTermsHelper.termsAccepted(resolved))
+  const [attempted, setAttempted] = useState(false)
+
+  const all = login.methods({ context, env })
+  const methods = typeof props.methods === 'function'
+    ? props.methods(all)
+    : props.methods ?? all
+  const primary = loginMethodsHelper.primaryLoginMethod(methods)
+
+  const blocked = resolved != null && resolved.required && !deferred && !accepted
+
+  const select = useCallback((method: LoginMethod) => {
+    if (blocked) {
+      setAttempted(true)
+      return
+    }
+    void method.start({ context, env })
+  }, [blocked, context, env])
+
+  const onAccept = useCallback((value: boolean) => {
+    setAccepted(value)
+    setAttempted(false)
+    loginTermsHelper.acceptTerms(resolved, value)
+  }, [resolved])
+
+  return <div data-login-screen style={page}><div style={box}>
+    <h1 style={{ fontSize: '1.25rem', marginBottom: '.25rem' }}>
+      {props.title ?? t('login.title', 'Sign in')}
+    </h1>
+    <p style={{ opacity: .75, marginTop: 0 }}>
+      {props.subtitle ?? t('login.subtitle', 'Choose how you would like to continue.')}
+    </p>
+
+    {methods.length < 1
+      ? <p role="status">{t('login.empty', 'No sign-in method is configured for this application.')}</p>
+      : methods.map(method => <button
+        key={method.id} type="button" data-login-method={method.id}
+        // `aria-disabled`, never `disabled`: a disabled button swallows the click, so a user who
+        // has not confirmed the terms would press it and be told nothing at all.
+        aria-disabled={blocked} data-blocked={blocked ? 'true' : undefined}
+        style={{ ...button(method.emphasis), opacity: blocked ? .6 : 1 }}
+        autoFocus={method.id === primary?.id}
+        onClick={() => select(method)}
+      >
+        {method.label ?? t(`login.method.${method.i18nKey ?? method.id}`, method.id)}
+      </button>)}
+
+    {/* When a registered, bound step confirms the terms instead, this screen shows neither the
+        checkbox nor its "last updated" line — that document is agreed to over there, and this
+        screen is never `blocked` on it. The privacy notice below still renders either way: it was
+        never inside the consented label, so deferring the checkbox does not touch it. */}
+    {resolved != null && !deferred && <p style={{ marginTop: '1rem', fontSize: '.875rem' }}>
+      {/* The ONLY place `data-login-terms` appears — never duplicated onto a second control. */}
+      <label>
+        <input
+          type="checkbox" checked={accepted} data-login-terms
+          onChange={event => onAccept(event.target.checked)}
+        />{' '}
+        {renderParts(loginTermsHelper.termsSentence(
+          t('login.terms.accept', 'I have read and agree to the {{documents}}.'),
+          resolved, props.locale, resolveLabel
+        ))}
+      </label>
+    </p>}
+
+    {resolved?.revisedAt != null && !deferred && <p data-login-revised style={{ fontSize: '.75rem', opacity: .7 }}>
+      {t('login.terms.revised', 'Last updated: {{date}}').split('{{date}}').join(resolved.revisedAt)}
+    </p>}
+
+    {/* Outside the checkbox's label: a privacy disclosure is not something it consents to. */}
+    {resolved != null && <p data-login-privacy style={{ fontSize: '.875rem' }}>
+      {renderParts(loginTermsHelper.termsSentence(
+        t('login.terms.notice', 'How we handle your personal data: {{notices}}.'),
+        resolved, props.locale, resolveLabel
+      ))}
+    </p>}
+
+    {attempted && blocked && resolved != null && <p role="alert" style={{ color: '#b00', fontSize: '.875rem' }}>
+      {renderParts(loginTermsHelper.termsSentence(
+        t('login.terms.required', 'Please confirm the {{documents}} to continue.'),
+        resolved, props.locale, resolveLabel
+      ))}
+    </p>}
+
+    {props.footer ?? <p style={{ marginTop: '2rem', fontSize: '.75rem', opacity: .7 }}>
+      {credit.poweredBy && <span>{t('login.credit.powered', 'Powered by OwlMeans')}</span>}
+      {credit.poweredBy && credit.line != null && ' · '}
+      {credit.line}
+    </p>}
+  </div></div>
+}