create-ailk 0.25.1 → 0.27.0

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

@@ -18,14 +18,21 @@
  *
  * Since #5963 the page lives in the `(auth)` route group — the URL is
  * unchanged (a group contributes no path segment) but the frame is
- * `AuthShell`, not the marketing Nav + Footer. The shell owns the brand mark
- * and the 400px column, so this page passes NO `logo` (it would render twice)
- * and no framing of its own.
+ * `AuthShell`, not the marketing Nav + Footer. The shell owns the 400px
+ * column; the card carries the site's mark (#8790 D3).
+ *
+ * The one card (#9662): "Sign in to <site>" (the name is the deployment's,
+ * read in `resolveSignInCardText`, never the request's), the "Don't have an
+ * account? Sign up" line to `/sign-up`, and the Terms + Privacy
+ * acknowledgement. The Sign up line carries the validated `next` (#9912 D4),
+ * so a buyer who switches to sign-up keeps the destination; a refused or
+ * absent `next` gives the bare `/sign-up`.
  *
  * Signed-in visitors are not redirected here — the Nav's session-aware action
  * cluster (Account / Sign out) is the affordance for them.
  */
 
+import { hubSignIn } from "@working-theory/api-client";
 import { localeHref } from "@working-theory/ui";
 import { accountEmailHintSchema } from "@working-theory/validation";
 import type { Metadata } from "next";
@@ -36,15 +43,14 @@ import {
   getActiveProviderIds,
   resetSendConfigured,
 } from "../../../../lib/auth-env";
-
-import { hubSignIn } from "@working-theory/api-client";
-import { Link, Text } from "@working-theory/ui/primitives";
 import { siteLogo } from "../../../../lib/site-logo";
 import {
   CONTINUE_PATH,
   openContinuation,
 } from "../../../api/auth/hub/continuation";
-import { resolveNextPath } from "./next-path";
+import { legalFootnote } from "../legal-footnote";
+
+import { hrefWithNext, resolveNextPath } from "./next-path";
 import { SignInCard, type SignInProvider } from "./sign-in-card";
 import { resolveSignInCardText, type SignInCardText } from "./sign-in-text";
 
@@ -143,7 +149,8 @@ export default async function SignInPage({
   );
   const method = active.includes("email") ? "password" : "sso";
   const emailLink = active.includes("magic-link");
-  const next = resolveNextPath(rawNext, localeHref(locale, "/account"));
+  const fallback = localeHref(locale, "/account");
+  const next = resolveNextPath(rawNext, fallback);
   // A failed link returns here, keeping the visitor's destination.
   const signInHref = `${localeHref(locale, "/sign-in")}?next=${encodeURIComponent(next)}`;
   // Only the email link produces `?error=` here; with it off, today's render.
@@ -151,27 +158,7 @@ export default async function SignInPage({
   const defaultEmail = hintedEmail(rawEmail);
 
   const spoke = await spokeFromNext(next);
-  // The acknowledgement (#8790 D6) — the hub's own policy pages, through the
-  // inline link variant; the card never hardcodes a path.
-  // `caption` is the muted footnote role; a default `Text` would re-impose
-  // body size and the foreground colour over the card's footnote wrapper.
-  const footnote = (
-    <Text as="p" variant="caption">
-      {text.acknowledgement.lead}{" "}
-      <Link variant="inline" href={localeHref(locale, "/terms")}>
-        {text.acknowledgement.terms}
-      </Link>
-      ,{" "}
-      <Link variant="inline" href={localeHref(locale, "/privacy")}>
-        {text.acknowledgement.privacy}
-      </Link>
-      , and{" "}
-      <Link variant="inline" href={localeHref(locale, "/working-agreement")}>
-        {text.acknowledgement.workingAgreement}
-      </Link>
-      .
-    </Text>
-  );
+  const t = await getTranslations({ locale, namespace: "signIn" });
   return (
     <SignInCard
       logo={siteLogo()}
@@ -179,19 +166,15 @@ export default async function SignInPage({
         ? {
             backLink: {
               href: `${spoke.origin}/account`,
-              label: text.backTo(spoke.name),
-            },
-          }
-        : {})}
-      {...(text.prospect
-        ? {
-            prospect: {
-              ...text.prospect,
-              href: localeHref(locale, "/sign-up"),
+              label: t("backTo", { site: spoke.name }),
             },
           }
         : {})}
-      footnote={footnote}
+      prospect={{
+        ...text.prospect,
+        href: hrefWithNext(localeHref(locale, "/sign-up"), next, fallback),
+      }}
+      footnote={legalFootnote(locale, text.acknowledgement)}
       providers={providers}
       method={method}
       next={next}

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

@@ -11,12 +11,12 @@
  * method from auth-env and hands them in; this component never reads env
  * itself.
  *
- * The brand mark is the SHELL's since #5963 — this island renders no `logo`,
- * or it would appear twice on the page.
+ * The site's mark arrives as `logo` (#8790 D3) and renders centred in the
+ * card; the shell draws no brand row.
  *
- * No sign-up affordance anywhere: `footer="none"` drops the "Not a member?
- * Create an account" cross-link (Better Auth `emailAndPassword.disableSignUp`
- * posture).
+ * `footer="none"` drops AuthCard's "Not a member? Create an account"
+ * cross-link; the page's `prospect` line ("Don't have an account? Sign up",
+ * #9662) is the one route to `/sign-up`.
  *
  * Password path: `apps/web/auth.ts` does not enable `emailAndPassword` today,
  * so `signIn.email` is wired but inert (Better Auth answers with an error)
@@ -242,7 +242,7 @@ export function SignInCard({
         {...(logo !== undefined ? { logo } : {})}
         {...(forgotHref !== undefined ? { forgotHref } : {})}
         {...(forgot !== undefined ? { forgot } : {})}
-        // "Welcome back" stands alone (#8790 D3): no subhead unless the card
+        // The heading stands alone (#8790 D3): no subhead unless the card
         // is inert and must say why.
         subhead={notConfigured ? notConfiguredSubhead : ""}
         {...(prospect !== undefined ? { prospect } : {})}

package/templates/apps/web/app/[locale]/(auth)/sign-in/sign-in-text.ts

@@ -4,26 +4,36 @@
  * One helper so `/sign-in` and the `(authed)` gate render the SAME labels from
  * the same `signIn` keys — the gate composes `SignInCard` when the email
  * sign-in link is on, and a second copy of this object would drift.
+ *
+ * The heading names the site — "Sign in to <site>" (#9662) — from
+ * `SITE_NAME`, the deployment's own display name (env, else `_site.mdx`),
+ * never from the request.
+ *
+ * Plain data only: the gate hands this object to a client component, and a
+ * function cannot cross that boundary (`/sign-in` resolves its "Back to
+ * <spoke>" line itself).
  */
 
 import type { AuthCardLabels } from "@working-theory/ui/blocks";
 import { getTranslations } from "next-intl/server";
 
+import { SITE_NAME } from "../../../../lib/site-brand";
+
 import type { SignInEmailLinkLabels } from "./sign-in-card";
 
 export interface SignInCardText {
   labels: AuthCardLabels;
-  /** "Back to {site}" — the spoke's name goes in (#8790 D2). */
-  backTo: (site: string) => string;
-  /** The acknowledgement sentence's parts (#8790 D6). */
+  /** The acknowledgement sentence's parts (#8790 D6; Terms + Privacy, #9662). */
   acknowledgement: {
     lead: string;
     terms: string;
+    and: string;
     privacy: string;
-    workingAgreement: string;
+    /** The sentence's closing mark — a message, so a locale can use its own. */
+    end: string;
   };
-  /** The prospect line, when the site's messages carry it (#8790 D3). */
-  prospect?: { prompt: string; linkLabel: string };
+  /** The prospect line toggling to /sign-up (#8790 D3; on by default, #9662). */
+  prospect: { prompt: string; linkLabel: string };
   notConfiguredSubhead: string;
   errorLabels: { signInFailed: string; providerFailed: string };
   emailLinkLabels: SignInEmailLinkLabels;
@@ -31,32 +41,13 @@ export interface SignInCardText {
   emailLinkExpired: string;
 }
 
-type HasKey = Parameters<Awaited<ReturnType<typeof getTranslations>>["has"]>[0];
-function optional(
-  t: Awaited<ReturnType<typeof getTranslations>>,
-  key: string,
-): boolean {
-  // A partial `getTranslations` mock (the (authed) gate suite's) carries no
-  // `has`; an absent `has` reads as an absent key, never a throw.
-  return typeof t.has === "function" && t.has(key as HasKey);
-}
-
-function prospect(
-  prompt: string,
-  linkLabel: string,
-): { prospect: { prompt: string; linkLabel: string } } | null {
-  return prompt.trim() && linkLabel.trim()
-    ? { prospect: { prompt, linkLabel } }
-    : null;
-}
-
 export async function resolveSignInCardText(
   locale: string,
 ): Promise<SignInCardText> {
   const t = await getTranslations({ locale, namespace: "signIn" });
   return {
     labels: {
-      signInHeading: t("heading"),
+      signInHeading: t("heading", { site: SITE_NAME }),
       ssoPrefix: t("ssoPrefix"),
       google: t("google"),
       github: t("github"),
@@ -70,20 +61,14 @@ export async function resolveSignInCardText(
       useEmailLink: t("useEmailLink"),
       emailPlaceholder: t("emailPlaceholder"),
     },
-    backTo: (site) => t("backTo", { site }),
     acknowledgement: {
       lead: t("acknowledgement"),
       terms: t("termsLink"),
+      and: t("acknowledgementAnd"),
       privacy: t("privacyLink"),
-      workingAgreement: t("workingAgreementLink"),
+      end: t("acknowledgementEnd"),
     },
-    // The prospect line (#8790 D3) is OFF until a site ADDS both keys to its
-    // messages — the shipped catalog carries neither (every leaf must be a
-    // non-empty string), so presence is the switch. The keys are optional
-    // extensions of the typed catalog, hence the cast on `has`.
-    ...(optional(t, "prospectPrompt") && optional(t, "prospectLink")
-      ? prospect(t("prospectPrompt" as never), t("prospectLink" as never))
-      : {}),
+    prospect: { prompt: t("prospectPrompt"), linkLabel: t("prospectLink") },
 
     notConfiguredSubhead: t("notConfiguredSubhead"),
     errorLabels: {

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

@@ -0,0 +1,301 @@
+/**
+ * `/sign-up`'s method and its failed-link notice (#9667 D6, AC-3).
+ *
+ * With the email sign-in link active, an open `/sign-up` renders AuthCard's
+ * one-field "Send me a magic link" body; without it, #9662's password or
+ * provider body. A failed link lands back here with `?error=<code>`, mapped
+ * to fixed copy and never echoed.
+ *
+ * #9912 D4, D5: the page reads `?next=` through `resolveNextPath`, as
+ * `/sign-in` does. The "Sign in" toggle (open and closed card) carries it, and
+ * the password, Google and magic-link paths each hand it to Better Auth as
+ * `callbackURL`, the magic link's failed-link return keeping it too. A `next`
+ * resolveNextPath refuses, or none, gives `/account` and the bare links.
+ *
+ * `next-intl/server` is mocked globally (apps/web/__tests__/setup.ts) against
+ * the real en.json.
+ */
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+const mockGetActiveProviderIds = jest.fn();
+const mockIsSignUpOpen = jest.fn();
+// eslint-disable-next-line no-restricted-syntax -- #507: auth-env.ts is a pure env-introspection module with no external boundary to mock instead.
+jest.mock("../../../../../lib/auth-env", () => ({
+  __esModule: true,
+  getActiveProviderIds: () => mockGetActiveProviderIds(),
+  isSignUpOpen: () => mockIsSignUpOpen(),
+  isResetAvailable: () => false,
+  resetSendConfigured: () => false,
+}));
+
+const mockSocial = jest.fn();
+const mockSignUpEmail = jest.fn();
+const mockFetch = jest.fn();
+jest.mock("better-auth/react", () => ({
+  __esModule: true,
+  createAuthClient: () => ({
+    signIn: {
+      social: (...args: unknown[]) => mockSocial(...args),
+      email: jest.fn(),
+    },
+    signUp: { email: (...args: unknown[]) => mockSignUpEmail(...args) },
+    $fetch: (...args: unknown[]) => mockFetch(...args),
+  }),
+}));
+
+import en from "../../../../../messages/en.json";
+import SignUpPage from "../page";
+
+async function renderSignUp(
+  searchParams: Record<string, string | string[]> = {},
+): Promise<void> {
+  render(
+    await SignUpPage({
+      params: Promise.resolve({ locale: "en" }),
+      searchParams: Promise.resolve(searchParams),
+    }),
+  );
+}
+
+beforeEach(() => {
+  mockGetActiveProviderIds.mockReset();
+  mockIsSignUpOpen.mockReset().mockReturnValue(true);
+  mockSocial.mockReset().mockResolvedValue({ data: {}, error: null });
+  mockSignUpEmail.mockReset().mockResolvedValue({ data: {}, error: null });
+  mockFetch.mockReset().mockResolvedValue({ data: {}, error: null });
+});
+
+describe("the method (D6)", () => {
+  it('with "magic-link" active: one Email field, Send me a magic link, no password, the agreements, "or" + Google', async () => {
+    mockGetActiveProviderIds.mockReturnValue(["google", "email", "magic-link"]);
+    await renderSignUp();
+    expect(screen.getByTestId("auth-submit")).toHaveTextContent(
+      en.auth.magicLinkSubmit,
+    );
+    expect(screen.queryByTestId("auth-password")).toBeNull();
+    expect(screen.getByTestId("sign-up-agreements")).toBeInTheDocument();
+    expect(screen.getByTestId("auth-divider")).toHaveTextContent(
+      en.auth.orContinue,
+    );
+    expect(screen.getByTestId("auth-social-google")).toBeInTheDocument();
+  });
+
+  it('with only ["google", "email"]: the password body', async () => {
+    mockGetActiveProviderIds.mockReturnValue(["google", "email"]);
+    await renderSignUp();
+    expect(screen.getByTestId("auth-password")).toBeInTheDocument();
+    expect(screen.getByTestId("auth-submit")).toHaveTextContent(
+      en.auth.signUpSubmit,
+    );
+  });
+});
+
+describe("the failed-link notice (D6)", () => {
+  beforeEach(() => {
+    mockGetActiveProviderIds.mockReturnValue(["magic-link"]);
+  });
+
+  it.each([
+    ["INVALID_TOKEN", en.auth.signUpLinkExpired],
+    ["new_user_signup_disabled", en.auth.signUpLinkExpired],
+    ["AGREEMENTS_REQUIRED", en.auth.signUpAgreementsRequired],
+    ["AGREEMENTS_UNAVAILABLE", en.auth.signUpFailed],
+  ])("?error=%s renders its copy", async (error, copy) => {
+    await renderSignUp({ error });
+    expect(screen.getByTestId("sign-up-link-notice")).toHaveTextContent(copy);
+  });
+
+  it("a repeated error reads its first value, and the raw value is never echoed", async () => {
+    await renderSignUp({ error: ["INVALID_TOKEN", "<b>x</b>"] });
+    const notice = screen.getByTestId("sign-up-link-notice");
+    expect(notice).toHaveTextContent(en.auth.signUpLinkExpired);
+    expect(notice).not.toHaveTextContent("INVALID_TOKEN");
+  });
+
+  it("no error, no notice", async () => {
+    await renderSignUp();
+    expect(screen.queryByTestId("sign-up-link-notice")).toBeNull();
+  });
+
+  it("the password method shows no link notice", async () => {
+    mockGetActiveProviderIds.mockReturnValue(["email"]);
+    await renderSignUp({ error: "INVALID_TOKEN" });
+    expect(screen.queryByTestId("sign-up-link-notice")).toBeNull();
+  });
+});
+
+/** A continue path as the hub's authorize step hands it (#8146). */
+const CONTINUATION = "/api/auth/hub/continue/AbC-123_xyz";
+
+/** The three values `resolveNextPath` refuses that a toggle must never echo. */
+const REFUSED: ReadonlyArray<[string, string]> = [
+  ["a protocol-relative next", "//evil.example"],
+  ["an absolute next", "https://evil.example/x"],
+  ["a backslash next", "/\\evil.example"],
+];
+
+/** Each query that carries no `next` a toggle may echo: the refused three, and none. */
+const UNCARRIED: Array<[string, Record<string, string>]> = [
+  ...REFUSED.map(([label, next]): [string, Record<string, string>] => [
+    label,
+    { next },
+  ]),
+  ["no next", {}],
+];
+
+/** The completion cases with no `next` to honour: one refused, and none. */
+const TO_ACCOUNT: Array<[string, Record<string, string>]> = [
+  ["a refused next", { next: "//evil.example" }],
+  ["no next", {}],
+];
+
+describe("the Sign in toggle keeps the next (#9912 D4)", () => {
+  beforeEach(() => {
+    mockGetActiveProviderIds.mockReturnValue(["google", "email"]);
+  });
+
+  it("carries a validated next on the open card", async () => {
+    await renderSignUp({ next: "/account/billing" });
+    expect(screen.getByTestId("auth-card-prospect-link")).toHaveAttribute(
+      "href",
+      "/sign-in?next=%2Faccount%2Fbilling",
+    );
+  });
+
+  it("carries a validated next on the closed (invitation) card", async () => {
+    mockIsSignUpOpen.mockReturnValue(false);
+    await renderSignUp({ next: "/account/billing" });
+    expect(screen.getByTestId("auth-card-prospect-link")).toHaveAttribute(
+      "href",
+      "/sign-in?next=%2Faccount%2Fbilling",
+    );
+  });
+
+  it.each(UNCARRIED)(
+    "%s gives the bare /sign-in on the open card",
+    async (_label, query) => {
+      await renderSignUp(query);
+      expect(screen.getByTestId("auth-card-prospect-link")).toHaveAttribute(
+        "href",
+        "/sign-in",
+      );
+    },
+  );
+
+  it.each(UNCARRIED)(
+    "%s gives the bare /sign-in on the closed card",
+    async (_label, query) => {
+      mockIsSignUpOpen.mockReturnValue(false);
+      await renderSignUp(query);
+      expect(screen.getByTestId("auth-card-prospect-link")).toHaveAttribute(
+        "href",
+        "/sign-in",
+      );
+    },
+  );
+});
+
+describe("sign-up completion follows the validated next (#9912 D5)", () => {
+  async function tickTerms(): Promise<void> {
+    await userEvent.setup().click(screen.getByTestId("consent-account_terms"));
+  }
+
+  async function submitPassword(): Promise<void> {
+    const user = userEvent.setup();
+    await tickTerms();
+    await user.type(screen.getByTestId("auth-email"), "ada@example.com");
+    await user.type(
+      screen.getByTestId("auth-password"),
+      "correct horse battery staple",
+    );
+    await user.click(screen.getByTestId("auth-submit"));
+  }
+
+  async function clickGoogle(): Promise<void> {
+    await tickTerms();
+    await userEvent.setup().click(screen.getByTestId("auth-social-google"));
+  }
+
+  async function submitLink(): Promise<void> {
+    const user = userEvent.setup();
+    await tickTerms();
+    await user.type(screen.getByTestId("auth-email"), "ada@example.com");
+    await user.click(screen.getByTestId("auth-submit"));
+  }
+
+  describe("with a continuation next", () => {
+    it("password: signUp.email's callbackURL is the next", async () => {
+      mockGetActiveProviderIds.mockReturnValue(["google", "email"]);
+      await renderSignUp({ next: CONTINUATION });
+      await submitPassword();
+      expect(mockSignUpEmail).toHaveBeenCalledTimes(1);
+      expect(mockSignUpEmail.mock.calls[0][0]).toMatchObject({
+        callbackURL: CONTINUATION,
+      });
+    });
+
+    it("Google: signIn.social's callbackURL is the next", async () => {
+      mockGetActiveProviderIds.mockReturnValue(["google", "email"]);
+      await renderSignUp({ next: CONTINUATION });
+      await clickGoogle();
+      expect(mockSocial).toHaveBeenCalledTimes(1);
+      expect(mockSocial.mock.calls[0][0]).toMatchObject({
+        provider: "google",
+        callbackURL: CONTINUATION,
+      });
+    });
+
+    it("magic link: the request's callbackURL is the next and its failed-link return keeps it", async () => {
+      mockGetActiveProviderIds.mockReturnValue(["google", "magic-link"]);
+      await renderSignUp({ next: CONTINUATION });
+      await submitLink();
+      expect(mockFetch).toHaveBeenCalledTimes(1);
+      const [path, init] = mockFetch.mock.calls[0] as [
+        string,
+        { body: Record<string, unknown> },
+      ];
+      expect(path).toBe("/sign-in/magic-link");
+      expect(init.body.callbackURL).toBe(CONTINUATION);
+      expect(init.body.errorCallbackURL).toBe(
+        `/sign-up?next=${encodeURIComponent(CONTINUATION)}`,
+      );
+    });
+  });
+
+  describe.each(TO_ACCOUNT)("with %s", (_label, query) => {
+    it("password: callbackURL /account", async () => {
+      mockGetActiveProviderIds.mockReturnValue(["google", "email"]);
+      await renderSignUp(query);
+      await submitPassword();
+      expect(mockSignUpEmail).toHaveBeenCalledTimes(1);
+      expect(mockSignUpEmail.mock.calls[0][0]).toMatchObject({
+        callbackURL: "/account",
+      });
+    });
+
+    it("Google: callbackURL /account", async () => {
+      mockGetActiveProviderIds.mockReturnValue(["google", "email"]);
+      await renderSignUp(query);
+      await clickGoogle();
+      expect(mockSocial).toHaveBeenCalledTimes(1);
+      expect(mockSocial.mock.calls[0][0]).toMatchObject({
+        provider: "google",
+        callbackURL: "/account",
+      });
+    });
+
+    it("magic link: callbackURL /account and the bare /sign-up return", async () => {
+      mockGetActiveProviderIds.mockReturnValue(["google", "magic-link"]);
+      await renderSignUp(query);
+      await submitLink();
+      expect(mockFetch).toHaveBeenCalledTimes(1);
+      const [, init] = mockFetch.mock.calls[0] as [
+        string,
+        { body: Record<string, unknown> },
+      ];
+      expect(init.body.callbackURL).toBe("/account");
+      expect(init.body.errorCallbackURL).toBe("/sign-up");
+    });
+  });
+});

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,
+    );
+  });
+});