create-ailk 0.5.0 → 0.6.0

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

@@ -0,0 +1,109 @@
+/**
+ * `/[locale]/forgot-password` — request a password-reset link (#5963, wired by #5962).
+ *
+ * RSC. #5963 shipped this as a static `forgot` intent with no `onSubmit`;
+ * #5962 hands the available branch to a client island that calls Better Auth.
+ *
+ * Unavailable (the default) renders the `invitation` skeleton relabelled
+ * through `labels`: copy only, with the footer's "Back to sign in". Never a
+ * 404 — the segment exists as a file, so Next resolves it whatever the
+ * predicate says.
+ *
+ * The predicate is `resetSendConfigured()`, NOT the flag-only
+ * `isResetAvailable()`. The flag alone is the operator's INTENT; the
+ * conjunction is whether the flow can actually complete. Keying the page on
+ * intent would render a live form on a deployment whose server refuses to
+ * send — a form whose only possible outcome is the error state.
+ *
+ * WHAT SHARES THAT PREDICATE, AND WHAT DOES NOT (#6068). One predicate decides
+ * this page, `/reset-password`, and whether `sendResetPassword` is wired at
+ * all, so no visitor is offered a step the server would refuse. `auth.ts`'s
+ * `onPasswordReset` is DELIBERATELY OUTSIDE it: Better Auth registers the
+ * `/reset-password` POST on `emailAndPassword.enabled` rather than on the send
+ * conjunction, so a token minted before an operator removed a conjunct stays
+ * consumable for its whole hour. Gating that callback too would make exactly
+ * those resets the ones that skip sibling-token invalidation and the § D17
+ * notice — the degraded deployment getting the weaker guarantee. Offering a
+ * step is predicated; cleaning up after one that already happened is not.
+ *
+ * The `redirectTo` the island needs is built HERE, server-side, from
+ * `BETTER_AUTH_URL`. Resolving it in the browser from `window.location` would
+ * hand an attacker-influenced origin to the one call that mints a credential.
+ */
+
+import { localeHref } from "@working-theory/ui";
+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 { resetSendConfigured } from "../../../../lib/auth-env";
+
+import { ForgotPasswordCard } from "./forgot-password-card";
+
+interface Props {
+  params: Promise<{ locale: string }>;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "auth" });
+  return { title: t("forgotTitle"), description: t("forgotDescription") };
+}
+
+export default async function ForgotPasswordPage({
+  params,
+}: Props): Promise<ReactElement> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "auth" });
+  const signInHref = localeHref(locale, "/sign-in");
+
+  const available = resetSendConfigured();
+
+  if (!available) {
+    const labels: AuthCardLabels = {
+      invitationHeading: t("forgotUnavailableHeading"),
+      invitationSubhead: t("forgotUnavailableSubhead"),
+      invitationBody: t("forgotUnavailableBody"),
+      backToSignIn: t("backToSignIn"),
+    };
+    return (
+      <div className="flex flex-col gap-4" data-testid="forgot-password-page">
+        <AuthCard
+          intent="invitation"
+          signInHref={signInHref}
+          labels={labels}
+        />
+      </div>
+    );
+  }
+
+  const labels: AuthCardLabels = {
+    forgotHeading: t("forgotHeading"),
+    forgotSubhead: t("forgotSubhead"),
+    forgotSubmit: t("forgotSubmit"),
+    email: t("email"),
+    backToSignIn: t("backToSignIn"),
+    sentHeading: t("sentHeading"),
+    sentSubhead: t("sentSubhead"),
+    sentBody: t("sentBody"),
+    sentToPrefix: t("sentToPrefix"),
+  };
+
+  // Absolute and same-origin: `originCheck` compares an ORIGIN, and the
+  // trusted allow-list has exactly one member. An empty or relative value
+  // would make Better Auth reject the emitted link's own callback.
+  const resetUrl = `${process.env.BETTER_AUTH_URL ?? ""}${localeHref(
+    locale,
+    "/reset-password",
+  )}`;
+
+  return (
+    <ForgotPasswordCard
+      resetUrl={resetUrl}
+      signInHref={signInHref}
+      labels={labels}
+      errorLabels={{ requestFailed: t("resetRequestFailed") }}
+    />
+  );
+}

package/templates/apps/web/app/[locale]/(auth)/layout.tsx

@@ -0,0 +1,92 @@
+/**
+ * `/[locale]/(auth)` — the auth route group's layout (#5963).
+ *
+ * Mounts `AuthShell` for the five auth pages (`/sign-in`, `/sign-up`,
+ * `/forgot-password`, `/reset-password`, `/verify-email`). A route group
+ * contributes no URL segment, so every existing link to `/sign-in` keeps
+ * working; what changes is the frame.
+ *
+ * The marketing Nav + Footer are dropped ONE level up, in
+ * `app/[locale]/layout.tsx`: a route group's layout nests INSIDE its parent
+ * segment's layout, so this file cannot escape an ancestor's chrome on its
+ * own. It branches on `lib/auth-routes.ts`'s `isAuthPath()` — the same module
+ * that names the five segments below.
+ *
+ * Slots only: the shell owns the geometry, this layout supplies the site's own
+ * brand mark, footer hrefs and language switcher.
+ */
+
+import { AuthShell } from "@working-theory/templates/shells";
+import { localeHref } from "@working-theory/ui";
+import { LocaleSwitcherNav } from "@working-theory/ui/blocks";
+import { readLocales } from "@working-theory/web-i18n";
+import { headers } from "next/headers";
+import { getTranslations } from "next-intl/server";
+import type { ReactElement, ReactNode } from "react";
+
+import { siteLogo } from "../../../lib/site-brand";
+
+interface Props {
+  children: ReactNode;
+  params: Promise<{ locale: string }>;
+}
+
+export default async function AuthLayout({
+  children,
+  params,
+}: Props): Promise<ReactElement> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "auth" });
+
+  // `/faq` is the third always-scaffolded core route beside `/privacy` and
+  // `/terms` (the locale layout's own `legalLinks` comment): there is no
+  // `/help` segment in the tree, and inventing one is out of scope.
+  const footerLinks = [
+    { label: t("footerPrivacy"), href: localeHref(locale, "/privacy") },
+    { label: t("footerTerms"), href: localeHref(locale, "/terms") },
+    { label: t("footerHelp"), href: localeHref(locale, "/faq") },
+  ];
+
+  const pathname = (await headers()).get("x-pathname") ?? "/";
+
+  return (
+    <AuthShell
+      brand={
+        /*
+         * The mark is clamped to 28px the way `BrandLogo` clamps it inside
+         * Nav: `siteLogo()` emits an <img> with a height ATTRIBUTE and no
+         * width, and an SVG with no intrinsic size then stretches to the
+         * container — it rendered 48 x 350 here before the clamp. The shell
+         * owns the row's geometry; the site owns its mark's size.
+         */
+        <span className="inline-flex h-7 items-center [&>img]:h-full [&>img]:w-auto [&>img]:object-contain">
+          {siteLogo()}
+        </span>
+      }
+      brandHref={localeHref(locale, "/")}
+      footerLinks={footerLinks}
+      languageSwitcher={
+        <LocaleSwitcherNav
+          current={locale}
+          locales={readLocales()}
+          pathname={pathname}
+          // AuthShell's footer link rows are already drawn at a 44px tap
+          // target (`max-md:py-3.5`) below `md` — this matches the
+          // switcher's DRAWN size to them so it doesn't read as a stray
+          // smaller control (#6018 A2). Not a new accessibility fix: the
+          // switcher's touch TARGET was already 44px via its own hit-area
+          // overlay (#5989) regardless of this prop.
+          size="touch"
+        />
+      }
+    >
+      {/*
+       * ADR-0027 — exactly one <main> per page. AuthShell's content slot is a
+       * non-landmark <div> (the shell's own contract), and every page in this
+       * group is one card, so the group's layout owns the landmark rather than
+       * repeating it in five thin pages.
+       */}
+      <main>{children}</main>
+    </AuthShell>
+  );
+}

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

@@ -0,0 +1,135 @@
+/**
+ * `/[locale]/reset-password` — set a new password (#5963, wired by #5962).
+ *
+ * Three states, decided server-side:
+ *   - reset not available        → the relabelled `invitation` skeleton. A
+ *                                  reset link cannot be used on a site that
+ *                                  does not offer reset.
+ *   - available, `?error=…`      → the expired/invalid-token state. Better
+ *                                  Auth redirects here with `?error=INVALID_TOKEN`
+ *                                  when the token is missing, unknown or past
+ *                                  its hour.
+ *   - available, otherwise       → the `reset` island, carrying `?token=`.
+ *
+ * Never a 404 in any of the three — the segment is a file.
+ *
+ * The availability predicate is `resetSendConfigured()`, NOT the flag-only
+ * `isResetAvailable()` (code review, AC-2). This is the CONSUME half of the
+ * flow, and Better Auth registers its `/reset-password` POST on
+ * `emailAndPassword.enabled` — which stays true when a send conjunct goes
+ * away. So for the token's whole hour after an operator removes, say,
+ * `BETTER_AUTH_URL`, an outstanding link would otherwise still set a password
+ * on a site that has stopped offering reset. Keying this page on the same
+ * predicate that decides `sendResetPassword` closes the visible half; the
+ * server-side half is `onPasswordReset` in `auth.ts`, which is now
+ * unconditional so a consumed token always invalidates its siblings and
+ * always attempts the § D17 notice, configured or not.
+ *
+ * The token is read from `searchParams` and handed to the island as a prop. It
+ * is the credential, so nothing here logs it and nothing re-appends it to a
+ * URL.
+ */
+
+import { localeHref } from "@working-theory/ui";
+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 { resetSendConfigured } from "../../../../lib/auth-env";
+
+import { ResetPasswordCard } from "./reset-password-card";
+
+interface Props {
+  params: Promise<{ locale: string }>;
+  searchParams?: Promise<{ token?: string | string[]; error?: string | string[] }>;
+}
+
+/** First value only — a repeated query param must not become an array here. */
+function firstValue(raw: string | string[] | undefined): string {
+  if (Array.isArray(raw)) return raw[0] ?? "";
+  return raw ?? "";
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "auth" });
+  return { title: t("resetTitle"), description: t("resetDescription") };
+}
+
+export default async function ResetPasswordPage({
+  params,
+  searchParams,
+}: Props): Promise<ReactElement> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "auth" });
+  const signInHref = localeHref(locale, "/sign-in");
+
+  const query = searchParams ? await searchParams : {};
+  const token = firstValue(query.token);
+  const error = firstValue(query.error);
+
+  const available = resetSendConfigured();
+
+  if (!available) {
+    const labels: AuthCardLabels = {
+      invitationHeading: t("resetUnavailableHeading"),
+      invitationSubhead: t("resetUnavailableSubhead"),
+      invitationBody: t("resetUnavailableBody"),
+      backToSignIn: t("backToSignIn"),
+    };
+    return (
+      <div className="flex flex-col gap-4" data-testid="reset-password-page">
+        <AuthCard intent="invitation" signInHref={signInHref} labels={labels} />
+      </div>
+    );
+  }
+
+  if (error) {
+    // The `invitation` skeleton relabelled again — copy only, with the route
+    // back to sign-in. No new AuthCard intent and no new prop: `resolveLabel()`
+    // is the seam that already exists, so `packages/ui` stays out of this diff.
+    const labels: AuthCardLabels = {
+      invitationHeading: t("resetExpiredHeading"),
+      invitationSubhead: t("resetExpiredSubhead"),
+      invitationBody: t("resetExpiredBody"),
+      backToSignIn: t("backToSignIn"),
+    };
+    return (
+      <div
+        className="flex flex-col gap-4"
+        data-testid="reset-password-page"
+      >
+        <div data-testid="reset-token-error">
+          <AuthCard
+            intent="invitation"
+            signInHref={signInHref}
+            labels={labels}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  const labels: AuthCardLabels = {
+    resetHeading: t("resetHeading"),
+    resetSubhead: t("resetSubhead"),
+    resetSubmit: t("resetSubmit"),
+    newPassword: t("newPassword"),
+    confirmPassword: t("confirmPassword"),
+    backToSignIn: t("backToSignIn"),
+  };
+
+  return (
+    <ResetPasswordCard
+      token={token}
+      signInHref={signInHref}
+      labels={labels}
+      errorLabels={{
+        resetFailed: t("resetFailed"),
+        invalidToken: t("resetExpiredSubhead"),
+        mismatch: t("passwordMismatch"),
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,109 @@
+"use client"; // Better Auth's client call (resetPassword) + the error state
+
+/**
+ * ResetPasswordCard — `/reset-password`'s client island (#5962).
+ *
+ * The token identifies the account, so the card renders no email field. It is
+ * passed to `authClient.resetPassword` in the request BODY and is never
+ * re-appended to a URL by this component — the one it arrived on is already in
+ * the browser's history and in every access log between here and the edge, and
+ * a second copy buys nothing but more places to leak from.
+ *
+ * On success it hard-navigates rather than routing client-side — see the
+ * comment at the call.
+ *
+ * An absent token is treated exactly like an expired one. That case is
+ * reachable — someone opening `/reset-password` directly — and a form that
+ * submits nothing and fails obscurely is worse than the honest message.
+ */
+
+import { AuthCard, type AuthCardLabels } from "@working-theory/ui/blocks";
+import { createAuthClient } from "better-auth/react";
+import type { ReactElement } from "react";
+import { useState } from "react";
+
+const authClient = createAuthClient();
+
+export interface ResetPasswordCardProps {
+  /** The `?token=` Better Auth redirected back with. May be empty. */
+  token: string;
+  /** Where a completed reset lands. */
+  signInHref: string;
+  /** Translated AuthCard labels (resolved server-side by the page). */
+  labels: AuthCardLabels;
+  /** Translated error copy. */
+  errorLabels: { resetFailed: string; invalidToken: string; mismatch: string };
+  /**
+   * How a completed reset leaves the page. Defaults to a FULL navigation,
+   * deliberately: the reset just revoked every session this browser held, so
+   * every piece of client state behind it is stale and a hard load is the
+   * honest way to drop it.
+   *
+   * Injectable for the same reason `createAuth` takes an optional `prisma` —
+   * jsdom's `window.location` is read-only, so a test cannot observe the real
+   * one. No production caller passes this.
+   */
+  navigate?: (href: string) => void;
+}
+
+const defaultNavigate = (href: string): void => {
+  window.location.assign(href);
+};
+
+export function ResetPasswordCard({
+  token,
+  signInHref,
+  labels,
+  errorLabels,
+  navigate = defaultNavigate,
+}: ResetPasswordCardProps): ReactElement {
+  const [errors, setErrors] = useState<{
+    password?: string;
+    confirmPassword?: string;
+  }>({});
+
+  const submit = async (
+    password: string,
+    confirmPassword: string,
+  ): Promise<void> => {
+    setErrors({});
+
+    if (password !== confirmPassword) {
+      setErrors({ confirmPassword: errorLabels.mismatch });
+      return;
+    }
+
+    if (!token) {
+      setErrors({ password: errorLabels.invalidToken });
+      return;
+    }
+
+    const failed = await authClient
+      .resetPassword({ newPassword: password, token })
+      .then(
+        (res) => Boolean(res?.error),
+        () => true,
+      );
+
+    if (failed) {
+      setErrors({ password: errorLabels.resetFailed });
+      return;
+    }
+
+    navigate(signInHref);
+  };
+
+  return (
+    <div className="flex flex-col gap-4" data-testid="reset-password-page">
+      <AuthCard
+        intent="reset"
+        signInHref={signInHref}
+        labels={labels}
+        onSubmit={(data) =>
+          void submit(data.password ?? "", data.confirmPassword ?? "")
+        }
+        errors={errors}
+      />
+    </div>
+  );
+}

package/templates/apps/web/app/[locale]/{sign-in → (auth)/sign-in}/__tests__/page.test.tsx

@@ -13,6 +13,11 @@
  *   (e) a foreign / protocol-relative `?next=` falls back to /account.
  *   (f) password submit → `signIn.email` with the typed credentials; an
  *       error result renders the signInFailed message.
+ *   (g) the "Forgot password?" link renders only when the reset predicate is
+ *       true — never a dead end pointing at reset's not-available state
+ *       (#6018 AC-1). (#6068 repointed that predicate from `isResetAvailable()`
+ *       to `resetSendConfigured()`; the mock below binds both to one fn, so
+ *       these cases read identically either way.)
  *
  * `next-intl/server` is mocked globally (apps/web/__tests__/setup.ts) against
  * the real en.json, so `signIn` copy is asserted by its real strings.
@@ -21,10 +26,21 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 const mockGetActiveProviderIds = jest.fn();
+const mockIsResetAvailable = jest.fn();
 // eslint-disable-next-line no-restricted-syntax -- #507: mock-internal rewrite pending; auth-env.ts is a pure env-introspection module with no external boundary to mock instead.
-jest.mock("../../../../lib/auth-env", () => ({
+jest.mock("../../../../../lib/auth-env", () => ({
   __esModule: true,
   getActiveProviderIds: () => mockGetActiveProviderIds(),
+  isResetAvailable: () => mockIsResetAvailable(),
+  // #6068 repointed the forgot link from the flag-only `isResetAvailable()`
+  // at the send conjunction. This is a PARTIAL module mock, so an absent
+  // member is `undefined` rather than the real function — the page would
+  // throw on EVERY render here, not only the two (g) cases. Bound to the SAME
+  // jest.fn() the flag already drives, so every case below keeps the exact
+  // truth value and the exact expectation it was written with: no assertion
+  // in this file changes. Same remedy, same reason, as the sibling
+  // `auth-pages.test.tsx` mock.
+  resetSendConfigured: () => mockIsResetAvailable(),
 }));
 
 const mockSocial = jest.fn();
@@ -39,7 +55,7 @@ jest.mock("better-auth/react", () => ({
   }),
 }));
 
-import en from "../../../../messages/en.json";
+import en from "../../../../../messages/en.json";
 import Page, { generateMetadata } from "../page";
 
 async function renderPage(next?: string): Promise<void> {
@@ -52,6 +68,7 @@ async function renderPage(next?: string): Promise<void> {
 
 beforeEach(() => {
   mockGetActiveProviderIds.mockReset().mockReturnValue(["google"]);
+  mockIsResetAvailable.mockReset().mockReturnValue(false);
   mockSocial.mockReset().mockResolvedValue({ data: {}, error: null });
   mockEmail.mockReset().mockResolvedValue({ data: {}, error: null });
 });
@@ -149,4 +166,33 @@ describe("/sign-in page", () => {
     });
     expect(await screen.findByText(en.signIn.signInFailed)).toBeInTheDocument();
   });
+
+  it("(f) a rejected signIn.email call surfaces signInFailed too (code review, #6018)", async () => {
+    const user = userEvent.setup();
+    mockGetActiveProviderIds.mockReturnValue(["google", "email"]);
+    mockEmail.mockRejectedValue(new Error("network"));
+    await renderPage("/account");
+    await user.type(screen.getByTestId("auth-email"), "ada@example.com");
+    await user.type(screen.getByTestId("auth-password"), "s3cr3t");
+    await user.click(screen.getByTestId("auth-submit"));
+    expect(await screen.findByText(en.signIn.signInFailed)).toBeInTheDocument();
+  });
+
+  it("(g) renders the forgot link when password reset is available", async () => {
+    mockGetActiveProviderIds.mockReturnValue(["google", "email"]);
+    mockIsResetAvailable.mockReturnValue(true);
+    await renderPage("/account");
+    expect(screen.getByTestId("auth-forgot")).toHaveAttribute(
+      "href",
+      "/forgot-password",
+    );
+  });
+
+  it("(g) omits the forgot link when password reset is unavailable", async () => {
+    mockGetActiveProviderIds.mockReturnValue(["google", "email"]);
+    mockIsResetAvailable.mockReturnValue(false);
+    await renderPage("/account");
+    expect(screen.getByTestId("auth-password")).toBeInTheDocument();
+    expect(screen.queryByTestId("auth-forgot")).toBeNull();
+  });
 });

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

@@ -4,9 +4,13 @@
  * RSC: resolves the active providers from auth-env, the sign-in method
  * (password when the email provider is active, else sso), the sanitised
  * `?next=` return path, and the translated `signIn` labels — then renders the
- * `SignInCard` client island. The locale layout above owns the Nav/Footer +
- * MarketingShell frame; this page contributes only the centered card region
- * (no nested shell).
+ * `SignInCard` client island.
+ *
+ * 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.
  *
  * Signed-in visitors are not redirected here — the Nav's session-aware action
  * cluster (Account / Sign out) is the affordance for them.
@@ -18,8 +22,10 @@ import type { Metadata } from "next";
 import { getTranslations } from "next-intl/server";
 import type { ReactElement } from "react";
 
-import { getActiveProviderIds } from "../../../lib/auth-env";
-import { siteLogo } from "../../../lib/site-brand";
+import {
+  getActiveProviderIds,
+  resetSendConfigured,
+} from "../../../../lib/auth-env";
 
 import { resolveNextPath } from "./next-path";
 import { SignInCard, type SignInProvider } from "./sign-in-card";
@@ -71,7 +77,15 @@ export default async function SignInPage({
       providers={providers}
       method={method}
       next={next}
-      logo={siteLogo()}
+      // The "Forgot password?" link now has somewhere real to go (#5963);
+      // AuthCard's default is a dead "#".
+      forgotHref={localeHref(locale, "/forgot-password")}
+      // Hide it entirely when reset isn't wired server-side, rather than
+      // pointing at a page that renders its own not-available state (#6018).
+      // `resetSendConfigured()`, not the flag: /forgot-password keys on the
+      // send conjunction, so the flag alone would offer a link to a page
+      // rendering its own not-available card (#6068 AC-2).
+      forgot={resetSendConfigured() ? "link" : "none"}
       labels={labels}
       notConfiguredSubhead={t("notConfiguredSubhead")}
       errorLabels={{