create-ailk 0.11.1 → 0.11.2

package/templates/apps/web/auth.ts

@@ -59,16 +59,76 @@ const RESET_TOKEN_TTL_SECONDS = 3600;
  */
 const VERIFY_TOKEN_TTL_SECONDS = 86_400;
 
-// Lazy-load prisma-for-auth: import is deferred until createAuth() is called
-// without an explicit `prisma` dep. This prevents the PrismaClient singleton
-// from initialising (and calling @working-theory/database) at module-load time, which
-// lets tests import `createAuth` without triggering a DB connection.
-function getDefaultPrisma(): PrismaClient {
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  const { prismaForAuth } = require("./lib/prisma-for-auth") as {
-    prismaForAuth: PrismaClient;
-  };
-  return prismaForAuth;
+let prismaForAuthLoad: Promise<PrismaClient> | undefined;
+
+/**
+ * The `prismaForAuth` singleton, loaded once through `import()`. A failed load
+ * is not cached, so the next call retries — as the old in-`createAuth()`
+ * require did.
+ */
+function loadPrismaForAuth(): Promise<PrismaClient> {
+  prismaForAuthLoad ??= import("./lib/prisma-for-auth").then(
+    (mod) => mod.prismaForAuth,
+    (err: unknown) => {
+      prismaForAuthLoad = undefined;
+      throw err;
+    },
+  );
+  return prismaForAuthLoad;
+}
+
+/**
+ * The default client: every member resolves the singleton before it runs.
+ *
+ * NEVER a synchronous `require()` of `./lib/prisma-for-auth` (#7401).
+ * `next build --webpack` compiles that module as an ASYNC module — it imports
+ * ESM (`@prisma/adapter-pg`, the generated client) — and a synchronous
+ * `require()` of an async webpack module returns a pending namespace, not its
+ * exports. `prismaAdapter()` received `undefined`, and every social sign-in
+ * 500'd on `Cannot read properties of undefined (reading 'verification')`.
+ * `import()` is the ESM-correct load: webpack awaits the module.
+ *
+ * Deferred rather than imported statically so the module still loads WITHOUT
+ * the generated client — `createAuth({ prisma })` tests import this file under
+ * CommonJS Jest, which cannot parse that client. Nothing is lost by the
+ * deferral: Better Auth, `onPasswordReset` and the reset mailer only touch the
+ * client inside request-time async calls. Each member is a function, so the
+ * adapter's `typeof db.$transaction === "function"` check holds and
+ * `$transaction(cb)` runs on the real client, handing `cb` a real transaction
+ * client. (The array form of `$transaction` needs real PrismaPromises; nothing
+ * here uses it.)
+ */
+function deferredPrismaForAuth(): PrismaClient {
+  return new Proxy({} as PrismaClient, {
+    get(_, member) {
+      // Not a thenable, and no symbol-keyed members (inspection, tags).
+      if (typeof member !== "string" || member === "then") return undefined;
+      return new Proxy(() => undefined, {
+        // `$transaction(cb)`, `$connect()` and the other client methods.
+        apply: (_target, _this, args: unknown[]) =>
+          loadPrismaForAuth().then((client) =>
+            Reflect.apply(Reflect.get(client, member), client, args),
+          ),
+        // Model delegates: `verification.create(args)`, `user.findFirst(args)`.
+        // A delegate is not a thenable either.
+        get: (_target, method) =>
+          typeof method === "string" && method !== "then"
+            ? (...args: unknown[]) =>
+                loadPrismaForAuth().then((client) => {
+                  const delegate: unknown = Reflect.get(client, member);
+                  // Every member passes the adapter's `if (!db[model])` check,
+                  // so name a missing model here instead of a bare TypeError.
+                  if (typeof delegate !== "object" || delegate === null) {
+                    throw new Error(
+                      `prismaForAuth has no model delegate "${member}" — regenerate the Prisma client`,
+                    );
+                  }
+                  return Reflect.apply(Reflect.get(delegate, method), delegate, args);
+                })
+            : undefined,
+      });
+    },
+  });
 }
 
 /**
@@ -215,7 +275,7 @@ export interface CreateAuthDeps {
  * existing callers (`import { auth }`) are unchanged.
  */
 export function createAuth(deps: CreateAuthDeps = {}) {
-  const prisma = deps.prisma ?? getDefaultPrisma();
+  const prisma = deps.prisma ?? deferredPrismaForAuth();
 
   /**
    * ONE predicate, read in ONE place (#5962 § D2).
@@ -531,8 +591,8 @@ export function createAuth(deps: CreateAuthDeps = {}) {
 }
 
 // Lazy singleton: resolved on first access, not at module-load time.
-// Defers the `require("./lib/prisma-for-auth")` call until auth is actually
-// used, so tests can `import { createAuth }` without triggering a DB connection.
+// Defers `createAuth()` — and `resolveSecret()`'s production check — until
+// auth is actually used.
 let _auth: ReturnType<typeof createAuth> | undefined;
 
 export const auth: ReturnType<typeof createAuth> = new Proxy(

package/templates/apps/web/components/sign-out-trigger.tsx

@@ -1,11 +1,12 @@
 "use client"; // Better Auth's client signOut + router navigation need the browser
 
 /**
- * SignOutTrigger — the one client child of the server-rendered Nav (#4984).
+ * SignOutTrigger — wraps the signed-in Nav's "Sign out" trigger (#4984).
  *
  * The locale layout (RSC) reads the session and authors the "Sign out" nav
  * action as `kind: "flow"`; Nav hands the rendered trigger `<Button>` back
- * through `renderFlowTrigger`, and this component clones it with the real
+ * through `renderFlowTrigger` — composed in `SignedInNav`, on the client side
+ * of the RSC boundary (#7402) — and this component clones it with the real
  * sign-out handler. Same `createAuthClient()` idiom as `SignInGate`.
  */
 

package/templates/apps/web/components/signed-in-nav.tsx

@@ -0,0 +1,58 @@
+"use client"; // owns renderFlowTrigger + navItems — functions that cannot cross the RSC boundary (#7402)
+
+/**
+ * SignedInNav — the site Nav for a signed-in visitor (#7402).
+ *
+ * Signed in, the locale layout (RSC) authors two `kind: "flow"` Nav actions —
+ * the visitor's name and "Sign out" — and Nav hands their rendered triggers
+ * back through `renderFlowTrigger`. That composer is a function, and Nav
+ * forwards it into NavMobileMenu ("use client"), so a Server Component that
+ * passes it crashes every signed-in page with "Functions cannot be passed
+ * directly to Client Components". Composing Nav HERE keeps the function on the
+ * client side of the boundary.
+ *
+ * `navItems` is owned here for the same reason: a generated nav inventory
+ * carries Lucide icon components on its flyout entries, and a component is a
+ * function too. The layout passes only serializable props (labels, actions,
+ * the brand elements); everything callable is imported or defined below.
+ *
+ * Signed out, the layout keeps rendering Nav as a Server Component — it has
+ * no flow action, so nothing callable needs to cross.
+ */
+
+import { Nav, type NavProps } from "@working-theory/ui/chrome";
+import type { ReactElement } from "react";
+
+import { navItems } from "../lib/nav-config";
+import { siteChrome } from "../lib/site-chrome";
+
+import { SignOutTrigger } from "./sign-out-trigger";
+
+/** Nav's props minus every function-typed one — this type IS the boundary. */
+export type SignedInNavProps = Omit<
+  NavProps,
+  "navItems" | "renderFlowTrigger" | "translate" | "onSearchOpen"
+>;
+
+export function SignedInNav(props: SignedInNavProps): ReactElement {
+  return (
+    <Nav
+      {...props}
+      navItems={siteChrome.nav === "mark-only" ? [] : navItems}
+      // Both signed-in actions are flows with no lightbox: Sign out becomes a
+      // SignOutTrigger, the account action a non-navigating name label.
+      renderFlowTrigger={(action, trigger) =>
+        action.labelKey === "signOut" ? (
+          <SignOutTrigger>{trigger}</SignOutTrigger>
+        ) : (
+          <span
+            className="text-body-sm text-(--color-text-muted)"
+            data-testid="nav-account-name"
+          >
+            {props.labels?.items.account}
+          </span>
+        )
+      }
+    />
+  );
+}