create-ailk 0.25.1 → 0.26.0

package/templates/apps/web/app/[locale]/(auth)/sign-up/__tests__/sign-up-card.test.tsx

@@ -17,11 +17,13 @@ import messages from "../../../../../messages/en.json";
 
 const mockSignUpEmail = jest.fn();
 const mockSignInSocial = jest.fn();
+const mockFetch = jest.fn();
 jest.mock("better-auth/react", () => ({
   __esModule: true,
   createAuthClient: () => ({
     signUp: { email: (...args: unknown[]) => mockSignUpEmail(...args) },
     signIn: { social: (...args: unknown[]) => mockSignInSocial(...args) },
+    $fetch: (...args: unknown[]) => mockFetch(...args),
   }),
 }));
 
@@ -38,13 +40,11 @@ function props(overrides: Partial<SignUpCardProps> = {}): SignUpCardProps {
     providers: ["google"],
     method: "password",
     next: "/account",
-    signInHref: "/sign-in",
+    prospect: { prompt: "Already have an account?", linkLabel: "Sign in", href: "/sign-in" },
+    footnote: <span>You acknowledge our terms.</span>,
     labels: {
-      signUpHeading: "Create your account",
-      signUpSubhead: "",
+      signUpHeading: "Sign up",
       signUpSubmit: "Sign up",
-      signUpFooterPrompt: "Already have an account?",
-      signUpFooterLink: "Sign in",
       ssoPrefix: "Continue with",
       google: "Google",
       github: "GitHub",
@@ -201,3 +201,109 @@ describe("provider buttons are gated too (AC-3)", () => {
     expect(document.cookie).toBe("");
   });
 });
+
+describe("the magic-link method (#9667 AC-3)", () => {
+  const linkProps = (overrides: Partial<SignUpCardProps> = {}) =>
+    props({
+      method: "magic-link",
+      labels: {
+        ...props().labels,
+        magicLinkSubmit: messages.auth.magicLinkSubmit,
+        emailLinkDivider: messages.auth.orContinue,
+      },
+      errorCallbackURL: "/sign-up",
+      linkLabels: {
+        sentHeading: messages.auth.sentHeading,
+        sentSubhead: messages.auth.sentSubhead,
+        sentBody: messages.auth.signUpLinkSentBody,
+        back: messages.auth.signUpLinkBack,
+        failed: messages.auth.signUpLinkFailed,
+        rateLimited: messages.auth.signUpLinkRateLimited,
+      },
+      ...overrides,
+    });
+
+  async function requestLink(): Promise<void> {
+    const user = userEvent.setup();
+    await user.type(screen.getByTestId("auth-email"), "ada@example.com");
+    await user.click(screen.getByTestId("auth-submit"));
+  }
+
+  beforeEach(() => {
+    mockFetch.mockReset().mockResolvedValue({ data: { status: true }, error: null });
+  });
+
+  it("renders one Email field, Send me a magic link, no password, the agreements and the providers", () => {
+    render(<SignUpCard {...linkProps()} />);
+    expect(screen.getByTestId("auth-submit")).toHaveTextContent(messages.auth.magicLinkSubmit);
+    expect(screen.queryByTestId("auth-password")).toBeNull();
+    expect(screen.getByTestId("sign-up-agreements")).toBeInTheDocument();
+    expect(screen.getByTestId("auth-divider")).toHaveTextContent(messages.auth.orContinue);
+    expect(screen.getByTestId("auth-social-google")).toBeInTheDocument();
+  });
+
+  it("does nothing while the agreement is unticked", async () => {
+    render(<SignUpCard {...linkProps()} />);
+    await requestLink();
+    expect(mockFetch).not.toHaveBeenCalled();
+  });
+
+  it("once ticked, POSTs /sign-in/magic-link once with the agreements in metadata, then shows the sent card", async () => {
+    render(<SignUpCard {...linkProps()} />);
+    await tick("account_terms");
+    await requestLink();
+    expect(mockFetch).toHaveBeenCalledTimes(1);
+    expect(mockFetch).toHaveBeenCalledWith("/sign-in/magic-link", {
+      method: "POST",
+      body: {
+        email: "ada@example.com",
+        name: "ada@example.com",
+        callbackURL: "/account",
+        errorCallbackURL: "/sign-up",
+        metadata: { agreements: ["account_terms"], locale: "en" },
+      },
+    });
+    expect(await screen.findByTestId("auth-sent-body")).toHaveTextContent(
+      messages.auth.signUpLinkSentBody,
+    );
+    expect(mockSignUpEmail).not.toHaveBeenCalled();
+  });
+
+  it("an AGREEMENTS_REQUIRED answer is shown on the agreements", async () => {
+    mockFetch.mockResolvedValue({
+      data: null,
+      error: { code: "AGREEMENTS_REQUIRED", status: 400 },
+    });
+    render(<SignUpCard {...linkProps()} />);
+    await tick("account_terms");
+    await requestLink();
+    const agreements = screen.getByTestId("sign-up-agreements");
+    await waitFor(() =>
+      expect(within(agreements).getByRole("alert")).toHaveTextContent(
+        messages.auth.signUpAgreementsRequired,
+      ),
+    );
+  });
+
+  it.each([
+    [429, messages.auth.signUpLinkRateLimited],
+    [400, messages.auth.signUpLinkFailed],
+  ])("a %s answer shows its copy and no sent card", async (status, copy) => {
+    mockFetch.mockResolvedValue({
+      data: null,
+      error: { code: status === 400 ? "SIGN_UP_CLOSED" : undefined, status },
+    });
+    render(<SignUpCard {...linkProps()} />);
+    await tick("account_terms");
+    await requestLink();
+    expect(await screen.findByText(copy)).toBeInTheDocument();
+    expect(screen.queryByTestId("auth-sent-body")).toBeNull();
+  });
+
+  it("renders a link notice above the card", () => {
+    render(<SignUpCard {...linkProps({ linkNotice: messages.auth.signUpLinkExpired })} />);
+    expect(screen.getByTestId("sign-up-link-notice")).toHaveTextContent(
+      messages.auth.signUpLinkExpired,
+    );
+  });
+});

package/templates/apps/web/app/[locale]/(auth)/sign-up/page.tsx

@@ -4,13 +4,23 @@
  * RSC. Branches on `isSignUpOpen()`:
  *   - open   → the sign-up form island, wired to Better Auth exactly as
  *              `/sign-in`'s island is (providers + method from auth-env).
- *   - closed → AuthCard's `invitation` intent: copy only, with the footer's
- *              "Back to sign in" link. This is the DEFAULT — `apps/web/auth.ts`
- *              does not enable `emailAndPassword`, so a scaffold offers no
- *              public sign-up and the page must not advertise one.
+ *              With the email sign-in link on, the method is the one-field
+ *              "Send me a magic link" body (#9667 D6): the link creates the
+ *              account on verify, and a failed link lands back here with
+ *              `?error=<code>`, mapped to fixed copy.
+ *   - closed → AuthCard's `invitation` intent: copy only. This is the
+ *              DEFAULT — `apps/web/auth.ts` does not enable
+ *              `emailAndPassword`, so a scaffold offers no public sign-up and
+ *              the page must not advertise one.
  *
- * `AuthShell` (the (auth) group's layout) owns the brand mark and the 400px
- * column, so this page passes no `logo` and no framing of its own.
+ * The one card (#9662) frames both: the site's mark, "Sign up", the
+ * "Already have an account? Sign in" line to `/sign-in` (in place of the
+ * footer's cross-link) and the Terms + Privacy acknowledgement. A closed site
+ * keeps its invitation copy inside that frame — never a form the server
+ * would refuse (operator, 2026-10-24).
+ *
+ * `AuthShell` (the (auth) group's layout) owns the 400px column; the card
+ * carries the site's mark (#8790 D3).
  */
 
 import { localeHref } from "@working-theory/ui";
@@ -26,12 +36,36 @@ import type { ReactElement } from "react";
 
 import { getActiveProviderIds, isSignUpOpen } from "../../../../lib/auth-env";
 import { consentPoliciesFor } from "../../../../lib/consent-policies";
+import { siteLogo } from "../../../../lib/site-logo";
+import { legalFootnote } from "../legal-footnote";
+import { resolveSignInCardText } from "../sign-in/sign-in-text";
 
 import { SignUpCard, type SignUpProvider } from "./sign-up-card";
-import { siteLogo } from "../../../../lib/site-logo";
 
 interface Props {
   params: Promise<{ locale: string }>;
+  searchParams?: Promise<{ error?: string | string[] }>;
+}
+
+/**
+ * The magic-link verify's `?error=<code>` (#9667 D6), mapped to fixed copy —
+ * never the value itself. A repeated `error` reads its first value.
+ */
+const EXPIRED_LINK_ERRORS: ReadonlySet<string> = new Set([
+  "INVALID_TOKEN",
+  "new_user_signup_disabled",
+]);
+
+function linkNoticeKey(
+  error: string | string[] | undefined,
+): "signUpLinkExpired" | "signUpAgreementsRequired" | "signUpFailed" | null {
+  if (error === undefined) return null;
+  const code = Array.isArray(error) ? error[0] : error;
+  if (code === undefined) return null;
+  if (EXPIRED_LINK_ERRORS.has(code)) return "signUpLinkExpired";
+  return code === "AGREEMENTS_REQUIRED"
+    ? "signUpAgreementsRequired"
+    : "signUpFailed";
 }
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
@@ -42,24 +76,36 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 
 export default async function SignUpPage({
   params,
+  searchParams,
 }: Props): Promise<ReactElement> {
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: "auth" });
   const signInHref = localeHref(locale, "/sign-in");
+  // The toggle line to /sign-in, and the acknowledgement /sign-in shares.
+  const prospect = {
+    prompt: t("signUpFooterPrompt"),
+    linkLabel: t("signUpFooterLink"),
+    href: signInHref,
+  };
+  const footnote = legalFootnote(
+    locale,
+    (await resolveSignInCardText(locale)).acknowledgement,
+  );
 
   if (!isSignUpOpen()) {
     const closedLabels: AuthCardLabels = {
-      invitationHeading: t("invitationHeading"),
-      invitationSubhead: t("invitationSubhead"),
+      invitationHeading: t("signUpHeading"),
       invitationBody: t("invitationBody"),
-      backToSignIn: t("backToSignIn"),
     };
     return (
       <div className="flex flex-col gap-4" data-testid="sign-up-page">
         <AuthCard
           logo={siteLogo()}
           intent="invitation"
-          signInHref={signInHref}
+          footer="none"
+          subhead=""
+          prospect={prospect}
+          footnote={footnote}
           labels={closedLabels}
         />
       </div>
@@ -71,20 +117,25 @@ export default async function SignUpPage({
   const providers = active.filter(
     (id): id is SignUpProvider => id === "google" || id === "github",
   );
-  const method = active.includes("email") ? "password" : "sso";
+  const method = active.includes("magic-link")
+    ? "magic-link"
+    : active.includes("email")
+      ? "password"
+      : "sso";
+  const noticeKey =
+    method === "magic-link" ? linkNoticeKey((await searchParams)?.error) : null;
 
   const labels: AuthCardLabels = {
     signUpHeading: t("signUpHeading"),
-    signUpSubhead: t("signUpSubhead"),
     signUpSubmit: t("signUpSubmit"),
-    signUpFooterPrompt: t("signUpFooterPrompt"),
-    signUpFooterLink: t("signUpFooterLink"),
     ssoPrefix: t("ssoPrefix"),
     google: t("google"),
     github: t("github"),
     email: t("email"),
     password: t("password"),
     orContinue: t("orContinue"),
+    magicLinkSubmit: t("magicLinkSubmit"),
+    emailLinkDivider: t("orContinue"),
   };
 
   // #8438 D13 — the site's sign-up agreements, resolved to this locale. No
@@ -106,7 +157,8 @@ export default async function SignUpPage({
       providers={providers}
       method={method}
       next={localeHref(locale, "/account")}
-      signInHref={signInHref}
+      prospect={prospect}
+      footnote={footnote}
       labels={labels}
       notConfiguredSubhead={t("signUpNotConfiguredSubhead")}
       errorLabels={{
@@ -118,6 +170,16 @@ export default async function SignUpPage({
       agreementPolicies={consentPoliciesFor(locale)}
       agreementsLegend={t("signUpAgreementsLegend")}
       locale={locale}
+      errorCallbackURL={localeHref(locale, "/sign-up")}
+      {...(noticeKey ? { linkNotice: t(noticeKey) } : {})}
+      linkLabels={{
+        sentHeading: t("sentHeading"),
+        sentSubhead: t("sentSubhead"),
+        sentBody: t("signUpLinkSentBody"),
+        back: t("signUpLinkBack"),
+        failed: t("signUpLinkFailed"),
+        rateLimited: t("signUpLinkRateLimited"),
+      }}
     />
   );
 }

package/templates/apps/web/app/[locale]/(auth)/sign-up/sign-up-card.tsx

@@ -1,4 +1,4 @@
-"use client"; // Better Auth's client calls (signUp.email / signIn.social) + error state
+"use client"; // Better Auth's client calls (signUp.email / signIn.social / $fetch) + error state
 
 /**
  * SignUpCard — the /sign-up page's client island (#5963).
@@ -13,7 +13,10 @@
  * documented posture the sign-in island already carries for its password
  * path. The page only renders this island at all when `isSignUpOpen()`.
  *
- * The brand mark is the shell's: no `logo` is passed, or it would render twice.
+ * The one card (#9662): the page hands in the site's mark (`logo`), the
+ * "Already have an account? Sign in" line (`prospect`, in place of AuthCard's
+ * footer cross-link) and the Terms + Privacy acknowledgement (`footnote`).
+ * The heading stands alone — no subhead unless the card is inert.
  *
  * Error surface: `AuthCard`'s `errors` prop is per-field, so a failed provider
  * launch lands on `errors.email` (the social row sits inside the password form
@@ -37,6 +40,14 @@
  * `additionalData`, which Better Auth keeps in the OAuth state for the
  * callback. The server writes the grants with the user
  * (`lib/sign-up-agreements.ts`); no cookie carries them.
+ *
+ * #9667 D6 — the magic-link method. With the email sign-in link on, the card
+ * is AuthCard's one-field "Send me a magic link" body, gated the same way.
+ * The request goes through the shared client's `$fetch`, never the
+ * `magicLinkClient()` plugin (for the reason `sign-in-card.tsx` records), with
+ * the agreements and locale in its `metadata` — which is what makes it a
+ * sign-up request. The server binds them to the token and creates the account
+ * on verify. The sent state never says whether the address had an account.
  */
 
 import {
@@ -47,7 +58,13 @@ import {
 } from "@working-theory/ui/blocks";
 import { Alert, AlertDescription } from "@working-theory/ui/primitives";
 import { SIGN_UP_AGREEMENTS_FIELD } from "@working-theory/validation";
-import { useState, type MouseEvent, type ReactElement, type ReactNode } from "react";
+import {
+  useRef,
+  useState,
+  type MouseEvent,
+  type ReactElement,
+  type ReactNode,
+} from "react";
 
 import { authClient, useAuthCardFlow } from "../use-auth-card-flow";
 
@@ -62,17 +79,35 @@ export interface SignUpAgreement {
   statement: string;
 }
 
+/** Translated copy for the magic-link sign-up (#9667 D6). */
+export interface SignUpLinkLabels {
+  sentHeading: string;
+  sentSubhead: string;
+  sentBody: string;
+  /** The sent state's "Back to sign up" link. */
+  back: string;
+  /** Any failed request other than a rate limit or the agreements. */
+  failed: string;
+  /** A 429 from Better Auth's per-IP limit. */
+  rateLimited: string;
+}
+
 export interface SignUpCardProps {
   /** The site's mark, centred in the card at 48px (#8790 D3). */
   logo?: ReactNode;
   /** Active OAuth providers, exactly as auth-env reports them. */
   providers: SignUpProvider[];
-  /** "password" when the email provider is active; otherwise "sso". */
-  method: "sso" | "password";
+  /**
+   * "magic-link" when the email sign-in link is active, else "password" when
+   * the email provider is, otherwise "sso".
+   */
+  method: "sso" | "password" | "magic-link";
   /** Post-sign-up path. */
   next: string;
-  /** Href for the footer's "Sign in" cross-link. */
-  signInHref: string;
+  /** The "Already have an account? Sign in" line to /sign-in (#9662). */
+  prospect: { prompt: string; linkLabel: string; href: string };
+  /** The acknowledgement sentence(s) at the card's foot (#9662). */
+  footnote: ReactNode;
   /** Translated AuthCard labels (resolved server-side by the page). */
   labels: AuthCardLabels;
   /** Subhead shown when no provider is configured. */
@@ -92,6 +127,12 @@ export interface SignUpCardProps {
   agreementsLegend: string;
   /** The page's locale, sent with the agreements (the statements' language). */
   locale: string;
+  /** Where a failed link lands (`/sign-up`); Better Auth appends `?error`. */
+  errorCallbackURL?: string;
+  /** Fixed copy for a failed link (`?error=` mapped by the page), shown above the card. */
+  linkNotice?: string;
+  /** The magic-link method's copy; required when `method` is "magic-link". */
+  linkLabels?: SignUpLinkLabels;
 }
 
 /** The server's body key for the ticked ids — also the group's control name. */
@@ -112,7 +153,8 @@ export function SignUpCard({
   providers,
   method,
   next,
-  signInHref,
+  prospect,
+  footnote,
   labels,
   notConfiguredSubhead,
   errorLabels,
@@ -121,6 +163,9 @@ export function SignUpCard({
   agreementsLegend,
   logo,
   locale,
+  errorCallbackURL,
+  linkNotice,
+  linkLabels,
 }: SignUpCardProps): ReactElement {
   const { errors, providerError, launchProvider, submitPassword } =
     useAuthCardFlow(next, {
@@ -135,6 +180,11 @@ export function SignUpCard({
   const [agreementsError, setAgreementsError] = useState<string | undefined>(
     undefined,
   );
+  const [linkSent, setLinkSent] = useState(false);
+  const [linkError, setLinkError] = useState<string | undefined>(undefined);
+  // One request at a time: a double-click would spend two of the per-IP
+  // sends and mint two live tokens (as sign-in-card.tsx).
+  const linkPending = useRef(false);
   const allAgreed = requiredAgreementIds.every((id) => ticked.has(id));
   // What the server checks and records (D10): the ticked ids, in the order shown.
   const agreed = (): { agreements: string[]; locale: string } => ({
@@ -201,8 +251,72 @@ export function SignUpCard({
     );
   };
 
+  const requestSignUpLink = async (email: string): Promise<void> => {
+    if (!allAgreed || linkPending.current) return;
+    linkPending.current = true;
+    setAgreementsError(undefined);
+    setLinkError(undefined);
+    try {
+      const { error } = await authClient.$fetch("/sign-in/magic-link", {
+        method: "POST",
+        body: {
+          email,
+          // As the password submit: Better Auth wants a name on a new user.
+          name: email,
+          callbackURL: next,
+          errorCallbackURL,
+          metadata: agreed(),
+        },
+      });
+      if (!error) {
+        setLinkSent(true);
+        return;
+      }
+      if (errorCode({ error }) === AGREEMENTS_REQUIRED) {
+        setAgreementsError(errorLabels.agreementsRequired);
+      } else {
+        setLinkError(
+          error.status === 429 ? linkLabels?.rateLimited : linkLabels?.failed,
+        );
+      }
+    } catch {
+      setLinkError(linkLabels?.failed);
+    } finally {
+      linkPending.current = false;
+    }
+  };
+
+  if (method === "magic-link" && linkSent && linkLabels) {
+    // No `sentTo`: both a new and a taken address get a link, and the state
+    // must not say which.
+    return (
+      <div className="flex flex-col gap-4" data-testid="sign-up-page">
+        <AuthCard
+          {...(logo !== undefined ? { logo } : {})}
+          intent="sent"
+          footer="cross-link"
+          // "Back to sign up": this page, where a failed link also lands.
+          {...(errorCallbackURL !== undefined
+            ? { signInHref: errorCallbackURL }
+            : {})}
+          labels={{
+            sentHeading: linkLabels.sentHeading,
+            sentSubhead: linkLabels.sentSubhead,
+            sentBody: linkLabels.sentBody,
+            backToSignIn: linkLabels.back,
+          }}
+        />
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-col gap-4" data-testid="sign-up-page">
+      {linkNotice ? (
+        <Alert variant="error" data-testid="sign-up-link-notice">
+          <AlertDescription>{linkNotice}</AlertDescription>
+        </Alert>
+      ) : null}
       {method === "sso" && providerError ? (
         <Alert variant="error" data-testid="sign-up-provider-error">
           <AlertDescription>{providerError}</AlertDescription>
@@ -217,11 +331,17 @@ export function SignUpCard({
           {...(logo !== undefined ? { logo } : {})}
           intent="sign-up"
           method={method}
-          signInHref={signInHref}
-          {...(notConfigured ? { subhead: notConfiguredSubhead } : {})}
+          footer="none"
+          subhead={notConfigured ? notConfiguredSubhead : ""}
+          prospect={prospect}
+          footnote={footnote}
           providers={providerButtons}
-          onSubmit={handleSubmit}
-          errors={errors}
+          onSubmit={
+            method === "magic-link"
+              ? (data) => void requestSignUpLink(data.email)
+              : handleSubmit
+          }
+          errors={linkError ? { ...errors, email: linkError } : errors}
           labels={labels}
         />
       </div>

package/templates/apps/web/app/[locale]/(authed)/__tests__/gate.test.tsx

@@ -19,6 +19,9 @@
  *   9. On an account path (#7430) the gate speaks to members — the
  *      `account.gate` copy, never `waitlistDashboard.gate` — and its
  *      not-configured headline is a real heading element.
+ *  10. The member gate renders the one card (#9662): `/sign-in`'s card with
+ *      the site's mark, the toggle line to /sign-up and the Terms + Privacy
+ *      acknowledgement.
  */
 import { readFileSync } from "node:fs";
 import { join } from "node:path";
@@ -407,13 +410,62 @@ describe("AuthedLayout — the signed-out gate on an account path (#7430)", () =
     await renderSignedOutLayout();
     expect(gateNamespaces()).toContain("account.gate");
     expect(gateNamespaces()).not.toContain("waitlistDashboard.gate");
-    expect(screen.getByTestId("auth-panel-provider-google")).toBeInTheDocument();
+    expect(screen.getByTestId("auth-sso-google")).toBeInTheDocument();
     expect(screen.getByTestId("sign-in-gate-link")).toHaveAttribute(
       "href",
       "/sign-in?next=%2Faccount",
     );
   });
 
+  // A client component's props cross the RSC boundary: React refuses a
+  // function there, so the card's copy must arrive as plain data (#9662 —
+  // the 500 a function-valued `backTo` once caused here).
+  it.each([
+    ["Google", false],
+    ["Google + the email link", true],
+  ] as const)("hands SignInGate no function in its card props (%s)", async (_name, withEmailLink) => {
+    configureGoogle();
+    if (withEmailLink) configureEmailLink();
+    mockGetSession.mockResolvedValue(null);
+    const element = (await AuthedLayout({
+      params: Promise.resolve({ locale: "en" }),
+      children: <div />,
+    })) as React.ReactElement<{ card?: { text: Record<string, unknown> } }>;
+    const text = element.props.card?.text;
+    expect(text).toBeDefined();
+    const functions = Object.entries(text ?? {}).filter(
+      ([, value]) => typeof value === "function",
+    );
+    expect(functions).toEqual([]);
+  });
+
+  it.each([
+    ["Google", false],
+    ["Google + the email link", true],
+  ] as const)("renders the one card with %s: the mark, the toggle line and the acknowledgement (#9662)", async (_name, withEmailLink) => {
+    configureGoogle();
+    if (withEmailLink) configureEmailLink();
+    await renderSignedOutLayout();
+    expect(screen.getByTestId("sign-in-page")).toBeInTheDocument();
+    expect(screen.queryByTestId("auth-panel-card")).not.toBeInTheDocument();
+    expect(screen.getByTestId("auth-card-logo")).toBeInTheDocument();
+    expect(screen.getByTestId("auth-card-prospect-link")).toHaveAttribute(
+      "href",
+      "/sign-up",
+    );
+    const footnote = screen.getByTestId("auth-card-footnote");
+    expect(footnote.querySelector('a[href="/terms"]')).not.toBeNull();
+    expect(footnote.querySelector('a[href="/privacy"]')).not.toBeNull();
+    if (withEmailLink) {
+      expect(screen.getByTestId("auth-submit")).toHaveTextContent(
+        "copy:emailLinkSubmit",
+      );
+      expect(screen.getByTestId("auth-social-google")).toBeInTheDocument();
+    } else {
+      expect(screen.queryByTestId("auth-email")).not.toBeInTheDocument();
+    }
+  });
+
   it("renders the not-configured headline as a real heading, not a <p>", async () => {
     await renderSignedOutLayout();
     expect(gateNamespaces()).toContain("account.gate");

package/templates/apps/web/app/[locale]/(authed)/account/__tests__/billing.test.tsx

@@ -10,6 +10,9 @@
  *       button; (d) a 500 or a throw shows the error row, never "no
  *       subscription"; (e) a contributed billing section renders after every
  *       one of these; (f) the read asks for `include: "billing"`.
+ *   #9401 AC-9 (spec docs/specs/9401-show-a-buyer-s-ailk-spec.md D7): a
+ *   section the site adds to `siteBillingSections` renders after the
+ *   modules' `accountBillingSections`, each under its `ctx.t(title)`.
  *   #8217 AC-1 (spec docs/specs/8217-spoke-billing-spoke-checkout-reads-spec.md
  *   D10, D11): `openBillingPortal()` mints the portal through
  *   `billingPortalUrl()` — the hub's route, once, with the cookie init — and
@@ -81,6 +84,7 @@ jest.mock("next/navigation", () => ({
 import type { AccountBillingSection } from "@working-theory/templates/account";
 
 import { accountBillingSections } from "../../../../../lib/account-config";
+import { siteBillingSections } from "../../../../../lib/site-contributions";
 import { openBillingPortal } from "../actions";
 
 // The Billing route's own page, loaded with `import()`: architecture.yaml bans
@@ -276,6 +280,40 @@ describe("AC-2 (e) — contributed billing sections render after the base conten
   });
 });
 
+describe("#9401 AC-9 — a site's own section renders after the modules' (D7)", () => {
+  const moduleSection: AccountBillingSection = {
+    id: "module",
+    title: "settings.billing.currentPlan",
+    render: () => <p data-testid="module-body">Module</p>,
+  };
+  const siteSection: AccountBillingSection = {
+    id: "site",
+    title: "settings.billing.title",
+    render: () => <p data-testid="site-body">Site</p>,
+  };
+
+  beforeAll(() => {
+    accountBillingSections.push(moduleSection);
+    siteBillingSections.push(siteSection);
+  });
+
+  afterAll(() => {
+    accountBillingSections.splice(accountBillingSections.indexOf(moduleSection), 1);
+    siteBillingSections.splice(siteBillingSections.indexOf(siteSection), 1);
+  });
+
+  it("renders the module's section, then the site's, each under its translated title", async () => {
+    await renderPage();
+    const contributed = screen.getByTestId("account-settings-module");
+    const site = screen.getByTestId("account-settings-site");
+    expect(within(contributed).getByTestId("module-body")).toBeInTheDocument();
+    expect(within(site).getByTestId("site-body")).toBeInTheDocument();
+    expect(within(contributed).getByRole("heading", { level: 2 })).toHaveTextContent("Current plan");
+    expect(within(site).getByRole("heading", { level: 2 })).toHaveTextContent("Billing");
+    expect(contributed.compareDocumentPosition(site) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+});
+
 describe("#8217 AC-1 — the single site's Manage billing (D10, D11)", () => {
   const PORTAL_URL = "https://billing.stripe.com/p/session/test_single_site";