@akinon/pz-theme 2.0.95-rc.0 → 2.0.95

package/src/blocks/auth-field-block.tsx

@@ -20,7 +20,7 @@ import { BlockRendererProps } from './block-renderer-registry';
  * form owns those. Standalone (outside any form) it still renders, but
  * nothing collects its value, which the designer sees immediately.
  *
- * Properties: fieldType, label, placeholder, showLabel, required, and for
+ * Properties: fieldType, label, placeholder, showLabel, required, autoComplete, and for
  * a `gender` field the two option captions (femaleLabel, maleLabel).
  * Parts: field, label, input, error.
  */
@@ -143,6 +143,16 @@ const AuthFieldBlock = ({
       : preset.type;
 
   const label = prop('label', preset.label);
+  /**
+   * What a password manager is told this box is for.
+   *
+   * The preset was compiled in, which made one screen wrong on purpose: the
+   * `password` preset says `current-password`, so a composed SIGN-UP or a
+   * reset screen told the manager to offer a saved password instead of
+   * generating a new one, and what the shopper then typed was never saved.
+   * Absent keeps the preset, so every published field is untouched.
+   */
+  const autoComplete = prop('autoComplete', '').trim() || preset.autoComplete;
   const placeholder = prop('placeholder', '');
   const showLabel = readToggle(
     block.properties?.showLabel,
@@ -216,7 +226,7 @@ const AuthFieldBlock = ({
          */
         <select
           name={controlName}
-          autoComplete={preset.autoComplete}
+          autoComplete={autoComplete}
           defaultValue=""
           aria-label={showLabel ? undefined : label}
           aria-invalid={errorMessage ? true : undefined}
@@ -235,7 +245,7 @@ const AuthFieldBlock = ({
         <input
           type={controlType}
           name={controlName}
-          autoComplete={preset.autoComplete}
+          autoComplete={autoComplete}
           placeholder={placeholder || undefined}
           aria-label={showLabel ? undefined : label}
           aria-invalid={errorMessage ? true : undefined}

package/src/blocks/auth-flow-block.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import React, { useEffect } from 'react';
+import { useSession } from 'next-auth/react';
 import { getResponsiveValue, partAttrs } from '../utils';
 import {
   ActiveAuthStepContext,
   AuthFlowIdContext,
-  DEFAULT_AUTH_FLOW_ID,
   goBackAuthStep,
   registerAuthFlowMount,
   useAuthFlowState
@@ -74,9 +74,33 @@ const AuthFlowBlock = ({
       getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
     );
 
-  const flowId = prop('flowId', '').trim() || DEFAULT_AUTH_FLOW_ID;
+  /**
+   * The name this journey answers to on the bus.
+   *
+   * Authored, it is shared: two flows carrying the same name show the same step
+   * — deliberate for one journey rendered twice, and for a trigger outside the
+   * flow that names `<flowId>:<step>`.
+   *
+   * Empty, it is the BLOCK's own, because the alternative was a collision the
+   * moment a brand did what the composition invites: a journey in the header
+   * drawer and a second one in a tab or a page body both fell back to one
+   * shared name, so opening the drawer on "register" moved the page's journey
+   * with it, and closing the drawer reset it. `DEFAULT_AUTH_FLOW_ID` stays the
+   * fallback for controls that know no flow at all — see `resolveAuthStepTarget`
+   * — so a composition that wants to be reachable that way names itself.
+   */
+  const flowId = prop('flowId', '').trim() || `flow-${block.id}`;
   const initialStep = prop('initialStep', '').trim();
   const previewStep = prop('previewStep', '').trim();
+  /**
+   * The step a shopper who is ALREADY signed in lands on.
+   *
+   * The state picks the step, which is the flow's whole idea — so a member who
+   * opens the drawer gets "Hoş geldin / Hesabım / Çıkış" composed out of
+   * ordinary blocks instead of the login form they have no use for. Empty
+   * keeps the historical behaviour: the flow does not care about the session.
+   */
+  const signedInStep = prop('signedInStep', '').trim();
   const backLabel = prop('backLabel', 'Back');
   const showBack = readToggle(
     block.properties?.showBack,
@@ -92,6 +116,13 @@ const AuthFlowBlock = ({
   );
 
   const flowState = useAuthFlowState(isDesigner ? '' : flowId);
+  const { status } = useSession();
+  /**
+   * `loading` is not treated as signed in: the flow would open on the member
+   * step for a guest and then swap. The other way round — a member seeing the
+   * login step for a beat — is the state they are being moved out of anyway.
+   */
+  const isSignedIn = status === 'authenticated' && !isDesigner;
 
   useEffect(() => {
     if (isDesigner) return undefined;
@@ -124,9 +155,20 @@ const AuthFlowBlock = ({
       if (selected) return stepKeyOf(selected, currentBreakpoint);
     }
 
+    /**
+     * A step the shopper NAVIGATED to still wins over the member step: a
+     * signed-in shopper who taps "change password" inside the journey is
+     * asking for that step, and answering with the welcome card would be the
+     * flow overruling them. The member step is the ENTRY, so it only leads
+     * while the bus has nothing to say.
+     */
     const candidates = isDesigner
       ? [previewStep, initialStep]
-      : [flowState?.active ?? '', initialStep];
+      : [
+          flowState?.active ?? '',
+          ...(isSignedIn ? [signedInStep] : []),
+          initialStep
+        ];
 
     for (const candidate of candidates) {
       if (candidate && stepKeys.includes(candidate)) return candidate;

package/src/blocks/auth-form-block.tsx

@@ -1,16 +1,17 @@
 'use client';
 
-import React, { useContext, useState } from 'react';
+import React, { useContext, useRef, useState } from 'react';
 import NextLink from 'next/link';
-import { useRouter } from 'next/navigation';
-import { signIn } from 'next-auth/react';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { signIn, useSession } from 'next-auth/react';
 import { useLocalization } from '@akinon/next/hooks';
-import { getResponsiveValue, partAttrs } from '../utils';
+import { getResponsiveValue, partAttrs, resolveOption } from '../utils';
 import {
   AuthFieldErrors,
   AuthFieldErrorsProvider,
   clearAuthFieldError,
-  collectAuthFieldErrors
+  collectAuthFieldErrors,
+  focusFirstAuthFieldError
 } from '../auth/auth-field-errors';
 import {
   clearFormSubmitState,
@@ -20,61 +21,58 @@ import {
   AuthFormErrorProvider,
   containsAuthErrorBlock
 } from '../auth/form-error-context';
+import {
+  AuthFormStateProvider,
+  AuthFormStateValue,
+  showsInFormState
+} from '../auth/form-state-context';
 import { emitCommerceEvent } from '../utils/analytics';
 import { readToggle } from './product-block-utils';
 import { closeAllModals } from '../overlays/overlay-bus';
+import {
+  useHostModalCloser,
+  useModalHostId
+} from '../overlays/modal-host-context';
 import {
   AuthFlowIdContext,
   resolveAuthStepTarget,
   setAuthStep
 } from '../auth/auth-flow-bus';
 import { renderComposedChildren } from './render-composed-children';
+import {
+  authFormMessage,
+  readAuthError,
+  splitByKnownFields
+} from '../auth/read-auth-error';
+import {
+  AUTH_AFTER_SIGN_IN_MODES,
+  AuthAfterSignIn,
+  resolveAuthDestination,
+  resolveSignedInDestination
+} from '../auth/auth-destination';
+import {
+  AuthCaptchaApi,
+  AuthCaptchaHost,
+  AuthCaptchaSlot,
+  containsCaptchaBlock
+} from '../auth/auth-captcha';
 import { BlockRendererProps } from './block-renderer-registry';
 
-/**
- * Extracts a readable message out of the next-auth error string. pz brands
- * serialise an AuthError[] into `error`, but a plain string is also possible,
- * so both shapes are handled.
- */
-const readAuthError = (error?: string | null): string => {
-  if (!error) return '';
-
-  try {
-    const parsed = JSON.parse(error);
-
-    if (!Array.isArray(parsed)) return String(error);
-
-    const messages: string[] = [];
-
-    parsed.forEach((entry) => {
-      const data = (entry as { data?: unknown })?.data;
-
-      if (Array.isArray(data)) {
-        data.forEach((item) => {
-          if (typeof item === 'string') {
-            messages.push(item);
-          } else if (item && typeof item === 'object') {
-            const value = (item as { value?: unknown }).value;
-            if (typeof value === 'string') messages.push(value);
-          }
-        });
-      } else if (typeof data === 'string') {
-        messages.push(data);
-      }
-    });
-
-    return messages.join(' ') || String(error);
-  } catch {
-    return String(error);
-  }
-};
-
 /**
  * Names a composed field must not take, because the form and next-auth already
  * mean something by them. A local copy of the register form's set, kept local
  * for the same reason `readAuthError` is: making it an export would change a
  * shipped module's public surface.
  */
+/**
+ * What a form does for a shopper who is already signed in. Named here rather
+ * than in `auth-destination.ts` because it is a rendering decision, not a
+ * destination one — the register form and the OTP form read the same list.
+ */
+export const WHEN_SIGNED_IN_MODES = ['form', 'message', 'redirect'] as const;
+
+export type WhenSignedIn = (typeof WHEN_SIGNED_IN_MODES)[number];
+
 const RESERVED_SUBMIT_KEYS = new Set([
   'formType',
   'locale',
@@ -155,10 +153,56 @@ const AuthFormBlock = ({
       getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
     );
 
+  /**
+   * The modal this form is inside, if any. Read before the destination is
+   * resolved, because it decides that destination's default: a sign-in inside
+   * a drawer is a detour from the page the shopper is on, so `stay` is right
+   * there and `fixed` — the historical push — is right on a page.
+   */
+  const hostModalId = useModalHostId();
+  /**
+   * Whether finishing closes the modal this form is inside. On here because a
+   * sign-in leaves nothing to read; the forms whose success state IS the point
+   * ("check your inbox") default to off. See `useHostModalCloser`.
+   */
+  const closeHostModalOnSuccess = readToggle(
+    block.properties?.closeHostModalOnSuccess,
+    currentBreakpoint,
+    true
+  );
+  const closeHostModal = useHostModalCloser(closeHostModalOnSuccess);
+
   const rawMode = prop('mode', 'login');
   const mode = rawMode === 'register' ? 'register' : 'login';
   const providerId = prop('providerId', 'default');
   const callbackUrl = prop('callbackUrl', '/');
+  /**
+   * Where a finished sign-in leaves the shopper. `fixed` is the historical
+   * answer and stays the default, so no published composition moves; a drawer
+   * wants `stay` and a login PAGE wants `return`. See `auth/auth-destination`.
+   */
+  const afterSignIn = resolveOption<AuthAfterSignIn>(
+    block.properties?.afterSignIn,
+    currentBreakpoint,
+    'fixed',
+    AUTH_AFTER_SIGN_IN_MODES as unknown as AuthAfterSignIn[]
+  );
+  /**
+   * What a shopper who is ALREADY signed in sees here.
+   *
+   * `form` is what shipped, and it is a dead end: a back button after signing
+   * in, a bookmarked /auth or a second tab shows a member a login form, and
+   * re-submitting it re-authenticates a live session. `message` says so;
+   * `redirect` takes them where they were going.
+   */
+  const whenSignedIn = resolveOption<WhenSignedIn>(
+    block.properties?.whenSignedIn,
+    currentBreakpoint,
+    'form',
+    WHEN_SIGNED_IN_MODES as unknown as WhenSignedIn[]
+  );
+  const signedInLabel = prop('signedInLabel', 'You are already signed in.');
+  const signedInHref = prop('signedInHref', '/account');
   const submitLabel = prop(
     'submitLabel',
     mode === 'register' ? 'Create account' : 'Log in'
@@ -167,6 +211,31 @@ const AuthFormBlock = ({
   // the request is in flight, which is what every published block does today.
   const busyLabel = prop('busyLabel', '');
   const errorLabel = prop('errorLabel', 'Authentication failed.');
+  /**
+   * What the shopper is told when commerce escalates to a captcha after too
+   * many attempts. Nothing in this theme can ANSWER the challenge yet, so the
+   * least this can do is name it — the alternative, which shipped, was the
+   * literal `[{"type":"captcha"}]` in the error slot.
+   */
+  const captchaLabel = prop(
+    'captchaLabel',
+    'Please complete the security check and try again.'
+  );
+  /**
+   * Whether this form offers the security check commerce escalates to.
+   *
+   * Off by default, and not because the challenge is optional: `useCaptcha`
+   * fetches the site key on mount, and a storefront whose commerce never
+   * escalates should not pay a request per auth form for a widget it will
+   * never show. A brand that IS abuse-protected turns it on once, places a
+   * Captcha block where the challenge should appear (or lets the form draw it
+   * above the submit), and composed login stops dead-ending.
+   */
+  const showCaptcha = readToggle(
+    block.properties?.showCaptcha,
+    currentBreakpoint,
+    false
+  );
   const showLabels = readToggle(
     block.properties?.showLabels,
     currentBreakpoint,
@@ -188,9 +257,16 @@ const AuthFormBlock = ({
    * Empty keeps the URL, so every published form behaves as before.
    */
   const forgotPasswordStepTarget = prop('forgotPasswordStepTarget', '').trim();
+  /**
+   * `register`, not `registration`: the credentials provider resolves the
+   * endpoint as `user[formType]` and the core url map has only `register`, so
+   * the old default POSTed the sign-up to `${commerceUrl}undefined`. A brand
+   * whose own provider names the segment differently still says so here — that
+   * is what the property is for.
+   */
   const formType =
     mode === 'register'
-      ? prop('registerFormType', 'registration')
+      ? prop('registerFormType', 'register')
       : prop('loginFormType', 'login');
   // Off by default: a form on a plain auth page must not start closing modals
   // it does not live in. Compositions inside a drawer turn it on so a login
@@ -222,6 +298,25 @@ const AuthFormBlock = ({
   );
 
   const router = useRouter();
+  const search = useSearchParams();
+  const pathname = usePathname();
+  const { status } = useSession();
+  /**
+   * `loading` counts as a guest on purpose. The opposite — withholding the
+   * form until the session is known — shows every shopper an empty panel for
+   * the first client render; this way the worst case is a member seeing the
+   * form for a beat, which is the state they are being moved out of anyway.
+   */
+  const isSignedIn = status === 'authenticated' && !isDesigner;
+  const destination = resolveAuthDestination({
+    mode: afterSignIn,
+    authored: callbackUrl,
+    search,
+    // A sign-in inside a drawer is a detour: a destination that names nowhere
+    // in particular means there is nowhere to go. An authored one still wins.
+    inModal: Boolean(hostModalId),
+    pathname
+  });
   const { locale, defaultLocaleValue } = useLocalization();
   const contextFlowId = useContext(AuthFlowIdContext);
   const forgotPasswordStep = resolveAuthStepTarget(
@@ -239,6 +334,16 @@ const AuthFormBlock = ({
   // Per FIELD, as opposed to `error` above, which is what the auth backend
   // answered about the attempt as a whole.
   const [fieldErrors, setFieldErrors] = useState<AuthFieldErrors>({});
+  /**
+   * The security check's api, kept in a ref rather than in state: the form
+   * reads `validated` and `validate` at SUBMIT time, and re-rendering the
+   * whole form every time the widget changes its mind would be a re-render for
+   * nothing. `AuthCaptchaHost` pushes it here.
+   */
+  const captchaRef = useRef<AuthCaptchaApi | null>(null);
+  const holdCaptchaApi = React.useCallback((api: AuthCaptchaApi) => {
+    captchaRef.current = api;
+  }, []);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const setField = (key: keyof typeof values) => (
@@ -280,6 +385,31 @@ const AuthFormBlock = ({
     return () => clearFormSubmitState(formHtmlId);
   }, [formHtmlId, isSubmitting]);
 
+  /**
+   * A shopper who is already signed in, taken where they were going.
+   *
+   * `replace`, not `push`: the login screen is not a place to come back to
+   * with the browser's Back button — that is precisely the loop that shows a
+   * member a login form again.
+   */
+  React.useEffect(() => {
+    if (!isSignedIn || whenSignedIn !== 'redirect') return;
+
+    router.replace(resolveSignedInDestination(signedInHref, search));
+  }, [isSignedIn, whenSignedIn, signedInHref, router, search]);
+
+  /**
+   * The form's contents, wrapped so a Captcha block (or the form's own slot)
+   * can reach the challenge — and left exactly as they were when the form does
+   * not offer one, which is every published composition.
+   */
+  const withCaptcha = (contents: React.ReactNode) =>
+    showCaptcha ? (
+      <AuthCaptchaHost onApi={holdCaptchaApi}>{contents}</AuthCaptchaHost>
+    ) : (
+      contents
+    );
+
   const handleInput = (event: React.FormEvent<HTMLFormElement>) => {
     const target = event.target as { name?: string } | null;
 
@@ -294,6 +424,18 @@ const AuthFormBlock = ({
 
     if (isDesigner || isSubmitting) return;
 
+    /**
+     * A live session must not be re-authenticated. Enforced whatever the
+     * `whenSignedIn` policy is: a composition left on `form` still has a form
+     * on screen, and submitting it would swap one valid session for another
+     * for no reason — with the shopper's password on the wire again.
+     */
+    if (isSignedIn) {
+      setError(signedInLabel);
+
+      return;
+    }
+
     // Before anything is sent: the form carries `noValidate`, so nothing else
     // is going to stop an empty submit, and nothing else would have told the
     // shopper WHICH field is the problem.
@@ -347,12 +489,53 @@ const AuthFormBlock = ({
     setIsSubmitting(true);
 
     try {
-      const response = await signIn(providerId, {
-        // After the payload: these decide whether next-auth answers at all.
-        ...payload,
-        redirect: false,
-        callbackUrl
-      });
+      /**
+       * One attempt. Called twice at most: a captcha escalation is answered
+       * and the same body is sent again, which is what the brands' own views
+       * do — the shopper solved the challenge, so asking them to press the
+       * button a second time would be the storefront's failure, not theirs.
+       */
+      const attempt = (solvedNow?: boolean) =>
+        signIn(providerId, {
+          // Sent only while the form offers a challenge, so a storefront
+          // without one keeps posting exactly the body it posts today.
+          ...(showCaptcha
+            ? {
+                captchaValidated:
+                  solvedNow ?? captchaRef.current?.validated ?? false
+              }
+            : null),
+          // After the payload: these decide whether next-auth answers at all.
+          ...payload,
+          redirect: false,
+          callbackUrl
+        });
+
+      let response = await attempt();
+      let reading = splitByKnownFields(
+        readAuthError(signInErrorDetail(response), { captcha: captchaLabel }),
+        form
+      );
+
+      if (reading.hasCaptchaChallenge && showCaptcha) {
+        // `validate` reveals the widget and resolves false the first time;
+        // once the shopper has solved it the hook validates the answer and
+        // resolves true, and only then is there any point in retrying.
+        const solved = await captchaRef.current?.validate();
+
+        if (solved) {
+          // `true`, not the ref: what `validate` just resolved IS the answer, and
+          // the ref only catches up on the host's next render — which may not
+          // have happened by the time this retry goes out.
+          response = await attempt(true);
+          reading = splitByKnownFields(
+            readAuthError(signInErrorDetail(response), {
+              captcha: captchaLabel
+            }),
+            form
+          );
+        }
+      }
 
       if (!response || response.error) {
         const errorDetail = signInErrorDetail(response);
@@ -368,7 +551,18 @@ const AuthFormBlock = ({
           });
         }
 
-        setError(readAuthError(errorDetail) || errorLabel);
+        // Field-level refusals ("no account with this e-mail") go under the
+        // field, the way client-side validation already does; only what
+        // belongs to the form as a whole stays above it.
+        //
+        // `reading` is the same refusal `main` read with `readAuthError`, only
+        // already split by field — `splitByKnownFields` wraps that very call
+        // above, and `authFormMessage` keeps `errorLabel` as its fallback. So
+        // the message a shopper sees is unchanged for a form-level refusal and
+        // moves under the field for one that names a field.
+        setFieldErrors((current) => ({ ...current, ...reading.fieldMessages }));
+        focusFirstAuthFieldError(form, reading.fieldMessages);
+        setError(authFormMessage(reading, errorLabel));
 
         return;
       }
@@ -382,9 +576,38 @@ const AuthFormBlock = ({
         emitCommerceEvent('login', { method: providerId });
       }
 
+      /**
+       * The surface this form finished inside.
+       *
+       * Closing the modal it is IN is the default because it is never a
+       * surprise: a shopper who signed in inside the drawer is done with the
+       * drawer. `closeModalsOnSuccess` keeps its own, wider meaning — close
+       * EVERY open modal — for a composition that authored it, which is what a
+       * form nested two overlays deep needs.
+       *
+       * The live GANT drawer is why the default had to change: its OTP form has
+       * the toggle on and its login and register forms do not, so signing in
+       * with an e-mail left the drawer covering the page.
+       */
+      /**
+       * Both, not either: a composition that ticked the legacy toggle asked
+       * for "every open modal", and the wide close is a superset — so the
+       * narrow one runs unconditionally and simply finds nothing left to do.
+       * Sequencing them the other way round (an `else`) would have left every
+       * already-published drawer on the wide branch forever, which is the one
+       * behaviour this family exists to stop.
+       */
       if (closeModalsOnSuccess) closeAllModals();
+      closeHostModal();
+
+      // The new session has to reach the page either way; in `stay` mode this
+      // refresh IS the whole navigation.
       router.refresh();
-      router.push(callbackUrl);
+
+      // Our own resolved path rather than next-auth's echo of it: the response
+      // url is whatever we handed in, and this one has been through the
+      // same-origin check. `null` is `stay` — there is nowhere to go.
+      if (destination) router.push(destination);
     } catch {
       setError(errorLabel);
     } finally {
@@ -517,9 +740,33 @@ const AuthFormBlock = ({
    * be embedding the storefront — and every copy was a place a new message
    * field had to be remembered.
    */
+  /**
+   * What the composition's Form State containers read.
+   *
+   * A sign-in has no success SCREEN — it is in, and the page moves on — so the
+   * screen here is always the form itself; what a composition can scope to is
+   * the submission running and the refusal, which is what a "signing you in…"
+   * panel and a designed error box need.
+   */
+  const formStateValue: AuthFormStateValue = {
+    screen: 'form',
+    busy: isSubmitting,
+    hasError: Boolean(error)
+  };
+
   const renderChildren = () =>
     renderComposedChildren({
-      blocks: childBlocks,
+      // A child that is not a state container is shared chrome and always
+      // shows; see `auth/form-state-context.tsx`.
+      blocks: childBlocks.filter((childBlock) =>
+        showsInFormState({
+          block: childBlock,
+          state: formStateValue,
+          isDesigner,
+          selectedBlockId,
+          currentBreakpoint
+        })
+      ),
       placeholderId,
       sectionId,
       isDesigner,
@@ -527,6 +774,25 @@ const AuthFormBlock = ({
       currentBreakpoint
     });
 
+  /**
+   * Told, rather than shown a form they cannot use. The `redirect` policy has
+   * this too, for the beat before the navigation lands — and for a shopper
+   * whose browser refuses it.
+   */
+  if (isSignedIn && whenSignedIn !== 'form') {
+    return (
+      <div
+        data-auth-form=""
+        className="w-full"
+        data-auth-form-state="signed-in"
+        {...partAttrs('signed-in')}
+        role="status"
+      >
+        {signedInLabel}
+      </div>
+    );
+  }
+
   if (isComposed) {
     /**
      * The composed form: children carry the fields (native inputs named by
@@ -535,9 +801,14 @@ const AuthFormBlock = ({
      * the designer wires their own CTA.
      */
     const errorIsAuthored = containsAuthErrorBlock(childBlocks);
+    // The form draws the widget only when the composition did not place a
+    // Captcha block — same relationship the built-in error line has with a
+    // Form Error block.
+    const captchaIsAuthored = containsCaptchaBlock(childBlocks);
 
     return (
       <AuthFormErrorProvider value={error}>
+        <AuthFormStateProvider value={formStateValue}>
         <AuthFieldErrorsProvider value={fieldErrors}>
           <form
             id={formHtmlId || undefined}
@@ -559,7 +830,13 @@ const AuthFormBlock = ({
               gap: 'var(--auth-form-gap, 12px)'
             }}
           >
-            {renderChildren()}
+            {withCaptcha(
+              <>
+                {renderChildren()}
+
+                {!captchaIsAuthored && <AuthCaptchaSlot />}
+              </>
+            )}
 
             {forgotPasswordControl}
 
@@ -595,6 +872,7 @@ const AuthFormBlock = ({
             )}
           </form>
         </AuthFieldErrorsProvider>
+        </AuthFormStateProvider>
       </AuthFormErrorProvider>
     );
   }
@@ -655,6 +933,11 @@ const AuthFormBlock = ({
 
       {forgotPasswordControl}
 
+      {/* A childless form has nowhere for a Captcha block to be, so it draws
+          the challenge itself — above its own submit, where the brands' own
+          views put it. */}
+      {withCaptcha(<AuthCaptchaSlot />)}
+
       {error && (
         <div data-auth-form-error="" {...partAttrs('error')} role="alert">
           {error}