create-ailk 0.21.0 → 0.23.0

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

@@ -1,15 +1,20 @@
 /**
- * Tests for SignUpCard's sign-up agreements (#8438 D13, AC-3).
+ * Tests for SignUpCard's sign-up agreements (#8438 D13, AC-3; #8765 D10,
+ * AC-1).
  *
  * Every submit — the password form and each OAuth provider — is gated by
  * the site's `signUp` agreements, rendered as a `ConsentGroup` below
  * `AuthCard`. Nothing happens on any entry point until every required
- * agreement is ticked. The password path also mints the carried-agreement
- * cookie (`rememberSignUpAgreementsAction`) before calling Better Auth.
+ * agreement is ticked. The ticked ids then travel to the server, which
+ * decides: in the sign-up body, and in a provider launch's `additionalData`.
+ * A server refusal (`AGREEMENTS_REQUIRED`) is shown on the agreements. No
+ * cookie carries them any more.
  */
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
+import messages from "../../../../../messages/en.json";
+
 const mockSignUpEmail = jest.fn();
 const mockSignInSocial = jest.fn();
 jest.mock("better-auth/react", () => ({
@@ -20,13 +25,6 @@ jest.mock("better-auth/react", () => ({
   }),
 }));
 
-const mockRememberAgreements = jest.fn();
-// eslint-disable-next-line no-restricted-syntax -- test-seam mock: the Server Action module is a "use server" boundary; the card only passes it through.
-jest.mock("../sign-up.actions", () => ({
-  __esModule: true,
-  rememberSignUpAgreementsAction: (...args: unknown[]) => mockRememberAgreements(...args),
-}));
-
 import { SignUpCard, type SignUpCardProps } from "../sign-up-card";
 
 const AGREEMENT = {
@@ -55,10 +53,15 @@ function props(overrides: Partial<SignUpCardProps> = {}): SignUpCardProps {
       orContinue: "or continue with",
     },
     notConfiguredSubhead: "Sign-up is not configured.",
-    errorLabels: { signUpFailed: "Sign-up failed.", providerFailed: "Provider failed." },
+    errorLabels: {
+      signUpFailed: "Sign-up failed.",
+      providerFailed: "Provider failed.",
+      agreementsRequired: messages.auth.signUpAgreementsRequired,
+    },
     agreements: [AGREEMENT],
     agreementPolicies: { terms: "/terms", privacy: "/privacy" },
     agreementsLegend: "Agreements",
+    locale: "en",
     ...overrides,
   };
 }
@@ -78,7 +81,6 @@ async function tick(purposeId: string): Promise<void> {
 beforeEach(() => {
   mockSignUpEmail.mockReset().mockResolvedValue({ data: { status: true }, error: null });
   mockSignInSocial.mockReset().mockResolvedValue({ data: { status: true }, error: null });
-  mockRememberAgreements.mockReset().mockResolvedValue(undefined);
 });
 
 describe("the password submit is gated (AC-3)", () => {
@@ -92,23 +94,31 @@ describe("the password submit is gated (AC-3)", () => {
     render(<SignUpCard {...props()} />);
     await fillAndSubmit();
     expect(mockSignUpEmail).not.toHaveBeenCalled();
-    expect(mockRememberAgreements).not.toHaveBeenCalled();
   });
 
-  it("mints the carried-agreement cookie, then signs up, once every required agreement is ticked", async () => {
+  it("signs up once every required agreement is ticked, the body carrying agreements and locale (#8765 AC-1)", async () => {
     render(<SignUpCard {...props()} />);
     await tick("account_terms");
     expect(screen.getByTestId("sign-up-card-gate")).toHaveAttribute("aria-disabled", "false");
     await fillAndSubmit();
-    expect(mockRememberAgreements).toHaveBeenCalledWith("ada@example.com", ["account_terms"]);
     expect(mockSignUpEmail).toHaveBeenCalledWith({
       email: "ada@example.com",
       password: "correct horse battery staple",
       name: "ada@example.com",
       callbackURL: "/account",
+      agreements: ["account_terms"],
+      locale: "en",
     });
   });
 
+  it("sets no cookie — the server writes the grant with the user (#8765 AC-1)", async () => {
+    render(<SignUpCard {...props()} />);
+    await tick("account_terms");
+    await fillAndSubmit();
+    expect(mockSignUpEmail).toHaveBeenCalledTimes(1);
+    expect(document.cookie).toBe("");
+  });
+
   it("re-disables after unticking", async () => {
     render(<SignUpCard {...props()} />);
     await tick("account_terms");
@@ -137,12 +147,36 @@ describe("the password submit is gated (AC-3)", () => {
     expect(mockSignUpEmail).toHaveBeenCalledTimes(1);
   });
 
-  it("a failed cookie mint still submits — convenience only", async () => {
-    mockRememberAgreements.mockRejectedValue(new Error("no secret"));
+});
+
+describe("the server's answer (#8765 AC-1)", () => {
+  it("an AGREEMENTS_REQUIRED refusal renders auth.signUpAgreementsRequired inside sign-up-agreements, not on the password field", async () => {
+    mockSignUpEmail.mockResolvedValue({
+      data: null,
+      error: { code: "AGREEMENTS_REQUIRED", message: "Accept the agreements to create an account.", status: 400 },
+    });
+    render(<SignUpCard {...props()} />);
+    await tick("account_terms");
+    await fillAndSubmit();
+    const agreements = screen.getByTestId("sign-up-agreements");
+    await waitFor(() =>
+      expect(within(agreements).getByRole("alert")).toHaveTextContent(
+        messages.auth.signUpAgreementsRequired,
+      ),
+    );
+    expect(screen.queryByText("Sign-up failed.")).not.toBeInTheDocument();
+  });
+
+  it("any other failure keeps the password-field message and no agreements error", async () => {
+    mockSignUpEmail.mockResolvedValue({
+      data: null,
+      error: { code: "PASSWORD_TOO_SHORT", message: "Password too short", status: 400 },
+    });
     render(<SignUpCard {...props()} />);
     await tick("account_terms");
     await fillAndSubmit();
-    expect(mockSignUpEmail).toHaveBeenCalledTimes(1);
+    expect(await screen.findByText("Sign-up failed.")).toBeInTheDocument();
+    expect(within(screen.getByTestId("sign-up-agreements")).queryByRole("alert")).toBeNull();
   });
 });
 
@@ -154,12 +188,16 @@ describe("provider buttons are gated too (AC-3)", () => {
     expect(mockSignInSocial).not.toHaveBeenCalled();
   });
 
-  it("launches the provider once ticked, with no cookie mint", async () => {
+  it("launches the provider once ticked, the agreements in its additionalData (#8765 AC-1)", async () => {
     render(<SignUpCard {...props({ method: "sso", providers: ["google"] })} />);
     await tick("account_terms");
     const user = userEvent.setup();
     await user.click(screen.getByTestId("auth-sso-google"));
-    expect(mockSignInSocial).toHaveBeenCalledWith({ provider: "google", callbackURL: "/account" });
-    expect(mockRememberAgreements).not.toHaveBeenCalled();
+    expect(mockSignInSocial).toHaveBeenCalledWith({
+      provider: "google",
+      callbackURL: "/account",
+      additionalData: { agreements: ["account_terms"], locale: "en" },
+    });
+    expect(document.cookie).toBe("");
   });
 });

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

@@ -25,8 +25,10 @@ import { getTranslations } from "next-intl/server";
 import type { ReactElement } from "react";
 
 import { getActiveProviderIds, isSignUpOpen } from "../../../../lib/auth-env";
+import { consentPoliciesFor } from "../../../../lib/consent-policies";
 
 import { SignUpCard, type SignUpProvider } from "./sign-up-card";
+import { siteLogo } from "../../../../lib/site-logo";
 
 interface Props {
   params: Promise<{ locale: string }>;
@@ -55,6 +57,7 @@ export default async function SignUpPage({
     return (
       <div className="flex flex-col gap-4" data-testid="sign-up-page">
         <AuthCard
+          logo={siteLogo()}
           intent="invitation"
           signInHref={signInHref}
           labels={closedLabels}
@@ -87,16 +90,19 @@ export default async function SignUpPage({
   // #8438 D13 — the site's sign-up agreements, resolved to this locale. No
   // per-site registry row is wired yet (C1), so this always reads the
   // platform default — the same registry the member Privacy tab and the
-  // account-settings write both read from.
-  const config = SITE_CONSENT_CONFIG_DEFAULTS;
-  const agreements = signUpAgreements(config).map((purpose) => ({
-    id: purpose.id,
-    required: purpose.required,
-    statement: resolveConsentStatement(purpose, locale).statement,
-  }));
+  // account-settings write both read from. Their links resolve through the
+  // one localized policy map every agreement surface uses (#8765 D9).
+  const agreements = signUpAgreements(SITE_CONSENT_CONFIG_DEFAULTS).map(
+    (purpose) => ({
+      id: purpose.id,
+      required: purpose.required,
+      statement: resolveConsentStatement(purpose, locale).statement,
+    }),
+  );
 
   return (
     <SignUpCard
+      logo={siteLogo()}
       providers={providers}
       method={method}
       next={localeHref(locale, "/account")}
@@ -106,10 +112,12 @@ export default async function SignUpPage({
       errorLabels={{
         signUpFailed: t("signUpFailed"),
         providerFailed: t("providerFailed"),
+        agreementsRequired: t("signUpAgreementsRequired"),
       }}
       agreements={agreements}
-      agreementPolicies={config.policies}
+      agreementPolicies={consentPoliciesFor(locale)}
       agreementsLegend={t("signUpAgreementsLegend")}
+      locale={locale}
     />
   );
 }

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

@@ -28,6 +28,15 @@
  * nothing until every required agreement is ticked. A wrapping div's
  * `aria-disabled` + `pointer-events-none` styling carries the same state
  * visually for a mouse/touch pointer in a real browser.
+ *
+ * #8765 D10 — the gate above is a convenience; the server decides. The
+ * password submit sends the ticked ids as `agreements`, with `locale`, in the
+ * sign-up body, and Better Auth refuses a body without them
+ * (`AGREEMENTS_REQUIRED`, shown on the agreements, not the password field).
+ * Each provider click carries the same pair as `signIn.social`'s
+ * `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.
  */
 
 import {
@@ -37,12 +46,11 @@ import {
   type AuthSubmitData,
 } from "@working-theory/ui/blocks";
 import { Alert, AlertDescription } from "@working-theory/ui/primitives";
-import { useState, type MouseEvent, type ReactElement } from "react";
+import { SIGN_UP_AGREEMENTS_FIELD } from "@working-theory/validation";
+import { useState, type MouseEvent, type ReactElement, type ReactNode } from "react";
 
 import { authClient, useAuthCardFlow } from "../use-auth-card-flow";
 
-import { rememberSignUpAgreementsAction } from "./sign-up.actions";
-
 /** The OAuth providers this page can launch — a subset of AuthCard's. */
 export type SignUpProvider = "google" | "github";
 
@@ -55,6 +63,8 @@ export interface SignUpAgreement {
 }
 
 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". */
@@ -68,16 +78,35 @@ export interface SignUpCardProps {
   /** Subhead shown when no provider is configured. */
   notConfiguredSubhead: string;
   /** Translated error copy. */
-  errorLabels: { signUpFailed: string; providerFailed: string };
+  errorLabels: {
+    signUpFailed: string;
+    providerFailed: string;
+    /** Shown on the agreements when the server answers `AGREEMENTS_REQUIRED`. */
+    agreementsRequired: string;
+  };
   /** The site's `signUp` agreements — always at least `account_terms`. */
   agreements: SignUpAgreement[];
   /** Policy key → href, for the statements' inline links (D1/D3). */
   agreementPolicies: Record<string, string>;
   /** The consent fieldset's legend (`auth.signUp.agreementsLegend`). */
   agreementsLegend: string;
+  /** The page's locale, sent with the agreements (the statements' language). */
+  locale: string;
 }
 
-const AGREEMENTS_FIELD_NAME = "agreements";
+/** The server's body key for the ticked ids — also the group's control name. */
+const AGREEMENTS_FIELD_NAME = SIGN_UP_AGREEMENTS_FIELD;
+
+/** The server's refusal of a sign-up without the agreements (#8765 D3). */
+const AGREEMENTS_REQUIRED = "AGREEMENTS_REQUIRED";
+
+function errorCode(result: unknown): unknown {
+  if (typeof result !== "object" || result === null) return undefined;
+  const error: unknown = Reflect.get(result, "error");
+  return typeof error === "object" && error !== null
+    ? Reflect.get(error, "code")
+    : undefined;
+}
 
 export function SignUpCard({
   providers,
@@ -90,6 +119,8 @@ export function SignUpCard({
   agreements,
   agreementPolicies,
   agreementsLegend,
+  logo,
+  locale,
 }: SignUpCardProps): ReactElement {
   const { errors, providerError, launchProvider, submitPassword } =
     useAuthCardFlow(next, {
@@ -97,9 +128,21 @@ export function SignUpCard({
       passwordFailed: errorLabels.signUpFailed,
     });
 
-  const requiredAgreementIds = agreements.filter((a) => a.required).map((a) => a.id);
+  const requiredAgreementIds = agreements
+    .filter((a) => a.required)
+    .map((a) => a.id);
   const [ticked, setTicked] = useState<ReadonlySet<string>>(new Set());
+  const [agreementsError, setAgreementsError] = useState<string | undefined>(
+    undefined,
+  );
   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 } => ({
+    [SIGN_UP_AGREEMENTS_FIELD]: agreements
+      .filter((a) => ticked.has(a.id))
+      .map((a) => a.id),
+    locale,
+  });
 
   // `ConsentGroup`'s checkboxes are uncontrolled, by design (#5275), and
   // always start unticked (no `defaults` are ever passed here) — so a click
@@ -107,7 +150,9 @@ export function SignUpCard({
   // reads the Radix root's own post-click DOM state, which a same-tick
   // ancestor listener could still see as stale.
   function handleAgreementsClick(event: MouseEvent<HTMLDivElement>): void {
-    const target = (event.target as HTMLElement).closest<HTMLElement>('[role="checkbox"]');
+    const target = (event.target as HTMLElement).closest<HTMLElement>(
+      '[role="checkbox"]',
+    );
     if (!target?.id) return;
     const purposeId = target.id.slice(`${AGREEMENTS_FIELD_NAME}.`.length);
     setTicked((previous) => {
@@ -124,35 +169,36 @@ export function SignUpCard({
     provider,
     // Gated: a provider launch that would create the account is refused
     // until every required agreement is ticked, exactly as the password
-    // submit below. No remember-cookie here — Better Auth's own OAuth
-    // callback carries no form data this component could read an email
-    // from, so the account home's explicit "Otherwise" card asks instead.
+    // submit below. The agreements ride in the OAuth state (D10).
     onClick: () => {
       if (!allAgreed) return;
-      void launchProvider(provider);
+      void launchProvider(provider, agreed());
     },
   }));
 
   const handleSubmit = (data: AuthSubmitData): void => {
     if (!allAgreed) return;
-    void (async () => {
-      try {
-        await rememberSignUpAgreementsAction(data.email, requiredAgreementIds);
-      } catch {
-        // Convenience only — see sign-up.actions.ts's file header.
-      }
-      // Better Auth requires a `name` on email sign-up; this card collects
-      // none, so the address doubles as the display name until the person
-      // sets one.
-      await submitPassword(
-        authClient.signUp.email({
-          email: data.email,
-          password: data.password ?? "",
-          name: data.email,
-          callbackURL: next,
-        }),
-      );
-    })();
+    setAgreementsError(undefined);
+    // Better Auth requires a `name` on email sign-up; this card collects
+    // none, so the address doubles as the display name until the person
+    // sets one. Better Auth ignores body keys it does not know, so
+    // `agreements` and `locale` never reach the User row.
+    const outcome = authClient.signUp.email({
+      email: data.email,
+      password: data.password ?? "",
+      name: data.email,
+      callbackURL: next,
+      ...agreed(),
+    });
+    // The agreements refusal belongs to the agreements, not the password
+    // field; any other failure keeps the password-field message.
+    void submitPassword(
+      outcome.then((result) => {
+        if (errorCode(result) !== AGREEMENTS_REQUIRED) return result;
+        setAgreementsError(errorLabels.agreementsRequired);
+        return null;
+      }),
+    );
   };
 
   return (
@@ -168,6 +214,7 @@ export function SignUpCard({
         data-testid="sign-up-card-gate"
       >
         <AuthCard
+          {...(logo !== undefined ? { logo } : {})}
           intent="sign-up"
           method={method}
           signInHref={signInHref}
@@ -178,13 +225,20 @@ export function SignUpCard({
           labels={labels}
         />
       </div>
-      {/* eslint-disable-next-line -- delegated-click capture over ConsentGroup's own real `role="checkbox"` descendants (Radix), which are themselves already keyboard-operable and dispatch a native click on Enter/Space; this wrapper adds no interactive semantics of its own and is never itself focused. (Bare directive, not named rules: `jsx-a11y/*` is registered in this monorepo's own lint but not in a scaffolded site's trimmed eslint config — see agreements-prompt.tsx's identical note on `react-hooks/exhaustive-deps`.) */}
-      <div onClick={handleAgreementsClick} data-testid="sign-up-agreements">
+      {/* eslint-disable-next-line -- delegated-click capture over ConsentGroup's own real `role="checkbox"` descendants (Radix), which are themselves already keyboard-operable and dispatch a native click on Enter/Space; this wrapper adds no interactive semantics of its own and is never itself focused. (Bare directive, not named rules: `jsx-a11y/*` is registered in this monorepo's own lint but not in a scaffolded site's trimmed eslint config.) */}
+      <div
+        onClick={handleAgreementsClick}
+        // Below `md` the card is borderless with a 20px inset; the agreements
+        // keep that inset so they line up with its fields.
+        className="px-5 md:px-0"
+        data-testid="sign-up-agreements"
+      >
         <ConsentGroup
           name={AGREEMENTS_FIELD_NAME}
           legend={agreementsLegend}
           purposes={agreements}
           policies={agreementPolicies}
+          error={agreementsError}
         />
       </div>
     </div>

package/templates/apps/web/app/[locale]/(auth)/use-auth-card-flow.ts

@@ -47,8 +47,15 @@ export interface AuthCardFlow {
   errors: FieldErrors;
   /** The SSO-body error banner text, or null when none is pending. */
   providerError: string | null;
-  /** Launches an OAuth provider via `signIn.social`. */
-  launchProvider: (provider: AuthProvider) => Promise<void>;
+  /**
+   * Launches an OAuth provider via `signIn.social`. `additionalData` rides
+   * in Better Auth's OAuth state to the callback — the sign-up card's ticked
+   * agreements and locale (#8765 D10); the sign-in card passes none.
+   */
+  launchProvider: (
+    provider: AuthProvider,
+    additionalData?: Record<string, unknown>,
+  ) => Promise<void>;
   /**
    * Awaits the caller's own Better Auth call (`signIn.email(...)` or
    * `signUp.email(...)`) and surfaces a `{ error }` result — or a rejection —
@@ -68,12 +75,19 @@ export function useAuthCardFlow(
   const [errors, setErrors] = useState<FieldErrors>({});
   const [providerError, setProviderError] = useState<string | null>(null);
 
-  const launchProvider = async (provider: AuthProvider): Promise<void> => {
+  const launchProvider = async (
+    provider: AuthProvider,
+    additionalData?: Record<string, unknown>,
+  ): Promise<void> => {
     setProviderError(null);
     // Better Auth reports a failed launch as `{ error }`; a network/runtime
     // failure rejects. Both land on the same providerFailed message.
     const failed = await authClient.signIn
-      .social({ provider, callbackURL: next })
+      .social({
+        provider,
+        callbackURL: next,
+        ...(additionalData ? { additionalData } : {}),
+      })
       .then(
         (res: AuthResult) => Boolean(res?.error),
         () => true,

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

@@ -21,6 +21,7 @@ import { AuthCard, type AuthCardLabels } from "@working-theory/ui/blocks";
 import type { Metadata } from "next";
 import { getTranslations } from "next-intl/server";
 import type { ReactElement } from "react";
+import { siteLogo } from "../../../../lib/site-logo";
 
 interface Props {
   params: Promise<{ locale: string }>;
@@ -63,6 +64,7 @@ export default async function VerifyEmailPage({
       <div className="flex flex-col gap-4" data-testid="verify-email-page">
         <div data-testid="verify-token-error">
           <AuthCard
+            logo={siteLogo()}
             intent="invitation"
             signInHref={signInHref}
             labels={labels}
@@ -81,7 +83,7 @@ export default async function VerifyEmailPage({
 
   return (
     <div className="flex flex-col gap-4" data-testid="verify-email-page">
-      <AuthCard intent="sent" signInHref={signInHref} labels={labels} />
+      <AuthCard logo={siteLogo()} intent="sent" signInHref={signInHref} labels={labels} />
     </div>
   );
 }

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

@@ -348,8 +348,10 @@ describe("AuthedLayout — the email sign-in link (#7435)", () => {
     configureEmailLink();
     await renderSignedOutLayout();
     expect(screen.getByTestId("sign-in-gate")).toBeInTheDocument();
-    expect(screen.getByTestId("auth-sso-google")).toBeInTheDocument();
-    expect(screen.getByTestId("auth-email-link-submit")).toHaveTextContent(
+    // #8790 D4/D5: one card — Google is a social button under the "or", and the
+    // sign-in link is the card's primary action.
+    expect(screen.getByTestId("auth-social-google")).toBeInTheDocument();
+    expect(screen.getByTestId("auth-submit")).toHaveTextContent(
       "copy:emailLinkSubmit",
     );
     expect(screen.queryByTestId("auth-panel-password")).not.toBeInTheDocument();
@@ -363,7 +365,8 @@ describe("AuthedLayout — the email sign-in link (#7435)", () => {
   it("renders the email-link form, not the EmptyState, when it is the only method", async () => {
     configureEmailLink();
     await renderSignedOutLayout();
-    expect(screen.getByTestId("auth-email-link-form")).toBeInTheDocument();
+    expect(screen.getByTestId("auth-email")).toBeInTheDocument();
+    expect(screen.getByTestId("auth-submit")).toBeInTheDocument();
     expect(screen.queryByTestId("sign-in-gate-empty")).not.toBeInTheDocument();
     expect(screen.getByTestId("sign-in-gate-link")).toBeInTheDocument();
   });
@@ -378,7 +381,7 @@ describe("AuthedLayout — the email sign-in link (#7435)", () => {
     configureEmailLink();
     delete process.env[name];
     await renderSignedOutLayout();
-    expect(screen.queryByTestId("auth-email-link-form")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("auth-email")).not.toBeInTheDocument();
     expect(screen.getByTestId("auth-panel-provider-google")).toBeInTheDocument();
   });
 });