stack-auth · mantrakp04 · Apr 14, 2026 · Mar 20, 2026 · Mar 27, 2026 · Mar 27, 2026
diff --git a/apps/backend/src/app/api/latest/ai/query/[mode]/route.ts b/apps/backend/src/app/api/latest/ai/query/[mode]/route.ts
@@ -34,7 +34,8 @@ export const POST = createSmartRouteHandler({
 
 
     if (apiKey === "FORWARD_TO_PRODUCTION") {
-      const prodResponse = await forwardToProduction(mode, body);
+      const { projectId: _strippedProjectId, ...forwardBody } = body;
+      const prodResponse = await forwardToProduction(mode, forwardBody);
       return {
         statusCode: prodResponse.status,
         bodyType: "response" as const,

diff --git a/apps/dashboard/next.config.mjs b/apps/dashboard/next.config.mjs
@@ -91,6 +91,7 @@ const nextConfig = {
   },
 
   async headers() {
+    const isLocalEmulator = process.env.NEXT_PUBLIC_STACK_IS_LOCAL_EMULATOR === "true";
     return [
       {
         source: "/(.*)",
@@ -118,7 +119,7 @@ const nextConfig = {
           },
           {
             key: "Content-Security-Policy",
-            value: "",
+            value: isLocalEmulator ? "frame-ancestors 'self' http://localhost:* https://localhost:* http://127.0.0.1:* https://127.0.0.1:* http://[::1]:* https://[::1]:* http://*.localhost https://*.localhost" : "",
           },
         ],
       },

diff --git a/claude/CLAUDE-KNOWLEDGE.md b/claude/CLAUDE-KNOWLEDGE.md
@@ -139,6 +139,20 @@ A: Update affected inline snapshots in `apps/e2e/tests/backend/endpoints/api/v1/
 Q: How should `createOrUpdateProjectWithLegacyConfig` handle `onboardingStatus` for forward-compat checks?
 A: Only write `onboardingStatus` when the `Project.onboardingStatus` column exists (for example by checking `information_schema.columns` in-transaction) so current code can still run against older schemas where that column is absent.
 
+Q: Why can a client bundle fail with `the chunking context does not support external modules (request: node:module)` after using `require("react-dom")` in `packages/template`?
+A: The ESM build rewrites `require(...)` to `createRequire(import.meta.url)` from `node:module`, which Turbopack rejects in client chunks. In client code like `packages/template/src/dev-tool/dev-tool-indicator.tsx`, import `createPortal` directly from `react-dom` instead of using runtime `require`.
+
+Q: Where does the Stack dev tool Config tab read the API URL and publishable key from?
+A: Use `app[stackAppInternalsSymbol].getConstructorOptions()` for `baseUrl` and `publishableClientKey`, resolve the API URL with `getBaseUrl` from `packages/template/src/lib/stack-app/apps/implementations/common.ts`, and show keys redacted (never the full secret server key in the browser).
+
+Q: Why does the Stack dev tool Components tab preview throw "Translation context not found"?
+A: `DevToolEntry` was rendered as a sibling of app `children` inside `StackProviderClient`, while `TranslationProvider` in `StackProvider` only wrapped `children`. Wrap `DevToolEntry` in `TranslationProvider` in `stack-provider-client.tsx` so previews and the panel use the same translation context as Stack UI components.
+
+Q: How does the Stack dev tool Components tab list every SDK component plus custom UI and show what is mounted?
+A: Built-in names come from `BUILTIN_STACK_DEV_TOOL_COMPONENT_NAMES` in `packages/template/src/dev-tool/builtin-component-names.ts` (always listed). Apps call `registerDevToolComponentCatalog([{ id, displayName? }])` once (e.g. in a root client provider) to list custom components. Each component that should report instances calls `useDevToolRegister('SameIdAsCatalog', props)` with a **stable** `props` reference where possible. The list shows green = at least one mounted instance on the current route, gray = not rendered; multiple instances expand into sub-rows.
+
+Q: Why did Next.js report `Can't resolve '../utils.js'` from `packages/stack/dist/esm/dev-tool/tabs/console-tab.js`?
+A: `tsdown` emits each source file as its own chunk and marks relative imports as external, so `console-tab.js` expects a sibling `utils.js`. If `utils.ts` was added but `packages/stack` was not fully rebuilt (or `dist` was partially updated), that file can be missing. Dev-tool URL/key helpers live in `dev-tool-context.tsx` so tabs import them from the same module as the context (no separate `dev-tool/utils` chunk). After template changes, run `pnpm run generate-sdks` and rebuild `@stackframe/stack` so `dist` stays consistent.
 Q: Where is the private sign-up risk engine generated entrypoint in backend now?
 A: The generator script writes `apps/backend/src/private/implementation.generated.ts` (not `src/generated/private-sign-up-risk-engine.ts`), and backend runtime imports should target `@/private/implementation.generated`.
 

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -58,6 +58,8 @@
     "LICENSE"
   ],
   "dependencies": {
+    "@ai-sdk/react": "^3.0.72",
+    "ai": "^6.0.0",
     "@hookform/resolvers": "^5.2.2",
     "@stripe/react-stripe-js": "^3.8.1",
     "@stripe/stripe-js": "^7.7.0",

diff --git a/packages/stack/package.json b/packages/stack/package.json
@@ -58,6 +58,8 @@
     "LICENSE"
   ],
   "dependencies": {
+    "@ai-sdk/react": "^3.0.72",
+    "ai": "^6.0.0",
     "@hookform/resolvers": "^5.2.2",
     "@stripe/react-stripe-js": "^3.8.1",
     "@stripe/stripe-js": "^7.7.0",

diff --git a/packages/template/package-template.json b/packages/template/package-template.json
@@ -86,6 +86,10 @@
     "LICENSE"
   ],
   "dependencies": {
+    "//": "NEXT_LINE_PLATFORM react-like",
+    "@ai-sdk/react": "^3.0.72",
+    "//": "NEXT_LINE_PLATFORM react-like",
+    "ai": "^6.0.0",
     "@hookform/resolvers": "^5.2.2",
     "//": "NEXT_LINE_PLATFORM react-like",
     "@stripe/react-stripe-js": "^3.8.1",

diff --git a/packages/template/package.json b/packages/template/package.json
@@ -63,6 +63,8 @@
     "LICENSE"
   ],
   "dependencies": {
+    "@ai-sdk/react": "^3.0.72",
+    "ai": "^6.0.0",
     "@hookform/resolvers": "^5.2.2",
     "@stripe/react-stripe-js": "^3.8.1",
     "@stripe/stripe-js": "^7.7.0",

diff --git a/packages/template/src/dev-tool/component-catalog.tsx b/packages/template/src/dev-tool/component-catalog.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import React from "react";
+import { stringCompare } from "@stackframe/stack-shared/dist/utils/strings";
+import { AccountSettings } from "../components-page/account-settings";
+import { AuthPage } from "../components-page/auth-page";
+import { EmailVerification } from "../components-page/email-verification";
+import { ForgotPassword } from "../components-page/forgot-password";
+import { PasswordReset } from "../components-page/password-reset";
+import { SignIn } from "../components-page/sign-in";
+import { SignUp } from "../components-page/sign-up";
+import { CredentialSignIn } from "../components/credential-sign-in";
+import { CredentialSignUp } from "../components/credential-sign-up";
+import { MagicLinkSignIn } from "../components/magic-link-sign-in";
+import { OAuthButton } from "../components/oauth-button";
+import { OAuthButtonGroup } from "../components/oauth-button-group";
+import { SelectedTeamSwitcher } from "../components/selected-team-switcher";
+import { TeamSwitcher } from "../components/team-switcher";
+import { UserButton } from "../components/user-button";
+
+// IF_PLATFORM react-like
+
+/**
+ * Catalog entry for a Stack SDK component. The dev tool uses this to:
+ * - list every known component (with in-use status)
+ * - render live previews
+ * - show prop tables
+ *
+ * Adding a component here is all that's needed — no hooks inside the component.
+ */
+export type CatalogEntry = {
+  /** The actual component function/class */
+  component: React.ComponentType<any>;
+  /**
+   * Optional preview renderer. Defaults to rendering `component` with the
+   * detected props. Override when a component needs special handling
+   * (e.g. PasswordReset depends on async token verification).
+   */
+  preview?: 'none' | ((props: Record<string, unknown>) => React.ReactNode);
+  /**
+   * Extra instructions for generating implementation prompts from the dev tool.
+   */
+  promptNotes?: readonly string[];
+};
+
+/**
+ * The single source of truth for every Stack SDK component the dev tool knows
+ * about. Keys are display names; values carry the component reference.
+ *
+ * To register a new component, just add it here.
+ */
+export const COMPONENT_CATALOG: Record<string, CatalogEntry> = {
+  AccountSettings: {
+    component: AccountSettings,
+    promptNotes: [
+      "Use this inside an app that is already wrapped in Stack Auth's provider.",
+      "Prefer the built-in Account Settings experience instead of rebuilding profile, sessions, and auth settings manually.",
+    ],
+  },
+  AuthPage: {
+    component: AuthPage,
+    promptNotes: [
+      "Set the `type` prop explicitly to either `sign-in` or `sign-up`.",
+      "Keep auth flows delegated to Stack Auth instead of custom form wiring where possible.",
+    ],
+  },
+  CredentialSignIn: { component: CredentialSignIn },
+  CredentialSignUp: { component: CredentialSignUp },
+  EmailVerification: {
+    component: EmailVerification,
+    promptNotes: [
+      "Use this on a route that can pass the email verification code from URL search params.",
+      "Keep the verify/cancel flows handled by Stack Auth.",
+    ],
+  },
+  ForgotPassword: {
+    component: ForgotPassword,
+    promptNotes: [
+      "Use this on a client page and rely on Stack Auth to send the reset email.",
+    ],
+  },
+  MagicLinkSignIn: { component: MagicLinkSignIn },
+  OAuthButton: {
+    component: OAuthButton,
+    promptNotes: [
+      "Pass a concrete provider id like `google`, `github`, or another configured OAuth provider.",
+      "Use the existing Stack Auth app configuration instead of hardcoding OAuth URLs.",
+    ],
+  },
+  OAuthButtonGroup: {
+    component: OAuthButtonGroup,
+    promptNotes: [
+      "Render this when you want the configured OAuth providers for the current project automatically.",
+    ],
+  },
+  PasswordReset: {
+    component: PasswordReset,
+    preview: 'none',
+    promptNotes: [
+      "Use this on a route that can pass the password reset code from URL search params.",
+      "Do not reimplement password reset verification manually; let Stack Auth handle it.",
+    ],
+  },
+  SelectedTeamSwitcher: {
+    component: SelectedTeamSwitcher,
+    promptNotes: [
+      "Use this when your app already has a selected team context and you want to switch or clear it.",
+    ],
+  },
+  SignIn: {
+    component: SignIn,
+    promptNotes: [
+      "Use the built-in sign-in page rather than rebuilding the flow by hand.",
+    ],
+  },
+  SignUp: {
+    component: SignUp,
+    promptNotes: [
+      "Use the built-in sign-up page rather than rebuilding the flow by hand.",
+    ],
+  },
+  TeamSwitcher: {
+    component: TeamSwitcher,
+    promptNotes: [
+      "Use this where a signed-in user can switch teams or open team settings.",
+    ],
+  },
+  UserButton: {
+    component: UserButton,
+    promptNotes: [
+      "Use this inside authenticated app chrome, typically in a header or account menu area.",
+    ],
+  },
+};
+
+/** Sorted list of all catalog component names */
+export const CATALOG_NAMES: readonly string[] = Object.keys(COMPONENT_CATALOG).sort(
+  stringCompare
+);
+
+// END_PLATFORM