create-ailk 0.24.0 → 0.26.0

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,108 @@
+/**
+ * `/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.
+ *
+ * `next-intl/server` is mocked globally (apps/web/__tests__/setup.ts) against
+ * the real en.json.
+ */
+import { render, screen } from "@testing-library/react";
+
+const mockGetActiveProviderIds = 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: () => true,
+  isResetAvailable: () => false,
+  resetSendConfigured: () => false,
+}));
+
+jest.mock("better-auth/react", () => ({
+  __esModule: true,
+  createAuthClient: () => ({
+    signIn: { social: jest.fn(), email: jest.fn() },
+    signUp: { email: jest.fn() },
+    $fetch: jest.fn(),
+  }),
+}));
+
+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();
+});
+
+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();
+  });
+});

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