@better-t-stack/template-generator 3.25.4 → 3.26.0

package/dist/index.mjs

@@ -646,7 +646,7 @@ function updateEnvPackageJson(vfs, config) {
 	const pkgJson = vfs.readJson("packages/env/package.json");
 	if (!pkgJson) return;
 	pkgJson.name = `@${config.projectName}/env`;
-	const hasWebFrontend = config.frontend.some((f) => desktopWebFrontends.includes(f));
+	const hasWebFrontend$1 = config.frontend.some((f) => desktopWebFrontends.includes(f));
 	const hasNative = config.frontend.some((f) => [
 		"native-bare",
 		"native-uniwind",
@@ -655,7 +655,7 @@ function updateEnvPackageJson(vfs, config) {
 	const needsServerEnv = config.backend !== "none" && config.backend !== "convex";
 	const exports = {};
 	if (needsServerEnv) exports["./server"] = "./src/server.ts";
-	if (hasWebFrontend) exports["./web"] = "./src/web.ts";
+	if (hasWebFrontend$1) exports["./web"] = "./src/web.ts";
 	if (hasNative) exports["./native"] = "./src/native.ts";
 	pkgJson.exports = exports;
 	vfs.writeJson("packages/env/package.json", pkgJson);
@@ -707,10 +707,14 @@ const dependencyVersionMap = {
 	typescript: "^5",
 	"better-auth": "1.5.2",
 	"@better-auth/expo": "1.5.2",
-	"@clerk/nextjs": "^6.31.5",
-	"@clerk/clerk-react": "^5.45.0",
-	"@clerk/tanstack-react-start": "^0.26.3",
-	"@clerk/clerk-expo": "^2.14.25",
+	"@clerk/backend": "^3.2.1",
+	"@clerk/express": "^2.0.5",
+	"@clerk/fastify": "^3.1.3",
+	"@clerk/nextjs": "^7.0.5",
+	"@clerk/react": "^6.1.1",
+	"@clerk/react-router": "^3.0.5",
+	"@clerk/tanstack-react-start": "^1.0.5",
+	"@clerk/expo": "^3.1.3",
 	"drizzle-orm": "^0.45.1",
 	"drizzle-kit": "^0.31.8",
 	"@planetscale/database": "^1.19.0",
@@ -775,7 +779,7 @@ const dependencyVersionMap = {
 	"@trpc/tanstack-react-query": "^11.7.2",
 	"@trpc/server": "^11.7.2",
 	"@trpc/client": "^11.7.2",
-	next: "^16.1.1",
+	next: "^16.2.0",
 	convex: "^1.32.0",
 	"@convex-dev/react-query": "^0.1.0",
 	"@convex-dev/agent": "^0.3.2",
@@ -1351,8 +1355,10 @@ function processConvexAuthDeps(vfs, config) {
 		"native-unistyles"
 	].includes(f));
 	const hasNextJs = frontend.includes("next");
+	const hasReactRouter = frontend.includes("react-router");
+	const hasTanStackRouter = frontend.includes("tanstack-router");
 	const hasTanStackStart = frontend.includes("tanstack-start");
-	const hasViteReact = frontend.some((f) => ["tanstack-router", "react-router"].includes(f));
+	const hasViteReact = hasReactRouter || hasTanStackRouter;
 	const hasSolid = frontend.includes("solid");
 	const hasSvelte = frontend.includes("svelte");
 	const hasReactWebAuthForms = hasNextJs || hasTanStackStart || hasViteReact;
@@ -1363,21 +1369,26 @@ function processConvexAuthDeps(vfs, config) {
 				packagePath: webPath,
 				dependencies: ["@clerk/nextjs"]
 			});
-			else if (hasTanStackStart) addPackageDependency({
+			else if (hasReactRouter) addPackageDependency({
 				vfs,
 				packagePath: webPath,
-				dependencies: ["@clerk/tanstack-react-start"]
+				dependencies: ["@clerk/react-router"]
 			});
-			else if (hasViteReact) addPackageDependency({
+			else if (hasTanStackRouter) addPackageDependency({
+				vfs,
+				packagePath: webPath,
+				dependencies: ["@clerk/react"]
+			});
+			else if (hasTanStackStart) addPackageDependency({
 				vfs,
 				packagePath: webPath,
-				dependencies: ["@clerk/clerk-react"]
+				dependencies: ["@clerk/tanstack-react-start"]
 			});
 		}
 		if (nativeExists && hasNative) addPackageDependency({
 			vfs,
 			packagePath: nativePath,
-			dependencies: ["@clerk/clerk-expo"]
+			dependencies: ["@clerk/expo"]
 		});
 	} else if (auth === "better-auth") {
 		if (backendExists) {
@@ -1434,19 +1445,23 @@ function processConvexAuthDeps(vfs, config) {
 	}
 }
 function processStandardAuthDeps(vfs, config) {
-	const { auth, frontend } = config;
+	const { auth, backend, frontend } = config;
 	const authPath = "packages/auth/package.json";
+	const apiPath = "packages/api/package.json";
 	const webPath = "apps/web/package.json";
 	const nativePath = "apps/native/package.json";
+	const serverPath = "apps/server/package.json";
 	const authExists = vfs.exists(authPath);
+	const apiExists = vfs.exists(apiPath);
 	const webExists = vfs.exists(webPath);
 	const nativeExists = vfs.exists(nativePath);
+	const serverExists = vfs.exists(serverPath);
 	const hasNative = frontend.some((f) => [
 		"native-bare",
 		"native-uniwind",
 		"native-unistyles"
 	].includes(f));
-	const hasWebFrontend = frontend.some((f) => [
+	const hasWebFrontend$1 = frontend.some((f) => [
 		"react-router",
 		"tanstack-router",
 		"tanstack-start",
@@ -1464,7 +1479,68 @@ function processStandardAuthDeps(vfs, config) {
 	].includes(f));
 	const hasSolid = frontend.includes("solid");
 	const hasSvelte = frontend.includes("svelte");
-	if (auth === "better-auth") {
+	const hasNextJs = frontend.includes("next");
+	const hasReactRouter = frontend.includes("react-router");
+	const hasTanStackRouter = frontend.includes("tanstack-router");
+	const hasTanStackStart = frontend.includes("tanstack-start");
+	if (auth === "clerk") {
+		if (webExists) {
+			if (hasNextJs) addPackageDependency({
+				vfs,
+				packagePath: webPath,
+				dependencies: ["@clerk/nextjs"]
+			});
+			else if (hasReactRouter) addPackageDependency({
+				vfs,
+				packagePath: webPath,
+				dependencies: ["@clerk/react-router"]
+			});
+			else if (hasTanStackRouter) addPackageDependency({
+				vfs,
+				packagePath: webPath,
+				dependencies: ["@clerk/react"]
+			});
+			else if (hasTanStackStart) addPackageDependency({
+				vfs,
+				packagePath: webPath,
+				dependencies: ["@clerk/tanstack-react-start"]
+			});
+		}
+		if (hasNative && nativeExists) addPackageDependency({
+			vfs,
+			packagePath: nativePath,
+			dependencies: ["@clerk/expo"]
+		});
+		if (apiExists) {
+			if (backend === "self" || backend === "hono" || backend === "elysia") addPackageDependency({
+				vfs,
+				packagePath: apiPath,
+				dependencies: ["@clerk/backend"]
+			});
+			else if (backend === "express") addPackageDependency({
+				vfs,
+				packagePath: apiPath,
+				dependencies: ["@clerk/express"]
+			});
+			else if (backend === "fastify") addPackageDependency({
+				vfs,
+				packagePath: apiPath,
+				dependencies: ["@clerk/fastify"]
+			});
+		}
+		if (serverExists) {
+			if (backend === "express") addPackageDependency({
+				vfs,
+				packagePath: serverPath,
+				dependencies: ["@clerk/express"]
+			});
+			else if (backend === "fastify") addPackageDependency({
+				vfs,
+				packagePath: serverPath,
+				dependencies: ["@clerk/fastify"]
+			});
+		}
+	} else if (auth === "better-auth") {
 		if (authExists) {
 			addPackageDependency({
 				vfs,
@@ -1477,7 +1553,7 @@ function processStandardAuthDeps(vfs, config) {
 				dependencies: ["@better-auth/expo"]
 			});
 		}
-		if (hasWebFrontend && webExists) {
+		if (hasWebFrontend$1 && webExists) {
 			addPackageDependency({
 				vfs,
 				packagePath: webPath,
@@ -1907,12 +1983,8 @@ function buildClientVars(frontend, backend, auth) {
 		value: backend === "convex" ? "https://<YOUR_CONVEX_URL>" : baseVar.value,
 		condition: backend === "convex" ? true : baseVar.write
 	}];
-	if (backend === "convex" && auth === "clerk") {
+	if (auth === "clerk") {
 		if (hasNextJs) vars.push({
-			key: "NEXT_PUBLIC_CLERK_FRONTEND_API_URL",
-			value: "",
-			condition: true
-		}, {
 			key: "NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY",
 			value: "",
 			condition: true
@@ -1927,7 +1999,7 @@ function buildClientVars(frontend, backend, auth) {
 				value: "",
 				condition: true
 			});
-			if (hasTanStackStart) vars.push({
+			if (hasReactRouter || hasTanStackStart) vars.push({
 				key: "CLERK_SECRET_KEY",
 				value: "",
 				condition: true
@@ -1962,7 +2034,7 @@ function buildNativeVars(frontend, backend, auth) {
 		value: serverUrl,
 		condition: true
 	}];
-	if (backend === "convex" && auth === "clerk") vars.push({
+	if (auth === "clerk") vars.push({
 		key: "EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY",
 		value: "",
 		condition: true
@@ -2027,7 +2099,7 @@ function buildConvexCommentBlocks(frontend, auth, examples) {
 ${hasWeb || hasNative ? `# npx convex env set SITE_URL ${defaultSiteUrl}\n` : ""}`;
 	return commentBlocks;
 }
-function buildServerVars(backend, frontend, auth, database, dbSetup, runtime, webDeploy, serverDeploy, payments, examples) {
+function buildServerVars(backend, frontend, auth, api, database, dbSetup, runtime, webDeploy, serverDeploy, payments, examples) {
 	const hasReactRouter = frontend.includes("react-router");
 	const hasSvelte = frontend.includes("svelte");
 	const hasAstro = frontend.includes("astro");
@@ -2052,6 +2124,12 @@ function buildServerVars(backend, frontend, auth, database, dbSetup, runtime, we
 			break;
 	}
 	const hasBetterAuth = auth === "better-auth";
+	const hasClerk = auth === "clerk";
+	const needsClerkPublishableKey = hasClerk && (["express", "fastify"].includes(backend) || api !== "none" && [
+		"self",
+		"hono",
+		"elysia"
+	].includes(backend));
 	return [
 		{
 			key: "BETTER_AUTH_SECRET",
@@ -2063,6 +2141,16 @@ function buildServerVars(backend, frontend, auth, database, dbSetup, runtime, we
 			value: backend === "self" ? hasAstro ? "http://localhost:4321" : "http://localhost:3001" : "http://localhost:3000",
 			condition: hasBetterAuth
 		},
+		{
+			key: "CLERK_SECRET_KEY",
+			value: "",
+			condition: hasClerk
+		},
+		{
+			key: "CLERK_PUBLISHABLE_KEY",
+			value: "",
+			condition: needsClerkPublishableKey
+		},
 		{
 			key: "POLAR_ACCESS_TOKEN",
 			value: "",
@@ -2091,7 +2179,7 @@ function buildServerVars(backend, frontend, auth, database, dbSetup, runtime, we
 	];
 }
 function processEnvVariables(vfs, config) {
-	const { backend, frontend, database, auth, examples, dbSetup, webDeploy, serverDeploy, runtime, payments } = config;
+	const { backend, frontend, database, auth, api, examples, dbSetup, webDeploy, serverDeploy, runtime, payments } = config;
 	const hasReactRouter = frontend.includes("react-router");
 	const hasTanStackRouter = frontend.includes("tanstack-router");
 	const hasTanStackStart = frontend.includes("tanstack-start");
@@ -2128,7 +2216,7 @@ function processEnvVariables(vfs, config) {
 		}
 		return;
 	}
-	const serverVars = buildServerVars(backend, frontend, auth, database, dbSetup, runtime, webDeploy, serverDeploy, payments, examples);
+	const serverVars = buildServerVars(backend, frontend, auth, api, database, dbSetup, runtime, webDeploy, serverDeploy, payments, examples);
 	if (backend === "self") {
 		const webDir = "apps/web";
 		if (vfs.directoryExists(webDir)) writeEnvFile(vfs, `${webDir}/.env`, serverVars);
@@ -2448,6 +2536,77 @@ function getDesktopStaticBuildNote(frontend) {
 	if (!staticBuildFrontend) return "";
 	return `Desktop builds package static web assets. ${staticBuildFrontends.get(staticBuildFrontend)} needs a static/export build configuration before desktop packaging will work.`;
 }
+function getClerkQuickstartUrl(frontend) {
+	if (frontend.includes("next")) return "https://clerk.com/docs/nextjs/getting-started/quickstart";
+	if (frontend.includes("react-router")) return "https://clerk.com/docs/react-router/getting-started/quickstart";
+	if (frontend.includes("tanstack-start")) return "https://clerk.com/docs/tanstack-react-start/getting-started/quickstart";
+	if (frontend.includes("tanstack-router")) return "https://clerk.com/docs/react/getting-started/quickstart";
+	if (frontend.includes("native-bare") || frontend.includes("native-uniwind") || frontend.includes("native-unistyles")) return "https://clerk.com/docs/expo/getting-started/quickstart";
+	return "https://clerk.com/docs";
+}
+function getClerkFrontendEnvLines(frontend) {
+	const lines = [];
+	if (frontend.includes("next")) lines.push("- Set `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` in `apps/web/.env`");
+	if (frontend.some((value) => [
+		"react-router",
+		"tanstack-router",
+		"tanstack-start"
+	].includes(value))) lines.push("- Set `VITE_CLERK_PUBLISHABLE_KEY` in `apps/web/.env`");
+	if (frontend.some((value) => [
+		"native-bare",
+		"native-uniwind",
+		"native-unistyles"
+	].includes(value))) lines.push("- Set `EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY` in `apps/native/.env`");
+	return lines;
+}
+function getClerkSetupLines(frontend, backend, api, isConvex) {
+	const lines = getClerkFrontendEnvLines(frontend);
+	const hasClerkServerFrontend = frontend.some((value) => [
+		"next",
+		"react-router",
+		"tanstack-start"
+	].includes(value));
+	if (isConvex) return [
+		"- Set `CLERK_JWT_ISSUER_DOMAIN` in Convex Dashboard",
+		...lines,
+		...hasClerkServerFrontend ? ["- Set `CLERK_SECRET_KEY` in `apps/web/.env` for Clerk server middleware"] : []
+	];
+	const serverEnvPath = backend === "self" ? "apps/web/.env" : "apps/server/.env";
+	const needsServerSideClerkAuth = backend !== "none";
+	const needsClerkBackendPublishableKey = ["express", "fastify"].includes(backend);
+	const needsClerkRequestVerification = api !== "none" && [
+		"self",
+		"hono",
+		"elysia"
+	].includes(backend);
+	if (hasClerkServerFrontend && backend === "self") lines.push("- Set `CLERK_SECRET_KEY` in `apps/web/.env` for Clerk server middleware and server-side Clerk auth");
+	else {
+		if (hasClerkServerFrontend) lines.push("- Set `CLERK_SECRET_KEY` in `apps/web/.env` for Clerk server middleware");
+		if (needsServerSideClerkAuth) lines.push(`- Set \`CLERK_SECRET_KEY\` in \`${serverEnvPath}\` for server-side Clerk auth`);
+	}
+	if (needsClerkRequestVerification) lines.push(`- Set \`CLERK_PUBLISHABLE_KEY\` in \`${serverEnvPath}\` for server-side Clerk request verification`);
+	if (needsClerkBackendPublishableKey) lines.push(`- Set \`CLERK_PUBLISHABLE_KEY\` in \`${serverEnvPath}\` for Clerk backend middleware`);
+	return lines;
+}
+function hasNativeFrontend(frontend) {
+	return frontend.some((value) => [
+		"native-bare",
+		"native-uniwind",
+		"native-unistyles"
+	].includes(value));
+}
+function hasWebFrontend(frontend) {
+	return frontend.some((value) => [
+		"tanstack-router",
+		"react-router",
+		"tanstack-start",
+		"next",
+		"svelte",
+		"nuxt",
+		"solid",
+		"astro"
+	].includes(value));
+}
 function processReadme(vfs, config) {
 	const content = generateReadmeContent(config);
 	vfs.writeFile("README.md", content);
@@ -2456,11 +2615,7 @@ function generateReadmeContent(options) {
 	const { projectName, packageManager, database, auth, addons = [], orm = "drizzle", runtime = "bun", frontend = ["tanstack-router"], backend = "hono", api = "trpc", webDeploy, serverDeploy } = options;
 	const isConvex = backend === "convex";
 	const hasReactRouter = frontend.includes("react-router");
-	const hasNative = frontend.some((f) => [
-		"native-bare",
-		"native-uniwind",
-		"native-unistyles"
-	].includes(f));
+	const hasNative = hasNativeFrontend(frontend);
 	const hasReactWeb = frontend.some((f) => [
 		"tanstack-router",
 		"react-router",
@@ -2503,8 +2658,12 @@ ${auth === "clerk" ? `
 ### Clerk Authentication Setup
 
 - Follow the guide: [Convex + Clerk](https://docs.convex.dev/auth/clerk)
-- Set \`CLERK_JWT_ISSUER_DOMAIN\` in Convex Dashboard
-- Set \`CLERK_PUBLISHABLE_KEY\` in \`apps/*/.env\`` : ""}` : generateDatabaseSetup(options, packageManagerRunCmd)}
+${getClerkSetupLines(frontend, backend, api, true).join("\n")}` : ""}` : generateDatabaseSetup(options, packageManagerRunCmd)}
+${!isConvex && auth === "clerk" ? `
+## Clerk Authentication Setup
+
+- Follow the guide: [Clerk Quickstart](${getClerkQuickstartUrl(frontend)})
+${getClerkSetupLines(frontend, backend, api, false).join("\n")}` : ""}
 
 Then, run the development server:
 
@@ -2539,7 +2698,10 @@ function generateStackDescription(frontend, backend, api, isConvex) {
 		svelte: "SvelteKit",
 		nuxt: "Nuxt",
 		solid: "SolidJS",
-		astro: "Astro"
+		astro: "Astro",
+		"native-bare": "React Native, Expo",
+		"native-uniwind": "React Native, Expo",
+		"native-unistyles": "React Native, Expo"
 	};
 	for (const fe of frontend) if (frontendMap[fe]) {
 		parts.push(frontendMap[fe]);
@@ -2551,9 +2713,9 @@ function generateStackDescription(frontend, backend, api, isConvex) {
 }
 function generateRunningInstructions(frontend, backend, webPort, hasNative, isConvex) {
 	const instructions = [];
-	const hasFrontend = frontend.length > 0 && !frontend.includes("none");
+	const hasAppWebFrontend = hasWebFrontend(frontend);
 	const isBackendSelf = backend === "self";
-	if (hasFrontend) {
+	if (hasAppWebFrontend) {
 		const desc = isBackendSelf ? "fullstack application" : "web application";
 		instructions.push(`Open [http://localhost:${webPort}](http://localhost:${webPort}) in your browser to see the ${desc}.`);
 	}
@@ -2596,7 +2758,7 @@ function generateProjectStructure(config) {
 	const { projectName, frontend, backend, addons, api, auth, database, orm } = config;
 	const isConvex = backend === "convex";
 	const structure = [`${projectName}/`, "├── apps/"];
-	const hasFrontend = frontend.length > 0 && !frontend.includes("none");
+	const hasAppWebFrontend = hasWebFrontend(frontend);
 	const isBackendSelf = backend === "self";
 	const hasReactWeb = frontend.some((f) => [
 		"tanstack-router",
@@ -2604,13 +2766,9 @@ function generateProjectStructure(config) {
 		"tanstack-start",
 		"next"
 	].includes(f));
-	const hasNative = frontend.some((f) => [
-		"native-bare",
-		"native-uniwind",
-		"native-unistyles"
-	].includes(f));
+	const hasNative = hasNativeFrontend(frontend);
 	const hasDbPackage = !isConvex && database !== "none" && orm !== "none";
-	if (hasFrontend) {
+	if (hasAppWebFrontend) {
 		const frontendTypes = {
 			"tanstack-router": "React + TanStack Router",
 			"react-router": "React + React Router",
@@ -2643,7 +2801,7 @@ function generateProjectStructure(config) {
 		}
 		if (!isConvex) {
 			if (api !== "none") structure.push("│   ├── api/         # API layer / business logic");
-			if (auth !== "none") structure.push("│   ├── auth/        # Authentication configuration & logic");
+			if (auth === "better-auth") structure.push("│   ├── auth/        # Authentication configuration & logic");
 			if (hasDbPackage) structure.push("│   └── db/          # Database schema & queries");
 		}
 	}
@@ -2651,18 +2809,15 @@ function generateProjectStructure(config) {
 }
 function generateFeaturesList(database, auth, addons, orm, runtime, frontend, backend, api) {
 	const isConvex = backend === "convex";
-	const hasNative = frontend.some((f) => [
-		"native-bare",
-		"native-uniwind",
-		"native-unistyles"
-	].includes(f));
-	const hasFrontend = frontend.length > 0 && !frontend.includes("none");
+	const hasNative = hasNativeFrontend(frontend);
+	const hasAppWebFrontend = hasWebFrontend(frontend);
 	const hasReactWeb = frontend.some((f) => [
 		"tanstack-router",
 		"react-router",
 		"tanstack-start",
 		"next"
 	].includes(f));
+	const usesTailwind = hasAppWebFrontend || frontend.includes("native-uniwind");
 	const features = ["- **TypeScript** - For type safety and improved developer experience"];
 	const frontendFeatures = {
 		"tanstack-router": "- **TanStack Router** - File-based routing with full type safety",
@@ -2679,7 +2834,7 @@ function generateFeaturesList(database, auth, addons, orm, runtime, frontend, ba
 		break;
 	}
 	if (hasNative) features.push("- **React Native** - Build mobile apps using React", "- **Expo** - Tools for React Native development");
-	if (hasFrontend) features.push("- **TailwindCSS** - Utility-first CSS for rapid UI development");
+	if (usesTailwind) features.push("- **TailwindCSS** - Utility-first CSS for rapid UI development");
 	if (hasReactWeb) features.push("- **Shared UI package** - shadcn/ui primitives live in `packages/ui`");
 	const backendFeatures = {
 		convex: "- **Convex** - Reactive backend-as-a-service platform",
@@ -3284,7 +3439,7 @@ async function processConfigPackage(vfs, templates, config) {
 	processTemplatesFromPrefix(vfs, templates, "packages/config", "packages/config", config);
 }
 async function processEnvPackage(vfs, templates, config) {
-	const hasWebFrontend = config.frontend.some((f) => [
+	const hasWebFrontend$1 = config.frontend.some((f) => [
 		"tanstack-router",
 		"react-router",
 		"tanstack-start",
@@ -3299,10 +3454,10 @@ async function processEnvPackage(vfs, templates, config) {
 		"native-uniwind",
 		"native-unistyles"
 	].includes(f));
-	if (!hasWebFrontend && !hasNative && config.backend === "none") return;
+	if (!hasWebFrontend$1 && !hasNative && config.backend === "none") return;
 	processSingleTemplate(vfs, templates, "packages/env/package.json", "packages/env/package.json", config);
 	processSingleTemplate(vfs, templates, "packages/env/tsconfig.json", "packages/env/tsconfig.json", config);
-	if (hasWebFrontend) processSingleTemplate(vfs, templates, "packages/env/src/web.ts", "packages/env/src/web.ts", config);
+	if (hasWebFrontend$1) processSingleTemplate(vfs, templates, "packages/env/src/web.ts", "packages/env/src/web.ts", config);
 	if (hasNative) processSingleTemplate(vfs, templates, "packages/env/src/native.ts", "packages/env/src/native.ts", config);
 	if (config.backend !== "none" && config.backend !== "convex") processSingleTemplate(vfs, templates, "packages/env/src/server.ts", "packages/env/src/server.ts", config);
 }
@@ -4219,6 +4374,8 @@ import { env } from "@{{projectName}}/env/native";
 {{#if (eq auth "better-auth")}}
 import { authClient } from "@/lib/auth-client";
 import { Platform } from "react-native";
+{{else if (eq auth "clerk")}}
+import { getClerkAuthToken } from "@/utils/clerk-auth";
 {{/if}}
 
 export const queryClient = new QueryClient({
@@ -4259,6 +4416,11 @@ export const link = new RPCLink({
 		}
 		return Object.fromEntries(headers);
 	},
+{{else if (eq auth "clerk")}}
+	headers: async () => {
+		const token = await getClerkAuthToken();
+		return token ? { Authorization: \`Bearer \${token}\` } : {};
+	},
 {{/if}}
 });
 
@@ -4316,22 +4478,64 @@ report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
   "devDependencies": {},
   "dependencies": {}
 }`],
-	["api/orpc/server/src/context.ts.hbs", `{{#if (and (eq backend 'self') (includes frontend "next"))}}
+	["api/orpc/server/src/context.ts.hbs", `{{#if (eq auth "clerk")}}
+type ClerkContextAuth = {
+	userId: string | null;
+};
+
+type ClerkRequestContext = {
+	auth: ClerkContextAuth | null;
+	session: null;
+};
+
+function toClerkContextAuth(auth: { userId: string | null } | null): ClerkContextAuth | null {
+	return auth ? { userId: auth.userId } : null;
+}
+{{/if}}
+
+{{#if (and (eq auth "clerk") (or (eq backend 'self') (eq backend 'hono') (eq backend 'elysia')))}}
+import { createClerkClient } from "@clerk/backend";
+import { env } from "@{{projectName}}/env/server";
+
+const clerkClient = createClerkClient({
+	secretKey: env.CLERK_SECRET_KEY,
+	publishableKey: env.CLERK_PUBLISHABLE_KEY,
+});
+
+async function authenticateClerkRequest(request: Request): Promise<ClerkContextAuth | null> {
+	const requestState = await clerkClient.authenticateRequest(request, {
+		authorizedParties: [env.CORS_ORIGIN],
+	});
+	return toClerkContextAuth(requestState.toAuth());
+}
+{{/if}}
+
+{{#if (and (eq backend 'self') (includes frontend "next"))}}
 import type { NextRequest } from "next/server";
 {{#if (eq auth "better-auth")}}
 import { auth } from "@{{projectName}}/auth";
 {{/if}}
 
-export async function createContext(req: NextRequest) {
+export async function createContext(req: NextRequest){{#if (eq auth "clerk")}}: Promise<ClerkRequestContext>{{/if}} {
 {{#if (eq auth "better-auth")}}
-  const session = await auth.api.getSession({
-    headers: req.headers,
-  });
-  return {
-    session,
-  };
+	const session = await auth.api.getSession({
+		headers: req.headers,
+	});
+	return {
+		auth: null,
+		session,
+	};
+{{else if (eq auth "clerk")}}
+	const clerkAuth = await authenticateClerkRequest(req);
+	return {
+		auth: clerkAuth,
+		session: null,
+	};
 {{else}}
-  return {}
+	return {
+		auth: null,
+		session: null,
+	};
 {{/if}}
 }
 
@@ -4340,16 +4544,26 @@ export async function createContext(req: NextRequest) {
 import { auth } from "@{{projectName}}/auth";
 {{/if}}
 
-export async function createContext({ req }: { req: Request }) {
+export async function createContext({ req }: { req: Request }){{#if (eq auth "clerk")}}: Promise<ClerkRequestContext>{{/if}} {
 {{#if (eq auth "better-auth")}}
 	const session = await auth.api.getSession({
 		headers: req.headers,
 	});
 	return {
+		auth: null,
 		session,
 	};
+{{else if (eq auth "clerk")}}
+	const clerkAuth = await authenticateClerkRequest(req);
+	return {
+		auth: clerkAuth,
+		session: null,
+	};
 {{else}}
-	return {};
+	return {
+		auth: null,
+		session: null,
+	};
 {{/if}}
 }
 
@@ -4359,17 +4573,21 @@ import { auth } from "@{{projectName}}/auth";
 {{/if}}
 
 export type CreateContextOptions = {
-  headers: Headers;
+	headers: Headers;
 };
 
 export async function createContext({ headers }: CreateContextOptions) {
 {{#if (eq auth "better-auth")}}
-  const session = await auth.api.getSession({ headers });
-  return {
-    session,
-  };
+	const session = await auth.api.getSession({ headers });
+	return {
+		auth: null,
+		session,
+	};
 {{else}}
-  return {};
+	return {
+		auth: null,
+		session: null,
+	};
 {{/if}}
 }
 
@@ -4379,17 +4597,21 @@ import { auth } from "@{{projectName}}/auth";
 {{/if}}
 
 export type CreateContextOptions = {
-  headers: Headers;
+	headers: Headers;
 };
 
 export async function createContext({ headers }: CreateContextOptions) {
 {{#if (eq auth "better-auth")}}
-  const session = await auth.api.getSession({ headers });
-  return {
-    session,
-  };
+	const session = await auth.api.getSession({ headers });
+	return {
+		auth: null,
+		session,
+	};
 {{else}}
-  return {};
+	return {
+		auth: null,
+		session: null,
+	};
 {{/if}}
 }
 
@@ -4400,22 +4622,29 @@ import { auth } from "@{{projectName}}/auth";
 {{/if}}
 
 export type CreateContextOptions = {
-  context: HonoContext;
+	context: HonoContext;
 };
 
-export async function createContext({ context }: CreateContextOptions) {
+export async function createContext({ context }: CreateContextOptions){{#if (eq auth "clerk")}}: Promise<ClerkRequestContext>{{/if}} {
 {{#if (eq auth "better-auth")}}
-  const session = await auth.api.getSession({
-    headers: context.req.raw.headers,
-  });
-  return {
-    session,
-  };
+	const session = await auth.api.getSession({
+		headers: context.req.raw.headers,
+	});
+	return {
+		auth: null,
+		session,
+	};
+{{else if (eq auth "clerk")}}
+	const clerkAuth = await authenticateClerkRequest(context.req.raw);
+	return {
+		auth: clerkAuth,
+		session: null,
+	};
 {{else}}
-  // No auth configured
-  return {
-    session: null,
-  };
+	return {
+		auth: null,
+		session: null,
+	};
 {{/if}}
 }
 
@@ -4426,22 +4655,29 @@ import { auth } from "@{{projectName}}/auth";
 {{/if}}
 
 export type CreateContextOptions = {
-  context: ElysiaContext;
+	context: ElysiaContext;
 };
 
-export async function createContext({ context }: CreateContextOptions) {
+export async function createContext({ context }: CreateContextOptions){{#if (eq auth "clerk")}}: Promise<ClerkRequestContext>{{/if}} {
 {{#if (eq auth "better-auth")}}
-  const session = await auth.api.getSession({
-    headers: context.request.headers,
-  });
-  return {
-    session,
-  };
+	const session = await auth.api.getSession({
+		headers: context.request.headers,
+	});
+	return {
+		auth: null,
+		session,
+	};
+{{else if (eq auth "clerk")}}
+	const clerkAuth = await authenticateClerkRequest(context.request);
+	return {
+		auth: clerkAuth,
+		session: null,
+	};
 {{else}}
-  // No auth configured
-  return {
-    session: null,
-  };
+	return {
+		auth: null,
+		session: null,
+	};
 {{/if}}
 }
 
@@ -4450,56 +4686,77 @@ import type { Request } from "express";
 {{#if (eq auth "better-auth")}}
 import { fromNodeHeaders } from "better-auth/node";
 import { auth } from "@{{projectName}}/auth";
+{{else if (eq auth "clerk")}}
+import { getAuth } from "@clerk/express";
 {{/if}}
 
 interface CreateContextOptions {
 	req: Request;
 }
 
-export async function createContext(opts: CreateContextOptions) {
+export async function createContext(opts: CreateContextOptions){{#if (eq auth "clerk")}}: Promise<ClerkRequestContext>{{/if}} {
 {{#if (eq auth "better-auth")}}
 	const session = await auth.api.getSession({
 		headers: fromNodeHeaders(opts.req.headers),
 	});
 	return {
+		auth: null,
 		session,
 	};
+{{else if (eq auth "clerk")}}
+	const clerkAuth = toClerkContextAuth(getAuth(opts.req));
+	return {
+		auth: clerkAuth,
+		session: null,
+	};
 {{else}}
-  // No auth configured
 	return {
+		auth: null,
 		session: null,
 	};
 {{/if}}
 }
 
 {{else if (eq backend 'fastify')}}
-import type { IncomingHttpHeaders } from "node:http";
 {{#if (eq auth "better-auth")}}
+import type { IncomingHttpHeaders } from "node:http";
 import { fromNodeHeaders } from "better-auth/node";
 import { auth } from "@{{projectName}}/auth";
+{{else if (eq auth "clerk")}}
+import { getAuth } from "@clerk/fastify";
+{{else}}
+import type { IncomingHttpHeaders } from "node:http";
 {{/if}}
 
-export async function createContext(req: IncomingHttpHeaders) {
+export async function createContext(req: {{#if (eq auth "clerk")}}Parameters<typeof getAuth>[0]{{else}}IncomingHttpHeaders{{/if}}){{#if (eq auth "clerk")}}: Promise<ClerkRequestContext>{{/if}} {
 {{#if (eq auth "better-auth")}}
-  const session = await auth.api.getSession({
-    headers: fromNodeHeaders(req),
-  });
-  return {
-    session,
-  };
+	const session = await auth.api.getSession({
+		headers: fromNodeHeaders(req),
+	});
+	return {
+		auth: null,
+		session,
+	};
+{{else if (eq auth "clerk")}}
+	const clerkAuth = toClerkContextAuth(getAuth(req));
+	return {
+		auth: clerkAuth,
+		session: null,
+	};
 {{else}}
-  // No auth configured
-  return {
-    session: null,
-  };
+	return {
+		auth: null,
+		session: null,
+	};
 {{/if}}
 }
 
 {{else}}
 export async function createContext() {
-  return {
-    session: null,
-  };
+	return {
+		auth: null,
+		session: null,
+	};
 }
 {{/if}}
 
@@ -4512,8 +4769,9 @@ export const o = os.$context<Context>();
 
 export const publicProcedure = o;
 
-{{#if (eq auth "better-auth")}}
+{{#if (or (eq auth "better-auth") (eq auth "clerk"))}}
 const requireAuth = o.middleware(async ({ context, next }) => {
+  {{#if (eq auth "better-auth")}}
   if (!context.session?.user) {
     throw new ORPCError("UNAUTHORIZED");
   }
@@ -4522,13 +4780,23 @@ const requireAuth = o.middleware(async ({ context, next }) => {
       session: context.session,
     },
   });
+  {{else}}
+  if (!context.auth?.userId) {
+    throw new ORPCError("UNAUTHORIZED");
+  }
+  return next({
+    context: {
+      auth: context.auth,
+    },
+  });
+  {{/if}}
 });
 
 export const protectedProcedure = publicProcedure.use(requireAuth);
 {{/if}}
 `],
 	["api/orpc/server/src/routers/index.ts.hbs", `{{#if (eq api "orpc")}}
-import { {{#if (eq auth "better-auth")}}protectedProcedure, {{/if}}publicProcedure } from "../index";
+import { {{#if (or (eq auth "better-auth") (eq auth "clerk"))}}protectedProcedure, {{/if}}publicProcedure } from "../index";
 import type { RouterClient } from "@orpc/server";
 {{#if (includes examples "todo")}}
 import { todoRouter } from "./todo";
@@ -4538,11 +4806,15 @@ export const appRouter = {
   healthCheck: publicProcedure.handler(() => {
     return "OK";
   }),
-  {{#if (eq auth "better-auth")}}
+  {{#if (or (eq auth "better-auth") (eq auth "clerk"))}}
   privateData: protectedProcedure.handler(({ context }) => {
     return {
       message: "This is private",
+      {{#if (eq auth "better-auth")}}
       user: context.session?.user,
+      {{else}}
+      userId: context.auth?.userId,
+      {{/if}}
     };
   }),
   {{/if}}
@@ -4719,11 +4991,17 @@ import { createContext } from "@{{projectName}}/api/context";
 import type { RouterClient } from "@orpc/server";
 import type { AppRouter } from "@{{projectName}}/api/routers/index";
 import { env } from "@{{projectName}}/env/web";
+{{#if (eq auth "clerk")}}
+import { getClerkAuthToken } from "@/utils/clerk-auth";
+{{/if}}
 {{else}}
 import type { AppRouterClient } from "@{{projectName}}/api/routers/index";
 {{#unless (eq backend "self")}}
 import { env } from "@{{projectName}}/env/web";
 {{/unless}}
+{{#if (eq auth "clerk")}}
+import { getClerkAuthToken } from "@/utils/clerk-auth";
+{{/if}}
 {{/if}}
 
 export const queryClient = new QueryClient({
@@ -4768,6 +5046,12 @@ export const client: RouterClient<typeof appRouter> = getORPCClient();
 {{else if (includes frontend "tanstack-start")}}
 const link = new RPCLink({
 	url: \`\${env.VITE_SERVER_URL}/rpc\`,
+{{#if (eq auth "clerk")}}
+	headers: async () => {
+		const token = await getClerkAuthToken();
+		return token ? { Authorization: \`Bearer \${token}\` } : {};
+	},
+{{/if}}
 {{#if (eq auth "better-auth")}}
 	fetch(url, options) {
 		return fetch(url, {
@@ -4792,6 +5076,25 @@ export const link = new RPCLink({
 {{else}}
 	url: \`\${env.VITE_SERVER_URL}/rpc\`,
 {{/if}}
+{{#if (eq auth "clerk")}}
+	headers: async () => {
+		{{#if (includes frontend "next")}}
+		if (typeof window !== "undefined") {
+			const token = await getClerkAuthToken();
+			return token ? { Authorization: \`Bearer \${token}\` } : {};
+		}
+
+		const { auth } = await import("@clerk/nextjs/server");
+		const clerkAuth = await auth();
+		const token = await clerkAuth.getToken();
+
+		return token ? { Authorization: \`Bearer \${token}\` } : {};
+		{{else}}
+		const token = await getClerkAuthToken();
+		return token ? { Authorization: \`Bearer \${token}\` } : {};
+		{{/if}}
+	},
+{{/if}}
 {{#if (eq auth "better-auth")}}
 	fetch(url, options) {
 		return fetch(url, {
@@ -4816,7 +5119,6 @@ export const client: AppRouterClient = createORPCClient(link)
 {{/if}}
 
 export const orpc = createTanstackQueryUtils(client)
-
 `],
 	["api/orpc/web/solid/src/utils/orpc.ts.hbs", `import { createORPCClient } from "@orpc/client";
 import { RPCLink } from "@orpc/client/fetch";
@@ -4921,6 +5223,8 @@ export const Route = createFileRoute('/api/trpc/$')({
 	["api/trpc/native/utils/trpc.ts.hbs", `{{#if (eq auth "better-auth")}}
 import { authClient } from "@/lib/auth-client";
 import { Platform } from "react-native";
+{{else if (eq auth "clerk")}}
+import { getClerkAuthToken } from "@/utils/clerk-auth";
 {{/if}}
 import { QueryClient } from "@tanstack/react-query";
 import { createTRPCClient, httpBatchLink } from "@trpc/client";
@@ -4958,6 +5262,11 @@ const trpcClient = createTRPCClient<AppRouter>({
 				}
 				return Object.fromEntries(headers);
 			},
+{{else if (eq auth "clerk")}}
+			headers: async function () {
+				const token = await getClerkAuthToken();
+				return token ? { Authorization: \`Bearer \${token}\` } : {};
+			},
 {{/if}}
 		}),
 	],
@@ -5017,25 +5326,64 @@ report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
   "scripts": {},
   "devDependencies": {}
 }`],
-	["api/trpc/server/src/context.ts.hbs", `{{#if (and (eq backend 'self') (includes frontend "next"))}}
-import type { NextRequest } from "next/server";
+	["api/trpc/server/src/context.ts.hbs", `{{#if (eq auth "clerk")}}
+type ClerkContextAuth = {
+	userId: string | null;
+};
+
+type ClerkRequestContext = {
+	auth: ClerkContextAuth | null;
+	session: null;
+};
+
+function toClerkContextAuth(auth: { userId: string | null } | null): ClerkContextAuth | null {
+	return auth ? { userId: auth.userId } : null;
+}
+{{/if}}
+
+{{#if (and (eq auth "clerk") (or (eq backend 'self') (eq backend 'hono') (eq backend 'elysia')))}}
+import { createClerkClient } from "@clerk/backend";
+import { env } from "@{{projectName}}/env/server";
+
+const clerkClient = createClerkClient({
+	secretKey: env.CLERK_SECRET_KEY,
+	publishableKey: env.CLERK_PUBLISHABLE_KEY,
+});
+
+async function authenticateClerkRequest(request: Request): Promise<ClerkContextAuth | null> {
+	const requestState = await clerkClient.authenticateRequest(request, {
+		authorizedParties: [env.CORS_ORIGIN],
+	});
+	return toClerkContextAuth(requestState.toAuth());
+}
+{{/if}}
+
+{{#if (and (eq backend 'self') (includes frontend "next"))}}
+import type { NextRequest } from "next/server";
 {{#if (eq auth "better-auth")}}
 import { auth } from "@{{projectName}}/auth";
 {{/if}}
 
-export async function createContext(req: NextRequest) {
+export async function createContext(req: NextRequest){{#if (eq auth "clerk")}}: Promise<ClerkRequestContext>{{/if}} {
 {{#if (eq auth "better-auth")}}
-  const session = await auth.api.getSession({
-    headers: req.headers,
-  });
-  return {
-    session,
-  };
+	const session = await auth.api.getSession({
+		headers: req.headers,
+	});
+	return {
+		auth: null,
+		session,
+	};
+{{else if (eq auth "clerk")}}
+	const clerkAuth = await authenticateClerkRequest(req);
+	return {
+		auth: clerkAuth,
+		session: null,
+	};
 {{else}}
-  // No auth configured
-  return {
-    session: null,
-  };
+	return {
+		auth: null,
+		session: null,
+	};
 {{/if}}
 }
 
@@ -5044,17 +5392,24 @@ export async function createContext(req: NextRequest) {
 import { auth } from "@{{projectName}}/auth";
 {{/if}}
 
-export async function createContext({ req }: { req: Request }) {
+export async function createContext({ req }: { req: Request }){{#if (eq auth "clerk")}}: Promise<ClerkRequestContext>{{/if}} {
 {{#if (eq auth "better-auth")}}
 	const session = await auth.api.getSession({
 		headers: req.headers,
 	});
 	return {
+		auth: null,
 		session,
 	};
+{{else if (eq auth "clerk")}}
+	const clerkAuth = await authenticateClerkRequest(req);
+	return {
+		auth: clerkAuth,
+		session: null,
+	};
 {{else}}
-	// No auth configured
 	return {
+		auth: null,
 		session: null,
 	};
 {{/if}}
@@ -5067,22 +5422,29 @@ import { auth } from "@{{projectName}}/auth";
 {{/if}}
 
 export type CreateContextOptions = {
-  context: HonoContext;
+	context: HonoContext;
 };
 
-export async function createContext({ context }: CreateContextOptions) {
+export async function createContext({ context }: CreateContextOptions){{#if (eq auth "clerk")}}: Promise<ClerkRequestContext>{{/if}} {
 {{#if (eq auth "better-auth")}}
-  const session = await auth.api.getSession({
-    headers: context.req.raw.headers,
-  });
-  return {
-    session,
-  };
+	const session = await auth.api.getSession({
+		headers: context.req.raw.headers,
+	});
+	return {
+		auth: null,
+		session,
+	};
+{{else if (eq auth "clerk")}}
+	const clerkAuth = await authenticateClerkRequest(context.req.raw);
+	return {
+		auth: clerkAuth,
+		session: null,
+	};
 {{else}}
-  // No auth configured
-  return {
-    session: null,
-  };
+	return {
+		auth: null,
+		session: null,
+	};
 {{/if}}
 }
 
@@ -5093,22 +5455,29 @@ import { auth } from "@{{projectName}}/auth";
 {{/if}}
 
 export type CreateContextOptions = {
-  context: ElysiaContext;
+	context: ElysiaContext;
 };
 
-export async function createContext({ context }: CreateContextOptions) {
+export async function createContext({ context }: CreateContextOptions){{#if (eq auth "clerk")}}: Promise<ClerkRequestContext>{{/if}} {
 {{#if (eq auth "better-auth")}}
-  const session = await auth.api.getSession({
-    headers: context.request.headers,
-  });
-  return {
-    session,
-  };
+	const session = await auth.api.getSession({
+		headers: context.request.headers,
+	});
+	return {
+		auth: null,
+		session,
+	};
+{{else if (eq auth "clerk")}}
+	const clerkAuth = await authenticateClerkRequest(context.request);
+	return {
+		auth: clerkAuth,
+		session: null,
+	};
 {{else}}
-  // No auth configured
-  return {
-    session: null,
-  };
+	return {
+		auth: null,
+		session: null,
+	};
 {{/if}}
 }
 
@@ -5117,19 +5486,28 @@ import type { CreateExpressContextOptions } from "@trpc/server/adapters/express"
 {{#if (eq auth "better-auth")}}
 import { fromNodeHeaders } from "better-auth/node";
 import { auth } from "@{{projectName}}/auth";
+{{else if (eq auth "clerk")}}
+import { getAuth } from "@clerk/express";
 {{/if}}
 
-export async function createContext(opts: CreateExpressContextOptions) {
+export async function createContext(opts: CreateExpressContextOptions){{#if (eq auth "clerk")}}: Promise<ClerkRequestContext>{{/if}} {
 {{#if (eq auth "better-auth")}}
 	const session = await auth.api.getSession({
 		headers: fromNodeHeaders(opts.req.headers),
 	});
 	return {
+		auth: null,
 		session,
 	};
+{{else if (eq auth "clerk")}}
+	const clerkAuth = toClerkContextAuth(getAuth(opts.req));
+	return {
+		auth: clerkAuth,
+		session: null,
+	};
 {{else}}
-  // No auth configured
 	return {
+		auth: null,
 		session: null,
 	};
 {{/if}}
@@ -5140,17 +5518,28 @@ import type { CreateFastifyContextOptions } from "@trpc/server/adapters/fastify"
 {{#if (eq auth "better-auth")}}
 import { fromNodeHeaders } from "better-auth/node";
 import { auth } from "@{{projectName}}/auth";
+{{else if (eq auth "clerk")}}
+import { getAuth } from "@clerk/fastify";
 {{/if}}
 
-export async function createContext({ req, res }: CreateFastifyContextOptions) {
+export async function createContext({ req }: CreateFastifyContextOptions){{#if (eq auth "clerk")}}: Promise<ClerkRequestContext>{{/if}} {
 {{#if (eq auth "better-auth")}}
-  const session = await auth.api.getSession({
-    headers: fromNodeHeaders(req.headers),
-  });
-  return { session };
+	const session = await auth.api.getSession({
+		headers: fromNodeHeaders(req.headers),
+	});
+	return {
+		auth: null,
+		session,
+	};
+{{else if (eq auth "clerk")}}
+	const clerkAuth = toClerkContextAuth(getAuth(req));
+	return {
+		auth: clerkAuth,
+		session: null,
+	};
 {{else}}
-  // No auth configured
 	return {
+		auth: null,
 		session: null,
 	};
 {{/if}}
@@ -5158,9 +5547,10 @@ export async function createContext({ req, res }: CreateFastifyContextOptions) {
 
 {{else}}
 export async function createContext() {
-  return {
-    session: null,
-  };
+	return {
+		auth: null,
+		session: null,
+	};
 }
 {{/if}}
 
@@ -5175,8 +5565,9 @@ export const router = t.router;
 
 export const publicProcedure = t.procedure;
 
-{{#if (eq auth "better-auth")}}
+{{#if (or (eq auth "better-auth") (eq auth "clerk"))}}
 export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
+  {{#if (eq auth "better-auth")}}
   if (!ctx.session) {
     throw new TRPCError({
       code: "UNAUTHORIZED",
@@ -5184,10 +5575,23 @@ export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
       cause: "No session",
     });
   }
+  {{else}}
+  if (!ctx.auth?.userId) {
+    throw new TRPCError({
+      code: "UNAUTHORIZED",
+      message: "Authentication required",
+      cause: "No Clerk userId",
+    });
+  }
+  {{/if}}
   return next({
     ctx: {
       ...ctx,
+      {{#if (eq auth "better-auth")}}
       session: ctx.session,
+      {{else}}
+      auth: ctx.auth,
+      {{/if}}
     },
   });
 });
@@ -5220,7 +5624,7 @@ export type AppRouter = typeof appRouter;
 export type AppRouterClient = RouterClient<typeof appRouter>;
 {{else if (eq api "trpc")}}
 import {
-  {{#if (eq auth "better-auth")}}protectedProcedure, {{/if}}publicProcedure,
+  {{#if (or (eq auth "better-auth") (eq auth "clerk"))}}protectedProcedure, {{/if}}publicProcedure,
   router,
 } from "../index";
 {{#if (includes examples "todo")}}
@@ -5231,11 +5635,15 @@ export const appRouter = router({
   healthCheck: publicProcedure.query(() => {
     return "OK";
   }),
-  {{#if (eq auth "better-auth")}}
+  {{#if (or (eq auth "better-auth") (eq auth "clerk"))}}
   privateData: protectedProcedure.query(({ ctx }) => {
     return {
       message: "This is private",
+      {{#if (eq auth "better-auth")}}
       user: ctx.session.user,
+      {{else}}
+      userId: ctx.auth.userId,
+      {{/if}}
     };
   }),
   {{/if}}
@@ -5268,6 +5676,9 @@ import { toast } from 'sonner';
 {{#unless (eq backend "self")}}
 import { env } from "@{{projectName}}/env/web";
 {{/unless}}
+{{#if (eq auth "clerk")}}
+import { getClerkAuthToken } from "@/utils/clerk-auth";
+{{/if}}
 
 export const queryClient = new QueryClient({
 	queryCache: new QueryCache({
@@ -5290,6 +5701,20 @@ const trpcClient = createTRPCClient<AppRouter>({
 {{else}}
 			url: \`\${env.NEXT_PUBLIC_SERVER_URL}/trpc\`,
 {{/if}}
+{{#if (eq auth "clerk")}}
+			headers: async () => {
+				if (typeof window !== "undefined") {
+					const token = await getClerkAuthToken();
+					return token ? { Authorization: \`Bearer \${token}\` } : {};
+				}
+
+				const { auth } = await import("@clerk/nextjs/server");
+				const clerkAuth = await auth();
+				const token = await clerkAuth.getToken();
+
+				return token ? { Authorization: \`Bearer \${token}\` } : {};
+			},
+{{/if}}
 {{#if (eq auth "better-auth")}}
 			fetch(url, options) {
 				return fetch(url, {
@@ -5321,6 +5746,9 @@ import { createTRPCClient, httpBatchLink } from "@trpc/client";
 import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
 import { toast } from "sonner";
 import { env } from "@{{projectName}}/env/web";
+{{#if (eq auth "clerk")}}
+import { getClerkAuthToken } from "@/utils/clerk-auth";
+{{/if}}
 
 export const queryClient = new QueryClient({
 	queryCache: new QueryCache({
@@ -5339,6 +5767,12 @@ export const trpcClient = createTRPCClient<AppRouter>({
 	links: [
 		httpBatchLink({
 			url: \`\${env.VITE_SERVER_URL}/trpc\`,
+{{#if (eq auth "clerk")}}
+			headers: async () => {
+				const token = await getClerkAuthToken();
+				return token ? { Authorization: \`Bearer \${token}\` } : {};
+			},
+{{/if}}
 {{#if (eq auth "better-auth")}}
 			fetch(url, options) {
 				return fetch(url, {
@@ -14451,10 +14885,14 @@ export const get = query({
 });
 `],
 	["auth/clerk/convex/native/base/app/(auth)/_layout.tsx.hbs", `import { Redirect, Stack } from "expo-router";
-import { useAuth } from "@clerk/clerk-expo";
+import { useAuth } from "@clerk/expo";
 
 export default function AuthRoutesLayout() {
-  const { isSignedIn } = useAuth();
+  const { isLoaded, isSignedIn } = useAuth();
+
+  if (!isLoaded) {
+    return null;
+  }
 
   if (isSignedIn) {
     return <Redirect href={"/"} />;
@@ -14463,189 +14901,480 @@ export default function AuthRoutesLayout() {
   return <Stack />;
 }
 `],
-	["auth/clerk/convex/native/base/app/(auth)/sign-in.tsx.hbs", `import { useSignIn } from "@clerk/clerk-expo";
-import { Link, useRouter } from "expo-router";
-import { Text, TextInput, TouchableOpacity, View } from "react-native";
+	["auth/clerk/convex/native/base/app/(auth)/sign-in.tsx.hbs", `import { useSignIn } from "@clerk/expo";
+import { type Href, Link, useRouter } from "expo-router";
 import React from "react";
+import { Pressable, StyleSheet, Text, TextInput, View } from "react-native";
+
+function pushDecoratedUrl(router: ReturnType<typeof useRouter>, decorateUrl: (url: string) => string, href: string) {
+  const url = decorateUrl(href);
+  const nextHref = url.startsWith("http") ? new URL(url).pathname : url;
+  router.push(nextHref as Href);
+}
 
 export default function Page() {
-  const { signIn, setActive, isLoaded } = useSignIn();
+  const { signIn, errors, fetchStatus } = useSignIn();
   const router = useRouter();
-
   const [emailAddress, setEmailAddress] = React.useState("");
   const [password, setPassword] = React.useState("");
+  const [code, setCode] = React.useState("");
+  const [statusMessage, setStatusMessage] = React.useState<string | null>(null);
 
-  // Handle the submission of the sign-in form
-  const onSignInPress = async () => {
-    if (!isLoaded) return;
+  const emailCodeFactor = signIn.supportedSecondFactors.find(
+    (factor) => factor.strategy === "email_code",
+  );
+  const requiresEmailCode =
+    signIn.status === "needs_client_trust" ||
+    (signIn.status === "needs_second_factor" && !!emailCodeFactor);
 
-    // Start the sign-in process using the email and password provided
-    try {
-      const signInAttempt = await signIn.create({
-        identifier: emailAddress,
-        password,
-      });
+  const handleSubmit = async () => {
+    setStatusMessage(null);
+
+    const { error } = await signIn.password({
+      emailAddress,
+      password,
+    });
+
+    if (error) {
+      console.error(JSON.stringify(error, null, 2));
+      setStatusMessage(error.longMessage ?? "Unable to sign in. Please try again.");
+      return;
+    }
 
-      // If sign-in process is complete, set the created session as active
-      // and redirect the user
-      if (signInAttempt.status === "complete") {
-        await setActive({ session: signInAttempt.createdSessionId });
-        router.replace("/");
+    if (signIn.status === "complete") {
+      await signIn.finalize({
+        navigate: ({ session, decorateUrl }) => {
+          if (session?.currentTask) {
+            console.log(session.currentTask);
+            return;
+          }
+
+          pushDecoratedUrl(router, decorateUrl, "/");
+        },
+      });
+    } else if (signIn.status === "needs_second_factor" || signIn.status === "needs_client_trust") {
+      if (emailCodeFactor) {
+        await signIn.mfa.sendEmailCode();
+        setStatusMessage(\`We sent a verification code to \${emailCodeFactor.safeIdentifier}.\`);
       } else {
-        // If the status isn't complete, check why. User might need to
-        // complete further steps.
-        console.error(JSON.stringify(signInAttempt, null, 2));
+        console.error("Second factor is required, but email_code is not available:", signIn);
+        setStatusMessage("A second factor is required, but this screen only supports email codes right now.");
       }
-    } catch (err) {
-      // See https://clerk.com/docs/custom-flows/error-handling
-      // for more info on error handling
-      console.error(JSON.stringify(err, null, 2));
+    } else {
+      console.error("Sign-in attempt not complete:", signIn);
+      setStatusMessage("Sign-in could not be completed. Check the logs for more details.");
+    }
+  };
+
+  const handleVerify = async () => {
+    setStatusMessage(null);
+
+    await signIn.mfa.verifyEmailCode({ code });
+
+    if (signIn.status === "complete") {
+      await signIn.finalize({
+        navigate: ({ session, decorateUrl }) => {
+          if (session?.currentTask) {
+            console.log(session.currentTask);
+            return;
+          }
+
+          pushDecoratedUrl(router, decorateUrl, "/");
+        },
+      });
+    } else {
+      console.error("Sign-in attempt not complete:", signIn);
+      setStatusMessage("That code did not complete sign-in. Please try again.");
     }
   };
 
+  if (requiresEmailCode) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.title}>Verify your account</Text>
+        {statusMessage && <Text style={styles.helper}>{statusMessage}</Text>}
+        <TextInput
+          style={styles.input}
+          value={code}
+          placeholder="Enter your verification code"
+          placeholderTextColor="#666666"
+          onChangeText={(value) => setCode(value)}
+          keyboardType="numeric"
+        />
+        {errors.fields.code && <Text style={styles.error}>{errors.fields.code.message}</Text>}
+        <Pressable
+          style={({ pressed }) => [
+            styles.button,
+            fetchStatus === "fetching" && styles.buttonDisabled,
+            pressed && styles.buttonPressed,
+          ]}
+          onPress={handleVerify}
+          disabled={fetchStatus === "fetching"}
+        >
+          <Text style={styles.buttonText}>Verify</Text>
+        </Pressable>
+        <Pressable
+          style={({ pressed }) => [styles.secondaryButton, pressed && styles.buttonPressed]}
+          onPress={() => signIn.mfa.sendEmailCode()}
+        >
+          <Text style={styles.secondaryButtonText}>I need a new code</Text>
+        </Pressable>
+      </View>
+    );
+  }
+
   return (
-    <View>
-      <Text>Sign in</Text>
+    <View style={styles.container}>
+      <Text style={styles.title}>Sign in</Text>
+      {statusMessage && <Text style={styles.helper}>{statusMessage}</Text>}
+      <Text style={styles.label}>Email address</Text>
       <TextInput
+        style={styles.input}
         autoCapitalize="none"
         value={emailAddress}
         placeholder="Enter email"
-        onChangeText={(emailAddress) => setEmailAddress(emailAddress)}
+        placeholderTextColor="#666666"
+        onChangeText={(value) => setEmailAddress(value)}
+        keyboardType="email-address"
       />
+      {errors.fields.identifier && <Text style={styles.error}>{errors.fields.identifier.message}</Text>}
+      <Text style={styles.label}>Password</Text>
       <TextInput
+        style={styles.input}
         value={password}
         placeholder="Enter password"
+        placeholderTextColor="#666666"
         secureTextEntry={true}
-        onChangeText={(password) => setPassword(password)}
+        onChangeText={(value) => setPassword(value)}
       />
-      <TouchableOpacity onPress={onSignInPress}>
-        <Text>Continue</Text>
-      </TouchableOpacity>
-      <View style=\\{{ display: "flex", flexDirection: "row", gap: 3 }}>
-        <Text>Don't have an account?</Text>
+      {errors.fields.password && <Text style={styles.error}>{errors.fields.password.message}</Text>}
+      <Pressable
+        style={({ pressed }) => [
+          styles.button,
+          (!emailAddress || !password || fetchStatus === "fetching") && styles.buttonDisabled,
+          pressed && styles.buttonPressed,
+        ]}
+        onPress={handleSubmit}
+        disabled={!emailAddress || !password || fetchStatus === "fetching"}
+      >
+        <Text style={styles.buttonText}>Sign in</Text>
+      </Pressable>
+      <View style={styles.linkContainer}>
+        <Text>Don't have an account? </Text>
         <Link href="/sign-up">
-          <Text>Sign up</Text>
+          <Text style={styles.linkText}>Sign up</Text>
         </Link>
       </View>
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    gap: 12,
+  },
+  title: {
+    marginBottom: 8,
+    fontSize: 24,
+    fontWeight: "700",
+  },
+  label: {
+    fontWeight: "600",
+    fontSize: 14,
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ccc",
+    borderRadius: 8,
+    padding: 12,
+    fontSize: 16,
+    backgroundColor: "#fff",
+  },
+  button: {
+    backgroundColor: "#0a7ea4",
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+    alignItems: "center",
+    marginTop: 8,
+  },
+  buttonPressed: {
+    opacity: 0.7,
+  },
+  buttonDisabled: {
+    opacity: 0.5,
+  },
+  buttonText: {
+    color: "#fff",
+    fontWeight: "600",
+  },
+  secondaryButton: {
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+    alignItems: "center",
+    marginTop: 8,
+  },
+  secondaryButtonText: {
+    color: "#0a7ea4",
+    fontWeight: "600",
+  },
+  linkContainer: {
+    flexDirection: "row",
+    gap: 4,
+    marginTop: 12,
+    alignItems: "center",
+  },
+  linkText: {
+    color: "#0a7ea4",
+    fontWeight: "600",
+  },
+  error: {
+    color: "#d32f2f",
+    fontSize: 12,
+    marginTop: -8,
+  },
+  helper: {
+    color: "#555555",
+    fontSize: 13,
+  },
+});
 `],
-	["auth/clerk/convex/native/base/app/(auth)/sign-up.tsx.hbs", `import * as React from "react";
-import { Text, TextInput, TouchableOpacity, View } from "react-native";
-import { useSignUp } from "@clerk/clerk-expo";
-import { Link, useRouter } from "expo-router";
+	["auth/clerk/convex/native/base/app/(auth)/sign-up.tsx.hbs", `import { useAuth, useSignUp } from "@clerk/expo";
+import { type Href, Link, useRouter } from "expo-router";
+import React from "react";
+import { Pressable, StyleSheet, Text, TextInput, View } from "react-native";
 
-export default function SignUpScreen() {
-  const { isLoaded, signUp, setActive } = useSignUp();
-  const router = useRouter();
+function pushDecoratedUrl(router: ReturnType<typeof useRouter>, decorateUrl: (url: string) => string, href: string) {
+  const url = decorateUrl(href);
+  const nextHref = url.startsWith("http") ? new URL(url).pathname : url;
+  router.push(nextHref as Href);
+}
 
+export default function Page() {
+  const { signUp, errors, fetchStatus } = useSignUp();
+  const { isSignedIn } = useAuth();
+  const router = useRouter();
   const [emailAddress, setEmailAddress] = React.useState("");
   const [password, setPassword] = React.useState("");
-  const [pendingVerification, setPendingVerification] = React.useState(false);
   const [code, setCode] = React.useState("");
+  const [statusMessage, setStatusMessage] = React.useState<string | null>(null);
 
-  // Handle submission of sign-up form
-  const onSignUpPress = async () => {
-    if (!isLoaded) return;
-
-    // Start sign-up process using email and password provided
-    try {
-      await signUp.create({
-        emailAddress,
-        password,
-      });
+  const handleSubmit = async () => {
+    setStatusMessage(null);
 
-      // Send user an email with verification code
-      await signUp.prepareEmailAddressVerification({ strategy: "email_code" });
+    const { error } = await signUp.password({
+      emailAddress,
+      password,
+    });
 
-      // Set 'pendingVerification' to true to display second form
-      // and capture OTP code
-      setPendingVerification(true);
-    } catch (err) {
-      // See https://clerk.com/docs/custom-flows/error-handling
-      // for more info on error handling
-      console.error(JSON.stringify(err, null, 2));
+    if (error) {
+      console.error(JSON.stringify(error, null, 2));
+      setStatusMessage(error.longMessage ?? "Unable to sign up. Please try again.");
+      return;
     }
+
+    await signUp.verifications.sendEmailCode();
+    setStatusMessage(\`We sent a verification code to \${emailAddress}.\`);
   };
 
-  // Handle submission of verification form
-  const onVerifyPress = async () => {
-    if (!isLoaded) return;
+  const handleVerify = async () => {
+    setStatusMessage(null);
 
-    try {
-      // Use the code the user provided to attempt verification
-      const signUpAttempt = await signUp.attemptEmailAddressVerification({
-        code,
-      });
+    await signUp.verifications.verifyEmailCode({
+      code,
+    });
 
-      // If verification was completed, set the session to active
-      // and redirect the user
-      if (signUpAttempt.status === "complete") {
-        await setActive({ session: signUpAttempt.createdSessionId });
-        router.replace("/");
-      } else {
-        // If the status is not complete, check why. User may need to
-        // complete further steps.
-        console.error(JSON.stringify(signUpAttempt, null, 2));
-      }
-    } catch (err) {
-      // See https://clerk.com/docs/custom-flows/error-handling
-      // for more info on error handling
-      console.error(JSON.stringify(err, null, 2));
+    if (signUp.status === "complete") {
+      await signUp.finalize({
+        navigate: ({ session, decorateUrl }) => {
+          if (session?.currentTask) {
+            console.log(session.currentTask);
+            return;
+          }
+
+          pushDecoratedUrl(router, decorateUrl, "/");
+        },
+      });
+    } else {
+      console.error("Sign-up attempt not complete:", signUp);
+      setStatusMessage("That code did not complete sign-up. Please try again.");
     }
   };
 
-  if (pendingVerification) {
+  if (signUp.status === "complete" || isSignedIn) {
+    return null;
+  }
+
+  if (
+    signUp.status === "missing_requirements" &&
+    signUp.unverifiedFields.includes("email_address") &&
+    signUp.missingFields.length === 0
+  ) {
     return (
-      <>
-        <Text>Verify your email</Text>
+      <View style={styles.container}>
+        <Text style={styles.title}>Verify your account</Text>
+        {statusMessage && <Text style={styles.helper}>{statusMessage}</Text>}
         <TextInput
+          style={styles.input}
           value={code}
           placeholder="Enter your verification code"
-          onChangeText={(code) => setCode(code)}
+          placeholderTextColor="#666666"
+          onChangeText={(value) => setCode(value)}
+          keyboardType="numeric"
         />
-        <TouchableOpacity onPress={onVerifyPress}>
-          <Text>Verify</Text>
-        </TouchableOpacity>
-      </>
+        {errors.fields.code && <Text style={styles.error}>{errors.fields.code.message}</Text>}
+        <Pressable
+          style={({ pressed }) => [
+            styles.button,
+            fetchStatus === "fetching" && styles.buttonDisabled,
+            pressed && styles.buttonPressed,
+          ]}
+          onPress={handleVerify}
+          disabled={fetchStatus === "fetching"}
+        >
+          <Text style={styles.buttonText}>Verify</Text>
+        </Pressable>
+        <Pressable
+          style={({ pressed }) => [styles.secondaryButton, pressed && styles.buttonPressed]}
+          onPress={() => signUp.verifications.sendEmailCode()}
+        >
+          <Text style={styles.secondaryButtonText}>I need a new code</Text>
+        </Pressable>
+      </View>
     );
   }
 
   return (
-    <View>
-      <Text>Sign up</Text>
+    <View style={styles.container}>
+      <Text style={styles.title}>Sign up</Text>
+      {statusMessage && <Text style={styles.helper}>{statusMessage}</Text>}
+      <Text style={styles.label}>Email address</Text>
       <TextInput
+        style={styles.input}
         autoCapitalize="none"
         value={emailAddress}
         placeholder="Enter email"
-        onChangeText={(email) => setEmailAddress(email)}
+        placeholderTextColor="#666666"
+        onChangeText={(value) => setEmailAddress(value)}
+        keyboardType="email-address"
       />
+      {errors.fields.emailAddress && (
+        <Text style={styles.error}>{errors.fields.emailAddress.message}</Text>
+      )}
+      <Text style={styles.label}>Password</Text>
       <TextInput
+        style={styles.input}
         value={password}
         placeholder="Enter password"
+        placeholderTextColor="#666666"
         secureTextEntry={true}
-        onChangeText={(password) => setPassword(password)}
+        onChangeText={(value) => setPassword(value)}
       />
-      <TouchableOpacity onPress={onSignUpPress}>
-        <Text>Continue</Text>
-      </TouchableOpacity>
-      <View style=\\{{ display: "flex", flexDirection: "row", gap: 3 }}>
-        <Text>Already have an account?</Text>
+      {errors.fields.password && <Text style={styles.error}>{errors.fields.password.message}</Text>}
+      <Pressable
+        style={({ pressed }) => [
+          styles.button,
+          (!emailAddress || !password || fetchStatus === "fetching") && styles.buttonDisabled,
+          pressed && styles.buttonPressed,
+        ]}
+        onPress={handleSubmit}
+        disabled={!emailAddress || !password || fetchStatus === "fetching"}
+      >
+        <Text style={styles.buttonText}>Sign up</Text>
+      </Pressable>
+      <View style={styles.linkContainer}>
+        <Text>Already have an account? </Text>
         <Link href="/sign-in">
-          <Text>Sign in</Text>
+          <Text style={styles.linkText}>Sign in</Text>
         </Link>
       </View>
+      <View nativeID="clerk-captcha" />
     </View>
   );
 }
-`],
-	["auth/clerk/convex/native/base/components/sign-out-button.tsx.hbs", `import { useClerk } from "@clerk/clerk-expo";
-import { useRouter } from "expo-router";
-import { Text, TouchableOpacity } from "react-native";
 
-export const SignOutButton = () => {
-  // Use \`useClerk()\` to access the \`signOut()\` function
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    gap: 12,
+  },
+  title: {
+    marginBottom: 8,
+    fontSize: 24,
+    fontWeight: "700",
+  },
+  label: {
+    fontWeight: "600",
+    fontSize: 14,
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ccc",
+    borderRadius: 8,
+    padding: 12,
+    fontSize: 16,
+    backgroundColor: "#fff",
+  },
+  button: {
+    backgroundColor: "#0a7ea4",
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+    alignItems: "center",
+    marginTop: 8,
+  },
+  buttonPressed: {
+    opacity: 0.7,
+  },
+  buttonDisabled: {
+    opacity: 0.5,
+  },
+  buttonText: {
+    color: "#fff",
+    fontWeight: "600",
+  },
+  secondaryButton: {
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+    alignItems: "center",
+    marginTop: 8,
+  },
+  secondaryButtonText: {
+    color: "#0a7ea4",
+    fontWeight: "600",
+  },
+  linkContainer: {
+    flexDirection: "row",
+    gap: 4,
+    marginTop: 12,
+    alignItems: "center",
+  },
+  linkText: {
+    color: "#0a7ea4",
+    fontWeight: "600",
+  },
+  error: {
+    color: "#d32f2f",
+    fontSize: 12,
+    marginTop: -8,
+  },
+  helper: {
+    color: "#555555",
+    fontSize: 13,
+  },
+});
+`],
+	["auth/clerk/convex/native/base/components/sign-out-button.tsx.hbs", `import { useClerk } from "@clerk/expo";
+import { useRouter } from "expo-router";
+import { Text, TouchableOpacity } from "react-native";
+
+export const SignOutButton = () => {
+  // Use \`useClerk()\` to access the \`signOut()\` function
   const { signOut } = useClerk();
   const router = useRouter();
 
@@ -14670,35 +15399,757 @@ export const SignOutButton = () => {
 `],
 	["auth/clerk/convex/web/react/next/src/app/dashboard/page.tsx.hbs", `"use client";
 
-import { api } from "@{{projectName}}/backend/convex/_generated/api";
-import { SignInButton, UserButton, useUser } from "@clerk/nextjs";
-import { Authenticated, AuthLoading, Unauthenticated, useQuery } from "convex/react";
+import { api } from "@{{projectName}}/backend/convex/_generated/api";
+import { SignInButton, UserButton, useUser } from "@clerk/nextjs";
+import { Authenticated, AuthLoading, Unauthenticated, useQuery } from "convex/react";
+
+export default function Dashboard() {
+  const user = useUser();
+  const privateData = useQuery(api.privateData.get);
+
+  return (
+    <>
+      <Authenticated>
+        <div>
+          <h1>Dashboard</h1>
+          <p>Welcome {user.user?.fullName}</p>
+          <p>privateData: {privateData?.message}</p>
+          <UserButton />
+        </div>
+      </Authenticated>
+      <Unauthenticated>
+        <SignInButton />
+      </Unauthenticated>
+      <AuthLoading>
+        <div>Loading...</div>
+      </AuthLoading>
+    </>
+  );
+}
+`],
+	["auth/clerk/convex/web/react/next/src/proxy.ts.hbs", `import { clerkMiddleware } from "@clerk/nextjs/server";
+
+export default clerkMiddleware();
+
+export const config = {
+	matcher: [
+		// Skip Next.js internals and all static files, unless found in search params
+		"/((?!_next|[^?]*\\\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
+		// Always run for API routes
+		"/(api|trpc)(.*)",
+	],
+};
+`],
+	["auth/clerk/convex/web/react/react-router/src/routes/dashboard.tsx.hbs", `import { SignInButton, UserButton, useUser } from "@clerk/react-router";
+import { api } from "@{{projectName}}/backend/convex/_generated/api";
+import {
+	Authenticated,
+	AuthLoading,
+	Unauthenticated,
+	useQuery,
+} from "convex/react";
+
+export default function Dashboard() {
+	const privateData = useQuery(api.privateData.get);
+	const user = useUser();
+
+	return (
+		<>
+			<Authenticated>
+				<div>
+					<h1>Dashboard</h1>
+					<p>Welcome {user.user?.fullName}</p>
+					<p>privateData: {privateData?.message}</p>
+					<UserButton />
+				</div>
+			</Authenticated>
+			<Unauthenticated>
+				<SignInButton />
+			</Unauthenticated>
+			<AuthLoading>
+				<div>Loading...</div>
+			</AuthLoading>
+		</>
+	);
+}
+`],
+	["auth/clerk/convex/web/react/tanstack-router/src/routes/dashboard.tsx.hbs", `import { SignInButton, UserButton, useUser } from "@clerk/react";
+import { api } from "@{{projectName}}/backend/convex/_generated/api";
+import { createFileRoute } from "@tanstack/react-router";
+import {
+	Authenticated,
+	AuthLoading,
+	Unauthenticated,
+	useQuery,
+} from "convex/react";
+
+export const Route = createFileRoute("/dashboard")({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	const privateData = useQuery(api.privateData.get);
+	const user = useUser()
+
+	return (
+		<>
+			<Authenticated>
+				<div>
+					<h1>Dashboard</h1>
+					<p>Welcome {user.user?.fullName}</p>
+					<p>privateData: {privateData?.message}</p>
+					<UserButton />
+				</div>
+			</Authenticated>
+			<Unauthenticated>
+				<SignInButton />
+			</Unauthenticated>
+			<AuthLoading>
+				<div>Loading...</div>
+			</AuthLoading>
+		</>
+	);
+}
+`],
+	["auth/clerk/convex/web/react/tanstack-start/src/routes/dashboard.tsx.hbs", `import { SignInButton, UserButton, useUser } from "@clerk/tanstack-react-start";
+import { api } from "@{{projectName}}/backend/convex/_generated/api";
+import { createFileRoute } from "@tanstack/react-router";
+import {
+	Authenticated,
+	AuthLoading,
+	Unauthenticated,
+	useQuery,
+} from "convex/react";
+
+export const Route = createFileRoute("/dashboard")({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	const privateData = useQuery(api.privateData.get);
+	const user = useUser();
+
+	return (
+		<>
+			<Authenticated>
+				<div>
+					<h1>Dashboard</h1>
+					<p>Welcome {user.user?.fullName}</p>
+					<p>privateData: {privateData?.message}</p>
+					<UserButton />
+				</div>
+			</Authenticated>
+			<Unauthenticated>
+				<SignInButton />
+			</Unauthenticated>
+			<AuthLoading>
+				<div>Loading...</div>
+			</AuthLoading>
+		</>
+	);
+}
+`],
+	["auth/clerk/convex/web/react/tanstack-start/src/start.ts.hbs", `import { clerkMiddleware } from '@clerk/tanstack-react-start/server'
+import { createStart } from '@tanstack/react-start'
+
+export const startInstance = createStart(() => {
+	return {
+		requestMiddleware: [clerkMiddleware()],
+	}
+})`],
+	["auth/clerk/native/base/app/(auth)/_layout.tsx.hbs", `import { Redirect, Stack } from "expo-router";
+import { useAuth } from "@clerk/expo";
+
+export default function AuthRoutesLayout() {
+  const { isLoaded, isSignedIn } = useAuth();
+
+  if (!isLoaded) {
+    return null;
+  }
+
+  if (isSignedIn) {
+    return <Redirect href={"/"} />;
+  }
+
+  return <Stack />;
+}
+`],
+	["auth/clerk/native/base/app/(auth)/sign-in.tsx.hbs", `import { useSignIn } from "@clerk/expo";
+import { type Href, Link, useRouter } from "expo-router";
+import React from "react";
+import { Pressable, StyleSheet, Text, TextInput, View } from "react-native";
+
+function pushDecoratedUrl(router: ReturnType<typeof useRouter>, decorateUrl: (url: string) => string, href: string) {
+  const url = decorateUrl(href);
+  const nextHref = url.startsWith("http") ? new URL(url).pathname : url;
+  router.push(nextHref as Href);
+}
+
+export default function Page() {
+  const { signIn, errors, fetchStatus } = useSignIn();
+  const router = useRouter();
+  const [emailAddress, setEmailAddress] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [code, setCode] = React.useState("");
+  const [statusMessage, setStatusMessage] = React.useState<string | null>(null);
+
+  const emailCodeFactor = signIn.supportedSecondFactors.find(
+    (factor) => factor.strategy === "email_code",
+  );
+  const requiresEmailCode =
+    signIn.status === "needs_client_trust" ||
+    (signIn.status === "needs_second_factor" && !!emailCodeFactor);
+
+  const handleSubmit = async () => {
+    setStatusMessage(null);
+
+    const { error } = await signIn.password({
+      emailAddress,
+      password,
+    });
+
+    if (error) {
+      console.error(JSON.stringify(error, null, 2));
+      setStatusMessage(error.longMessage ?? "Unable to sign in. Please try again.");
+      return;
+    }
+
+    if (signIn.status === "complete") {
+      await signIn.finalize({
+        navigate: ({ session, decorateUrl }) => {
+          if (session?.currentTask) {
+            console.log(session.currentTask);
+            return;
+          }
+
+          pushDecoratedUrl(router, decorateUrl, "/");
+        },
+      });
+    } else if (signIn.status === "needs_second_factor" || signIn.status === "needs_client_trust") {
+      if (emailCodeFactor) {
+        await signIn.mfa.sendEmailCode();
+        setStatusMessage(\`We sent a verification code to \${emailCodeFactor.safeIdentifier}.\`);
+      } else {
+        console.error("Second factor is required, but email_code is not available:", signIn);
+        setStatusMessage("A second factor is required, but this screen only supports email codes right now.");
+      }
+    } else {
+      console.error("Sign-in attempt not complete:", signIn);
+      setStatusMessage("Sign-in could not be completed. Check the logs for more details.");
+    }
+  };
+
+  const handleVerify = async () => {
+    setStatusMessage(null);
+
+    await signIn.mfa.verifyEmailCode({ code });
+
+    if (signIn.status === "complete") {
+      await signIn.finalize({
+        navigate: ({ session, decorateUrl }) => {
+          if (session?.currentTask) {
+            console.log(session.currentTask);
+            return;
+          }
+
+          pushDecoratedUrl(router, decorateUrl, "/");
+        },
+      });
+    } else {
+      console.error("Sign-in attempt not complete:", signIn);
+      setStatusMessage("That code did not complete sign-in. Please try again.");
+    }
+  };
+
+  if (requiresEmailCode) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.title}>Verify your account</Text>
+        {statusMessage && <Text style={styles.helper}>{statusMessage}</Text>}
+        <TextInput
+          style={styles.input}
+          value={code}
+          placeholder="Enter your verification code"
+          placeholderTextColor="#666666"
+          onChangeText={(value) => setCode(value)}
+          keyboardType="numeric"
+        />
+        {errors.fields.code && <Text style={styles.error}>{errors.fields.code.message}</Text>}
+        <Pressable
+          style={({ pressed }) => [
+            styles.button,
+            fetchStatus === "fetching" && styles.buttonDisabled,
+            pressed && styles.buttonPressed,
+          ]}
+          onPress={handleVerify}
+          disabled={fetchStatus === "fetching"}
+        >
+          <Text style={styles.buttonText}>Verify</Text>
+        </Pressable>
+        <Pressable
+          style={({ pressed }) => [styles.secondaryButton, pressed && styles.buttonPressed]}
+          onPress={() => signIn.mfa.sendEmailCode()}
+        >
+          <Text style={styles.secondaryButtonText}>I need a new code</Text>
+        </Pressable>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Sign in</Text>
+      {statusMessage && <Text style={styles.helper}>{statusMessage}</Text>}
+      <Text style={styles.label}>Email address</Text>
+      <TextInput
+        style={styles.input}
+        autoCapitalize="none"
+        value={emailAddress}
+        placeholder="Enter email"
+        placeholderTextColor="#666666"
+        onChangeText={(value) => setEmailAddress(value)}
+        keyboardType="email-address"
+      />
+      {errors.fields.identifier && <Text style={styles.error}>{errors.fields.identifier.message}</Text>}
+      <Text style={styles.label}>Password</Text>
+      <TextInput
+        style={styles.input}
+        value={password}
+        placeholder="Enter password"
+        placeholderTextColor="#666666"
+        secureTextEntry={true}
+        onChangeText={(value) => setPassword(value)}
+      />
+      {errors.fields.password && <Text style={styles.error}>{errors.fields.password.message}</Text>}
+      <Pressable
+        style={({ pressed }) => [
+          styles.button,
+          (!emailAddress || !password || fetchStatus === "fetching") && styles.buttonDisabled,
+          pressed && styles.buttonPressed,
+        ]}
+        onPress={handleSubmit}
+        disabled={!emailAddress || !password || fetchStatus === "fetching"}
+      >
+        <Text style={styles.buttonText}>Sign in</Text>
+      </Pressable>
+      <View style={styles.linkContainer}>
+        <Text>Don't have an account? </Text>
+        <Link href="/sign-up">
+          <Text style={styles.linkText}>Sign up</Text>
+        </Link>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    gap: 12,
+  },
+  title: {
+    marginBottom: 8,
+    fontSize: 24,
+    fontWeight: "700",
+  },
+  label: {
+    fontWeight: "600",
+    fontSize: 14,
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ccc",
+    borderRadius: 8,
+    padding: 12,
+    fontSize: 16,
+    backgroundColor: "#fff",
+  },
+  button: {
+    backgroundColor: "#0a7ea4",
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+    alignItems: "center",
+    marginTop: 8,
+  },
+  buttonPressed: {
+    opacity: 0.7,
+  },
+  buttonDisabled: {
+    opacity: 0.5,
+  },
+  buttonText: {
+    color: "#fff",
+    fontWeight: "600",
+  },
+  secondaryButton: {
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+    alignItems: "center",
+    marginTop: 8,
+  },
+  secondaryButtonText: {
+    color: "#0a7ea4",
+    fontWeight: "600",
+  },
+  linkContainer: {
+    flexDirection: "row",
+    gap: 4,
+    marginTop: 12,
+    alignItems: "center",
+  },
+  linkText: {
+    color: "#0a7ea4",
+    fontWeight: "600",
+  },
+  error: {
+    color: "#d32f2f",
+    fontSize: 12,
+    marginTop: -8,
+  },
+  helper: {
+    color: "#555555",
+    fontSize: 13,
+  },
+});
+`],
+	["auth/clerk/native/base/app/(auth)/sign-up.tsx.hbs", `import { useAuth, useSignUp } from "@clerk/expo";
+import { type Href, Link, useRouter } from "expo-router";
+import React from "react";
+import { Pressable, StyleSheet, Text, TextInput, View } from "react-native";
+
+function pushDecoratedUrl(router: ReturnType<typeof useRouter>, decorateUrl: (url: string) => string, href: string) {
+  const url = decorateUrl(href);
+  const nextHref = url.startsWith("http") ? new URL(url).pathname : url;
+  router.push(nextHref as Href);
+}
+
+export default function Page() {
+  const { signUp, errors, fetchStatus } = useSignUp();
+  const { isSignedIn } = useAuth();
+  const router = useRouter();
+  const [emailAddress, setEmailAddress] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [code, setCode] = React.useState("");
+  const [statusMessage, setStatusMessage] = React.useState<string | null>(null);
+
+  const handleSubmit = async () => {
+    setStatusMessage(null);
+
+    const { error } = await signUp.password({
+      emailAddress,
+      password,
+    });
+
+    if (error) {
+      console.error(JSON.stringify(error, null, 2));
+      setStatusMessage(error.longMessage ?? "Unable to sign up. Please try again.");
+      return;
+    }
+
+    await signUp.verifications.sendEmailCode();
+    setStatusMessage(\`We sent a verification code to \${emailAddress}.\`);
+  };
+
+  const handleVerify = async () => {
+    setStatusMessage(null);
+
+    await signUp.verifications.verifyEmailCode({
+      code,
+    });
+
+    if (signUp.status === "complete") {
+      await signUp.finalize({
+        navigate: ({ session, decorateUrl }) => {
+          if (session?.currentTask) {
+            console.log(session.currentTask);
+            return;
+          }
+
+          pushDecoratedUrl(router, decorateUrl, "/");
+        },
+      });
+    } else {
+      console.error("Sign-up attempt not complete:", signUp);
+      setStatusMessage("That code did not complete sign-up. Please try again.");
+    }
+  };
+
+  if (signUp.status === "complete" || isSignedIn) {
+    return null;
+  }
+
+  if (
+    signUp.status === "missing_requirements" &&
+    signUp.unverifiedFields.includes("email_address") &&
+    signUp.missingFields.length === 0
+  ) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.title}>Verify your account</Text>
+        {statusMessage && <Text style={styles.helper}>{statusMessage}</Text>}
+        <TextInput
+          style={styles.input}
+          value={code}
+          placeholder="Enter your verification code"
+          placeholderTextColor="#666666"
+          onChangeText={(value) => setCode(value)}
+          keyboardType="numeric"
+        />
+        {errors.fields.code && <Text style={styles.error}>{errors.fields.code.message}</Text>}
+        <Pressable
+          style={({ pressed }) => [
+            styles.button,
+            fetchStatus === "fetching" && styles.buttonDisabled,
+            pressed && styles.buttonPressed,
+          ]}
+          onPress={handleVerify}
+          disabled={fetchStatus === "fetching"}
+        >
+          <Text style={styles.buttonText}>Verify</Text>
+        </Pressable>
+        <Pressable
+          style={({ pressed }) => [styles.secondaryButton, pressed && styles.buttonPressed]}
+          onPress={() => signUp.verifications.sendEmailCode()}
+        >
+          <Text style={styles.secondaryButtonText}>I need a new code</Text>
+        </Pressable>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Sign up</Text>
+      {statusMessage && <Text style={styles.helper}>{statusMessage}</Text>}
+      <Text style={styles.label}>Email address</Text>
+      <TextInput
+        style={styles.input}
+        autoCapitalize="none"
+        value={emailAddress}
+        placeholder="Enter email"
+        placeholderTextColor="#666666"
+        onChangeText={(value) => setEmailAddress(value)}
+        keyboardType="email-address"
+      />
+      {errors.fields.emailAddress && (
+        <Text style={styles.error}>{errors.fields.emailAddress.message}</Text>
+      )}
+      <Text style={styles.label}>Password</Text>
+      <TextInput
+        style={styles.input}
+        value={password}
+        placeholder="Enter password"
+        placeholderTextColor="#666666"
+        secureTextEntry={true}
+        onChangeText={(value) => setPassword(value)}
+      />
+      {errors.fields.password && <Text style={styles.error}>{errors.fields.password.message}</Text>}
+      <Pressable
+        style={({ pressed }) => [
+          styles.button,
+          (!emailAddress || !password || fetchStatus === "fetching") && styles.buttonDisabled,
+          pressed && styles.buttonPressed,
+        ]}
+        onPress={handleSubmit}
+        disabled={!emailAddress || !password || fetchStatus === "fetching"}
+      >
+        <Text style={styles.buttonText}>Sign up</Text>
+      </Pressable>
+      <View style={styles.linkContainer}>
+        <Text>Already have an account? </Text>
+        <Link href="/sign-in">
+          <Text style={styles.linkText}>Sign in</Text>
+        </Link>
+      </View>
+      <View nativeID="clerk-captcha" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    gap: 12,
+  },
+  title: {
+    marginBottom: 8,
+    fontSize: 24,
+    fontWeight: "700",
+  },
+  label: {
+    fontWeight: "600",
+    fontSize: 14,
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ccc",
+    borderRadius: 8,
+    padding: 12,
+    fontSize: 16,
+    backgroundColor: "#fff",
+  },
+  button: {
+    backgroundColor: "#0a7ea4",
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+    alignItems: "center",
+    marginTop: 8,
+  },
+  buttonPressed: {
+    opacity: 0.7,
+  },
+  buttonDisabled: {
+    opacity: 0.5,
+  },
+  buttonText: {
+    color: "#fff",
+    fontWeight: "600",
+  },
+  secondaryButton: {
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+    alignItems: "center",
+    marginTop: 8,
+  },
+  secondaryButtonText: {
+    color: "#0a7ea4",
+    fontWeight: "600",
+  },
+  linkContainer: {
+    flexDirection: "row",
+    gap: 4,
+    marginTop: 12,
+    alignItems: "center",
+  },
+  linkText: {
+    color: "#0a7ea4",
+    fontWeight: "600",
+  },
+  error: {
+    color: "#d32f2f",
+    fontSize: 12,
+    marginTop: -8,
+  },
+  helper: {
+    color: "#555555",
+    fontSize: 13,
+  },
+});
+`],
+	["auth/clerk/native/base/components/sign-out-button.tsx.hbs", `import { useClerk } from "@clerk/expo";
+import { useRouter } from "expo-router";
+import { Text, TouchableOpacity } from "react-native";
+
+export const SignOutButton = () => {
+  const { signOut } = useClerk();
+  const router = useRouter();
+
+  const handleSignOut = async () => {
+    try {
+      await signOut();
+      router.replace("/");
+    } catch (err) {
+      console.error(JSON.stringify(err, null, 2));
+    }
+  };
+
+  return (
+    <TouchableOpacity onPress={handleSignOut}>
+      <Text>Sign out</Text>
+    </TouchableOpacity>
+  );
+};
+`],
+	["auth/clerk/native/base/utils/clerk-auth.ts.hbs", `type ClerkTokenGetter = () => Promise<string | null>;
+
+let clerkTokenGetter: ClerkTokenGetter | null = null;
+
+export function setClerkAuthTokenGetter(getToken: ClerkTokenGetter | null) {
+	clerkTokenGetter = getToken;
+}
+
+export async function getClerkAuthToken() {
+	return (await clerkTokenGetter?.()) ?? null;
+}
+`],
+	["auth/clerk/web/react/base/src/utils/clerk-auth.ts.hbs", `type ClerkTokenGetter = () => Promise<string | null>;
+
+let clerkTokenGetter: ClerkTokenGetter | null = null;
+
+export function setClerkAuthTokenGetter(getToken: ClerkTokenGetter | null) {
+	clerkTokenGetter = getToken;
+}
+
+export async function getClerkAuthToken() {
+	return (await clerkTokenGetter?.()) ?? null;
+}
+`],
+	["auth/clerk/web/react/next/src/app/dashboard/page.tsx.hbs", `"use client";
+
+{{#if (eq api "orpc")}}
+import { useQuery } from "@tanstack/react-query";
+import { orpc } from "@/utils/orpc";
+{{/if}}
+{{#if (eq api "trpc")}}
+import { useQuery } from "@tanstack/react-query";
+import { trpc } from "@/utils/trpc";
+{{/if}}
+import { SignInButton, UserButton, useUser } from "@clerk/nextjs";
+
+export default function Dashboard() {
+  const user = useUser();
+  const nameFromParts = [user.user?.firstName, user.user?.lastName].filter(Boolean).join(" ");
+  const displayName =
+    user.user?.fullName ||
+    nameFromParts ||
+    user.user?.username ||
+    user.user?.primaryEmailAddress?.emailAddress ||
+    user.user?.primaryPhoneNumber?.phoneNumber ||
+    "User";
+  {{#if (eq api "orpc")}}
+  const privateData = useQuery({
+    ...orpc.privateData.queryOptions(),
+    enabled: user.isLoaded && !!user.user,
+  });
+  {{/if}}
+  {{#if (eq api "trpc")}}
+  const privateData = useQuery({
+    ...trpc.privateData.queryOptions(),
+    enabled: user.isLoaded && !!user.user,
+  });
+  {{/if}}
+
+  if (!user.isLoaded) {
+    return <div className="p-6">Loading...</div>;
+  }
 
-export default function Dashboard() {
-  const user = useUser();
-  const privateData = useQuery(api.privateData.get);
+  if (!user.user) {
+    return (
+      <div className="p-6">
+        <SignInButton />
+      </div>
+    );
+  }
 
   return (
-    <>
-      <Authenticated>
-        <div>
-          <h1>Dashboard</h1>
-          <p>Welcome {user.user?.fullName}</p>
-          <p>privateData: {privateData?.message}</p>
-          <UserButton />
-        </div>
-      </Authenticated>
-      <Unauthenticated>
-        <SignInButton />
-      </Unauthenticated>
-      <AuthLoading>
-        <div>Loading...</div>
-      </AuthLoading>
-    </>
+    <div className="space-y-4 p-6">
+      <h1 className="text-2xl font-semibold">Dashboard</h1>
+      <p>Welcome {displayName}</p>
+      {{#if (or (eq api "orpc") (eq api "trpc"))}}
+      <p>API: {privateData.data?.message}</p>
+      {{/if}}
+      <UserButton />
+    </div>
   );
 }
 `],
-	["auth/clerk/convex/web/react/next/src/middleware.ts.hbs", `import { clerkMiddleware } from "@clerk/nextjs/server";
+	["auth/clerk/web/react/next/src/proxy.ts.hbs", `import { clerkMiddleware } from "@clerk/nextjs/server";
 
 export default clerkMiddleware();
 
@@ -14711,123 +16162,197 @@ export const config = {
 	],
 };
 `],
-	["auth/clerk/convex/web/react/react-router/src/routes/dashboard.tsx.hbs", `import { SignInButton, UserButton, useUser } from "@clerk/clerk-react";
-import { api } from "@{{projectName}}/backend/convex/_generated/api";
-import {
-	Authenticated,
-	AuthLoading,
-	Unauthenticated,
-	useQuery,
-} from "convex/react";
+	["auth/clerk/web/react/react-router/src/routes/dashboard.tsx.hbs", `{{#if (eq api "orpc")}}
+import { useQuery } from "@tanstack/react-query";
+import { orpc } from "@/utils/orpc";
+{{/if}}
+{{#if (eq api "trpc")}}
+import { useQuery } from "@tanstack/react-query";
+import { trpc } from "@/utils/trpc";
+{{/if}}
+import { SignInButton, UserButton, useUser } from "@clerk/react-router";
 
 export default function Dashboard() {
-	const privateData = useQuery(api.privateData.get);
-	const user = useUser();
+  const user = useUser();
+  const nameFromParts = [user.user?.firstName, user.user?.lastName].filter(Boolean).join(" ");
+  const displayName =
+    user.user?.fullName ||
+    nameFromParts ||
+    user.user?.username ||
+    user.user?.primaryEmailAddress?.emailAddress ||
+    user.user?.primaryPhoneNumber?.phoneNumber ||
+    "User";
+  {{#if (eq api "orpc")}}
+  const privateData = useQuery({
+    ...orpc.privateData.queryOptions(),
+    enabled: user.isLoaded && !!user.user,
+  });
+  {{/if}}
+  {{#if (eq api "trpc")}}
+  const privateData = useQuery({
+    ...trpc.privateData.queryOptions(),
+    enabled: user.isLoaded && !!user.user,
+  });
+  {{/if}}
 
-	return (
-		<>
-			<Authenticated>
-				<div>
-					<h1>Dashboard</h1>
-					<p>Welcome {user.user?.fullName}</p>
-					<p>privateData: {privateData?.message}</p>
-					<UserButton />
-				</div>
-			</Authenticated>
-			<Unauthenticated>
-				<SignInButton />
-			</Unauthenticated>
-			<AuthLoading>
-				<div>Loading...</div>
-			</AuthLoading>
-		</>
-	);
+  if (!user.isLoaded) {
+    return <div className="p-6">Loading...</div>;
+  }
+
+  if (!user.user) {
+    return (
+      <div className="p-6">
+        <SignInButton />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4 p-6">
+      <h1 className="text-2xl font-semibold">Dashboard</h1>
+      <p>Welcome {displayName}</p>
+      {{#if (or (eq api "orpc") (eq api "trpc"))}}
+      <p>API: {privateData.data?.message}</p>
+      {{/if}}
+      <UserButton />
+    </div>
+  );
 }
 `],
-	["auth/clerk/convex/web/react/tanstack-router/src/routes/dashboard.tsx.hbs", `import { SignInButton, UserButton, useUser } from "@clerk/clerk-react";
-import { api } from "@{{projectName}}/backend/convex/_generated/api";
+	["auth/clerk/web/react/tanstack-router/src/routes/dashboard.tsx.hbs", `{{#if (eq api "orpc")}}
+import { useQuery } from "@tanstack/react-query";
+import { orpc } from "@/utils/orpc";
+{{/if}}
+{{#if (eq api "trpc")}}
+import { useQuery } from "@tanstack/react-query";
+import { trpc } from "@/utils/trpc";
+{{/if}}
+import { SignInButton, UserButton, useUser } from "@clerk/react";
 import { createFileRoute } from "@tanstack/react-router";
-import {
-	Authenticated,
-	AuthLoading,
-	Unauthenticated,
-	useQuery,
-} from "convex/react";
 
 export const Route = createFileRoute("/dashboard")({
 	component: RouteComponent,
 });
 
 function RouteComponent() {
-	const privateData = useQuery(api.privateData.get);
-	const user = useUser()
+	const user = useUser();
+	const nameFromParts = [user.user?.firstName, user.user?.lastName].filter(Boolean).join(" ");
+	const displayName =
+		user.user?.fullName ||
+		nameFromParts ||
+		user.user?.username ||
+		user.user?.primaryEmailAddress?.emailAddress ||
+		user.user?.primaryPhoneNumber?.phoneNumber ||
+		"User";
+	{{#if (eq api "orpc")}}
+	const privateData = useQuery({
+		...orpc.privateData.queryOptions(),
+		enabled: user.isLoaded && !!user.user,
+	});
+	{{/if}}
+	{{#if (eq api "trpc")}}
+	const privateData = useQuery({
+		...trpc.privateData.queryOptions(),
+		enabled: user.isLoaded && !!user.user,
+	});
+	{{/if}}
 
-	return (
-		<>
-			<Authenticated>
-				<div>
-					<h1>Dashboard</h1>
-					<p>Welcome {user.user?.fullName}</p>
-					<p>privateData: {privateData?.message}</p>
-					<UserButton />
-				</div>
-			</Authenticated>
-			<Unauthenticated>
+	if (!user.isLoaded) {
+		return <div className="p-6">Loading...</div>;
+	}
+
+	if (!user.user) {
+		return (
+			<div className="p-6">
 				<SignInButton />
-			</Unauthenticated>
-			<AuthLoading>
-				<div>Loading...</div>
-			</AuthLoading>
-		</>
+			</div>
+		);
+	}
+
+	return (
+		<div className="space-y-4 p-6">
+			<h1 className="text-2xl font-semibold">Dashboard</h1>
+			<p>Welcome {displayName}</p>
+			{{#if (or (eq api "orpc") (eq api "trpc"))}}
+			<p>API: {privateData.data?.message}</p>
+			{{/if}}
+			<UserButton />
+		</div>
 	);
 }
 `],
-	["auth/clerk/convex/web/react/tanstack-start/src/routes/dashboard.tsx.hbs", `import { SignInButton, UserButton, useUser } from "@clerk/tanstack-react-start";
-import { api } from "@{{projectName}}/backend/convex/_generated/api";
+	["auth/clerk/web/react/tanstack-start/src/routes/dashboard.tsx.hbs", `{{#if (eq api "trpc")}}
+import { useTRPC } from "@/utils/trpc";
+import { useQuery } from "@tanstack/react-query";
+{{/if}}
+{{#if (eq api "orpc")}}
+import { useQuery } from "@tanstack/react-query";
+import { orpc } from "@/utils/orpc";
+{{/if}}
+import { SignInButton, UserButton, useUser } from "@clerk/tanstack-react-start";
 import { createFileRoute } from "@tanstack/react-router";
-import {
-	Authenticated,
-	AuthLoading,
-	Unauthenticated,
-	useQuery,
-} from "convex/react";
 
 export const Route = createFileRoute("/dashboard")({
 	component: RouteComponent,
 });
 
 function RouteComponent() {
-	const privateData = useQuery(api.privateData.get);
 	const user = useUser();
+	const nameFromParts = [user.user?.firstName, user.user?.lastName].filter(Boolean).join(" ");
+	const displayName =
+		user.user?.fullName ||
+		nameFromParts ||
+		user.user?.username ||
+		user.user?.primaryEmailAddress?.emailAddress ||
+		user.user?.primaryPhoneNumber?.phoneNumber ||
+		"User";
+	{{#if (eq api "trpc")}}
+	const trpc = useTRPC();
+	const privateData = useQuery({
+		...trpc.privateData.queryOptions(),
+		enabled: user.isLoaded && !!user.user,
+	});
+	{{/if}}
+	{{#if (eq api "orpc")}}
+	const privateData = useQuery({
+		...orpc.privateData.queryOptions(),
+		enabled: user.isLoaded && !!user.user,
+	});
+	{{/if}}
 
-	return (
-		<>
-			<Authenticated>
-				<div>
-					<h1>Dashboard</h1>
-					<p>Welcome {user.user?.fullName}</p>
-					<p>privateData: {privateData?.message}</p>
-					<UserButton />
-				</div>
-			</Authenticated>
-			<Unauthenticated>
+	if (!user.isLoaded) {
+		return <div className="p-6">Loading...</div>;
+	}
+
+	if (!user.user) {
+		return (
+			<div className="p-6">
 				<SignInButton />
-			</Unauthenticated>
-			<AuthLoading>
-				<div>Loading...</div>
-			</AuthLoading>
-		</>
+			</div>
+		);
+	}
+
+	return (
+		<div className="space-y-4 p-6">
+			<h1 className="text-2xl font-semibold">Dashboard</h1>
+			<p>Welcome {displayName}</p>
+			{{#if (or (eq api "orpc") (eq api "trpc"))}}
+			<p>API: {privateData.data?.message}</p>
+			{{/if}}
+			<UserButton />
+		</div>
 	);
 }
 `],
-	["auth/clerk/convex/web/react/tanstack-start/src/start.ts.hbs", `import { clerkMiddleware } from '@clerk/tanstack-react-start/server'
+	["auth/clerk/web/react/tanstack-start/src/start.ts.hbs", `import { clerkMiddleware } from '@clerk/tanstack-react-start/server'
 import { createStart } from '@tanstack/react-start'
 
 export const startInstance = createStart(() => {
 	return {
 		requestMiddleware: [clerkMiddleware()],
 	}
-})`],
+})
+`],
 	["backend/convex/packages/backend/_gitignore", `
 .env.local
 `],
@@ -15158,8 +16683,10 @@ const app = new Elysia()
 		cors({
 			origin: env.CORS_ORIGIN,
 			methods: ["GET", "POST", "OPTIONS"],
-{{#if (eq auth "better-auth")}}
+{{#if (or (eq auth "better-auth") (eq auth "clerk"))}}
 			allowedHeaders: ["Content-Type", "Authorization"],
+{{/if}}
+{{#if (eq auth "better-auth")}}
 			credentials: true,
 {{/if}}
 		}),
@@ -15246,7 +16773,7 @@ import { ZodToJsonSchemaConverter } from "@orpc/zod/zod4";
 import { RPCHandler } from "@orpc/server/node";
 import { onError } from "@orpc/server";
 import { appRouter } from "@{{projectName}}/api/routers/index";
-{{#if (eq auth "better-auth")}}
+{{#if (or (eq auth "better-auth") (eq auth "clerk"))}}
 import { createContext } from "@{{projectName}}/api/context";
 {{/if}}
 {{/if}}
@@ -15261,6 +16788,9 @@ import { devToolsMiddleware } from "@ai-sdk/devtools";
 import { auth } from "@{{projectName}}/auth";
 import { toNodeHandler } from "better-auth/node";
 {{/if}}
+{{#if (eq auth "clerk")}}
+import { clerkMiddleware } from "@clerk/express";
+{{/if}}
 
 const app = express();
 
@@ -15268,13 +16798,19 @@ app.use(
 	cors({
 		origin: env.CORS_ORIGIN,
 		methods: ["GET", "POST", "OPTIONS"],
-{{#if (eq auth "better-auth")}}
+{{#if (or (eq auth "better-auth") (eq auth "clerk"))}}
 		allowedHeaders: ["Content-Type", "Authorization"],
+{{/if}}
+{{#if (eq auth "better-auth")}}
 		credentials: true,
 {{/if}}
 	})
 );
 
+{{#if (eq auth "clerk")}}
+app.use(clerkMiddleware());
+{{/if}}
+
 {{#if (eq auth "better-auth")}}
 app.all("/api/auth{/*path}", toNodeHandler(auth));
 {{/if}}
@@ -15313,7 +16849,7 @@ const apiHandler = new OpenAPIHandler(appRouter, {
 app.use(async (req, res, next) => {
 	const rpcResult = await rpcHandler.handle(req, res, {
 		prefix: "/rpc",
-{{#if (eq auth "better-auth")}}
+{{#if (or (eq auth "better-auth") (eq auth "clerk"))}}
 		context: await createContext({ req }),
 {{else}}
 		context: {},
@@ -15323,7 +16859,7 @@ app.use(async (req, res, next) => {
 
 	const apiResult = await apiHandler.handle(req, res, {
 		prefix: "/api-reference",
-{{#if (eq auth "better-auth")}}
+{{#if (or (eq auth "better-auth") (eq auth "clerk"))}}
 		context: await createContext({ req }),
 {{else}}
 		context: {},
@@ -15389,6 +16925,9 @@ import { devToolsMiddleware } from "@ai-sdk/devtools";
 {{#if (eq auth "better-auth")}}
 import { auth } from "@{{projectName}}/auth";
 {{/if}}
+{{#if (eq auth "clerk")}}
+import { clerkPlugin } from "@clerk/fastify";
+{{/if}}
 
 const baseCorsConfig = {
 	origin: env.CORS_ORIGIN,
@@ -15434,6 +16973,9 @@ const fastify = Fastify({
 {{/if}}
 
 fastify.register(fastifyCors, baseCorsConfig);
+{{#if (eq auth "clerk")}}
+fastify.register(clerkPlugin);
+{{/if}}
 
 {{#if (eq api "orpc")}}
 fastify.register(async (rpcApp) => {
@@ -15444,7 +16986,7 @@ fastify.register(async (rpcApp) => {
 
 	rpcApp.all("/rpc/*", async (request, reply) => {
 		const { matched } = await rpcHandler.handle(request, reply, {
-			context: await createContext(request.headers),
+			context: await createContext({{#if (eq auth "clerk")}}request{{else}}request.headers{{/if}}),
 			prefix: "/rpc",
 		});
 
@@ -15455,7 +16997,7 @@ fastify.register(async (rpcApp) => {
 
 	rpcApp.all("/api-reference/*", async (request, reply) => {
 		const { matched } = await apiHandler.handle(request, reply, {
-			context: await createContext(request.headers),
+			context: await createContext({{#if (eq auth "clerk")}}request{{else}}request.headers{{/if}}),
 			prefix: "/api-reference",
 		});
 
@@ -15583,8 +17125,10 @@ app.use(
 	cors({
 		origin: env.CORS_ORIGIN,
 		allowMethods: ["GET", "POST", "OPTIONS"],
-{{#if (eq auth "better-auth")}}
+{{#if (or (eq auth "better-auth") (eq auth "clerk"))}}
 		allowHeaders: ["Content-Type", "Authorization"],
+{{/if}}
+{{#if (eq auth "better-auth")}}
 		credentials: true,
 {{/if}}
 	})
@@ -21374,7 +22918,7 @@ import {
 import { Checkbox } from "@{{projectName}}/ui/components/checkbox";
 import { Input } from "@{{projectName}}/ui/components/input";
 import { Loader2, Trash2 } from "lucide-react";
-import { useState } from "react";
+import { useState, type FormEvent } from "react";
 
 {{#if (eq backend "convex")}}
 import { useMutation, useQuery } from "convex/react";
@@ -21400,7 +22944,7 @@ export default function TodosPage() {
   const toggleTodoMutation = useMutation(api.todos.toggle);
   const deleteTodoMutation = useMutation(api.todos.deleteTodo);
 
-  const handleAddTodo = async (e) => {
+  const handleAddTodo = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const text = newTodoText.trim();
     if (!text) return;
@@ -21459,7 +23003,7 @@ export default function TodosPage() {
     );
     {{/if}}
 
-  const handleAddTodo = (e) => {
+  const handleAddTodo = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (newTodoText.trim()) {
       createMutation.mutate({ text: newTodoText });
@@ -21618,7 +23162,7 @@ import {
 import { Checkbox } from "@{{projectName}}/ui/components/checkbox";
 import { Input } from "@{{projectName}}/ui/components/input";
 import { Loader2, Trash2 } from "lucide-react";
-import { useState } from "react";
+import { useState, type FormEvent } from "react";
 
 {{#if (eq backend "convex")}}
 import { useMutation, useQuery } from "convex/react";
@@ -21643,7 +23187,7 @@ export default function Todos() {
   const toggleTodo = useMutation(api.todos.toggle);
   const deleteTodo = useMutation(api.todos.deleteTodo);
 
-  const handleAddTodo = async (e) => {
+  const handleAddTodo = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const text = newTodoText.trim();
     if (!text) return;
@@ -21702,7 +23246,7 @@ export default function Todos() {
     );
     {{/if}}
 
-  const handleAddTodo = (e) => {
+  const handleAddTodo = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (newTodoText.trim()) {
       createMutation.mutate({ text: newTodoText });
@@ -21862,7 +23406,7 @@ import { Checkbox } from "@{{projectName}}/ui/components/checkbox";
 import { Input } from "@{{projectName}}/ui/components/input";
 import { createFileRoute } from "@tanstack/react-router";
 import { Loader2, Trash2 } from "lucide-react";
-import { useState } from "react";
+import { useState, type FormEvent } from "react";
 
 {{#if (eq backend "convex")}}
 import { useMutation, useQuery } from "convex/react";
@@ -21891,7 +23435,7 @@ function TodosRoute() {
   const toggleTodo = useMutation(api.todos.toggle);
   const deleteTodo = useMutation(api.todos.deleteTodo);
 
-  const handleAddTodo = async (e) => {
+  const handleAddTodo = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const text = newTodoText.trim();
     if (!text) return;
@@ -21950,7 +23494,7 @@ function TodosRoute() {
     );
     {{/if}}
 
-  const handleAddTodo = (e) => {
+  const handleAddTodo = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (newTodoText.trim()) {
       createMutation.mutate({ text: newTodoText });
@@ -22114,7 +23658,7 @@ import { Trash2 } from "lucide-react";
 {{else}}
 import { Loader2, Trash2 } from "lucide-react";
 {{/if}}
-import { useState } from "react";
+import { useState, type FormEvent } from "react";
 
 {{#if (eq backend "convex")}}
 import { useSuspenseQuery } from "@tanstack/react-query";
@@ -22147,7 +23691,7 @@ function TodosRoute() {
   const toggleTodo = useMutation(api.todos.toggle);
   const removeTodo = useMutation(api.todos.deleteTodo);
 
-  const handleAddTodo = async (e) => {
+  const handleAddTodo = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const text = newTodoText.trim();
     if (text) {
@@ -22226,7 +23770,7 @@ function TodosRoute() {
   );
     {{/if}}
 
-  const handleAddTodo = (e) => {
+  const handleAddTodo = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (newTodoText.trim()) {
       createMutation.mutate({ text: newTodoText });
@@ -23193,6 +24737,15 @@ web-build/
 	["frontend/native/bare/app/_layout.tsx.hbs", `{{#if (includes examples "ai")}}
 import "@/polyfills";
 {{/if}}
+{{#if (and (eq auth "clerk") (ne api "none") (ne backend "convex"))}}
+import { useEffect } from "react";
+import { setClerkAuthTokenGetter } from "@/utils/clerk-auth";
+{{/if}}
+{{#if (and (ne backend "convex") (eq auth "clerk"))}}
+import { ClerkProvider{{#unless (eq api "none")}}, useAuth{{/unless}} } from "@clerk/expo";
+import { tokenCache } from "@clerk/expo/token-cache";
+import { env } from "@{{projectName}}/env/native";
+{{/if}}
 
 {{#if (eq backend "convex")}}
   {{#if (eq auth "better-auth")}}
@@ -23205,9 +24758,9 @@ import "@/polyfills";
     import { env } from "@{{projectName}}/env/native";
   {{/if}}
   {{#if (eq auth "clerk")}}
-    import { ClerkProvider, useAuth } from "@clerk/clerk-expo";
+    import { ClerkProvider, useAuth } from "@clerk/expo";
     import { ConvexProviderWithClerk } from "convex/react-clerk";
-    import { tokenCache } from "@clerk/clerk-expo/token-cache";
+    import { tokenCache } from "@clerk/expo/token-cache";
   {{/if}}
 {{else}}
   {{#unless (eq api "none")}}
@@ -23259,6 +24812,22 @@ const styles = StyleSheet.create({
   },
 });
 
+{{#if (and (eq auth "clerk") (ne api "none") (ne backend "convex"))}}
+function ClerkApiAuthBridge() {
+  const { getToken } = useAuth();
+
+  useEffect(() => {
+    setClerkAuthTokenGetter(getToken);
+
+    return () => {
+      setClerkAuthTokenGetter(null);
+    };
+  }, [getToken]);
+
+  return null;
+}
+{{/if}}
+
 export default function RootLayout() {
   const { isDarkColorScheme } = useColorScheme();
 
@@ -23303,32 +24872,63 @@ export default function RootLayout() {
                 </Stack>
               </GestureHandlerRootView>
             </ThemeProvider>
-          </ConvexProvider>
+          </ConvexProvider>
+        {{/if}}
+      {{else}}
+        {{#if (eq auth "clerk")}}
+          <ClerkProvider tokenCache={tokenCache} publishableKey={env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY}>
+            {{#unless (eq api "none")}}
+              <ClerkApiAuthBridge />
+              <QueryClientProvider client={queryClient}>
+                <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
+                  <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
+                  <GestureHandlerRootView style={styles.container}>
+                    <Stack>
+                      <Stack.Screen name="(drawer)" options=\\{{ headerShown: false }} />
+                      <Stack.Screen name="(auth)" options=\\{{ headerShown: false }} />
+                      <Stack.Screen name="modal" options=\\{{ title: "Modal", presentation: "modal" }} />
+                    </Stack>
+                  </GestureHandlerRootView>
+                </ThemeProvider>
+              </QueryClientProvider>
+            {{else}}
+              <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
+                <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
+                <GestureHandlerRootView style={styles.container}>
+                  <Stack>
+                    <Stack.Screen name="(drawer)" options=\\{{ headerShown: false }} />
+                    <Stack.Screen name="(auth)" options=\\{{ headerShown: false }} />
+                    <Stack.Screen name="modal" options=\\{{ title: "Modal", presentation: "modal" }} />
+                  </Stack>
+                </GestureHandlerRootView>
+              </ThemeProvider>
+            {{/unless}}
+          </ClerkProvider>
+        {{else}}
+          {{#unless (eq api "none")}}
+            <QueryClientProvider client={queryClient}>
+              <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
+                <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
+                <GestureHandlerRootView style={styles.container}>
+                  <Stack>
+                    <Stack.Screen name="(drawer)" options=\\{{ headerShown: false }} />
+                    <Stack.Screen name="modal" options=\\{{ title: "Modal", presentation: "modal" }} />
+                  </Stack>
+                </GestureHandlerRootView>
+              </ThemeProvider>
+            </QueryClientProvider>
+          {{else}}
+            <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
+              <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
+              <GestureHandlerRootView style={styles.container}>
+                <Stack>
+                  <Stack.Screen name="(drawer)" options=\\{{ headerShown: false }} />
+                  <Stack.Screen name="modal" options=\\{{ title: "Modal", presentation: "modal" }} />
+                </Stack>
+              </GestureHandlerRootView>
+            </ThemeProvider>
+          {{/unless}}
         {{/if}}
-      {{else}}
-        {{#unless (eq api "none")}}
-          <QueryClientProvider client={queryClient}>
-            <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
-              <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
-              <GestureHandlerRootView style={styles.container}>
-                <Stack>
-                  <Stack.Screen name="(drawer)" options=\\{{ headerShown: false }} />
-                  <Stack.Screen name="modal" options=\\{{ title: "Modal", presentation: "modal" }} />
-                </Stack>
-              </GestureHandlerRootView>
-            </ThemeProvider>
-          </QueryClientProvider>
-        {{else}}
-          <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
-            <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
-            <GestureHandlerRootView style={styles.container}>
-              <Stack>
-                <Stack.Screen name="(drawer)" options=\\{{ headerShown: false }} />
-                <Stack.Screen name="modal" options=\\{{ title: "Modal", presentation: "modal" }} />
-              </Stack>
-            </GestureHandlerRootView>
-          </ThemeProvider>
-        {{/unless}}
       {{/if}}
     </>
   );
@@ -23571,7 +25171,11 @@ import { trpc } from "@/utils/trpc";
 import { Link } from "expo-router";
 import { Authenticated, AuthLoading, Unauthenticated, useQuery } from "convex/react";
 import { api } from "@{{ projectName }}/backend/convex/_generated/api";
-import { useUser } from "@clerk/clerk-expo";
+import { useUser } from "@clerk/expo";
+import { SignOutButton } from "@/components/sign-out-button";
+{{else if (and (ne backend "convex") (eq auth "clerk"))}}
+import { Link } from "expo-router";
+import { useAuth, useUser } from "@clerk/expo";
 import { SignOutButton } from "@/components/sign-out-button";
 {{else if (and (eq backend "convex") (eq auth "better-auth"))}}
 import { useConvexAuth, useQuery } from "convex/react";
@@ -23597,6 +25201,9 @@ const healthCheck = useQuery(trpc.healthCheck.queryOptions());
 const { user } = useUser();
 const healthCheck = useQuery(api.healthCheck.get);
 const privateData = useQuery(api.privateData.get);
+{{else if (and (ne backend "convex") (eq auth "clerk"))}}
+const { isLoaded, isSignedIn } = useAuth();
+const { user } = useUser();
 {{else if (and (eq backend "convex") (eq auth "better-auth"))}}
 const healthCheck = useQuery(api.healthCheck.get);
 const { isAuthenticated } = useConvexAuth();
@@ -23672,6 +25279,33 @@ return (
       </AuthLoading>
       {{/if}}
 
+      {{#if (and (ne backend "convex") (eq auth "clerk"))}}
+      {!isLoaded ? (
+      <Text style=\\{{ color: theme.text }}>Loading...</Text>
+      ) : isSignedIn ? (
+      <View style={[styles.userCard, { backgroundColor: theme.card, borderColor: theme.border }]}>
+        <View style={styles.userHeader}>
+          <Text style={[styles.userText, { color: theme.text }]}>
+            Welcome, <Text style={styles.userName}>{user?.fullName ?? user?.firstName ?? "there"}</Text>
+          </Text>
+        </View>
+        <Text style={[styles.userEmail, { color: theme.text, opacity: 0.7 }]}>
+          {user?.emailAddresses[0]?.emailAddress}
+        </Text>
+        <SignOutButton />
+      </View>
+      ) : (
+      <View style={[styles.card, { backgroundColor: theme.card, borderColor: theme.border }]}>
+        <Link href="/(auth)/sign-in">
+          <Text style=\\{{ color: theme.primary }}>Sign in</Text>
+        </Link>
+        <Link href="/(auth)/sign-up">
+          <Text style=\\{{ color: theme.primary }}>Sign up</Text>
+        </Link>
+      </View>
+      )}
+      {{/if}}
+
       {{#if (and (eq backend "convex") (eq auth "better-auth"))}}
       {user ? (
       <View style={[styles.userCard, { backgroundColor: theme.card, borderColor: theme.border }]}>
@@ -23788,7 +25422,8 @@ statusCardTitle: {
 marginBottom: 8,
 fontWeight: "bold",
 },
-});`],
+});
+`],
 	["frontend/native/bare/app/+not-found.tsx.hbs", `import { Container } from "@/components/container";
 import { Link, Stack } from "expo-router";
 import { Text, View, StyleSheet } from "react-native";
@@ -24169,6 +25804,15 @@ android
 	["frontend/native/unistyles/app/_layout.tsx.hbs", `{{#if (includes examples "ai")}}
 import "@/polyfills";
 {{/if}}
+{{#if (and (eq auth "clerk") (ne api "none") (ne backend "convex"))}}
+import { useEffect } from "react";
+import { setClerkAuthTokenGetter } from "@/utils/clerk-auth";
+{{/if}}
+{{#if (and (ne backend "convex") (eq auth "clerk"))}}
+import { ClerkProvider{{#unless (eq api "none")}}, useAuth{{/unless}} } from "@clerk/expo";
+import { tokenCache } from "@clerk/expo/token-cache";
+import { env } from "@{{projectName}}/env/native";
+{{/if}}
 {{#if (eq api "trpc")}}
 import { queryClient } from "@/utils/trpc";
 {{/if}}
@@ -24186,9 +25830,9 @@ import { ConvexProvider, ConvexReactClient } from "convex/react";
 import { env } from "@{{projectName}}/env/native";
 {{/if}}
 {{#if (eq auth "clerk")}}
-import { ClerkProvider, useAuth } from "@clerk/clerk-expo";
+import { ClerkProvider, useAuth } from "@clerk/expo";
 import { ConvexProviderWithClerk } from "convex/react-clerk";
-import { tokenCache } from "@clerk/clerk-expo/token-cache";
+import { tokenCache } from "@clerk/expo/token-cache";
 {{/if}}
 {{else}}
   {{#unless (eq api "none")}}
@@ -24210,6 +25854,22 @@ const convex = new ConvexReactClient(env.EXPO_PUBLIC_CONVEX_URL, {
 });
 {{/if}}
 
+{{#if (and (eq auth "clerk") (ne api "none") (ne backend "convex"))}}
+function ClerkApiAuthBridge() {
+  const { getToken } = useAuth();
+
+  useEffect(() => {
+    setClerkAuthTokenGetter(getToken);
+
+    return () => {
+      setClerkAuthTokenGetter(null);
+    };
+  }, [getToken]);
+
+  return null;
+}
+{{/if}}
+
 export default function RootLayout() {
   const { theme } = useUnistyles();
 
@@ -24289,49 +25949,103 @@ export default function RootLayout() {
     </ConvexProvider>
     {{/if}}
     {{else}}
-      {{#unless (eq api "none")}}
-    <QueryClientProvider client={queryClient}>
-      <GestureHandlerRootView style=\\{{ flex: 1 }}>
-        <Stack
-          screenOptions=\\{{
-            headerStyle: {
-              backgroundColor: theme.colors.background,
-            },
-            headerTitleStyle: {
-              color: theme.colors.foreground,
-            },
-            headerTintColor: theme.colors.foreground,
-          }}
-        >
-          <Stack.Screen name="(drawer)" options=\\{{ headerShown: false }} />
-          <Stack.Screen
-            name="modal"
-            options=\\{{ title: "Modal", presentation: "modal" }}
-          />
-        </Stack>
-      </GestureHandlerRootView>
-    </QueryClientProvider>
+      {{#if (eq auth "clerk")}}
+      <ClerkProvider
+        tokenCache={tokenCache}
+        publishableKey={env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY}
+      >
+        {{#unless (eq api "none")}}
+        <ClerkApiAuthBridge />
+        <QueryClientProvider client={queryClient}>
+          <GestureHandlerRootView style=\\{{ flex: 1 }}>
+            <Stack
+              screenOptions=\\{{
+                headerStyle: {
+                  backgroundColor: theme.colors.background,
+                },
+                headerTitleStyle: {
+                  color: theme.colors.foreground,
+                },
+                headerTintColor: theme.colors.foreground,
+              }}
+            >
+              <Stack.Screen name="(drawer)" options=\\{{ headerShown: false }} />
+              <Stack.Screen name="(auth)" options=\\{{ headerShown: false }} />
+              <Stack.Screen
+                name="modal"
+                options=\\{{ title: "Modal", presentation: "modal" }}
+              />
+            </Stack>
+          </GestureHandlerRootView>
+        </QueryClientProvider>
+        {{else}}
+        <GestureHandlerRootView style=\\{{ flex: 1 }}>
+          <Stack
+            screenOptions=\\{{
+              headerStyle: {
+                backgroundColor: theme.colors.background,
+              },
+              headerTitleStyle: {
+                color: theme.colors.foreground,
+              },
+              headerTintColor: theme.colors.foreground,
+            }}
+          >
+            <Stack.Screen name="(drawer)" options=\\{{ headerShown: false }} />
+            <Stack.Screen name="(auth)" options=\\{{ headerShown: false }} />
+            <Stack.Screen
+              name="modal"
+              options=\\{{ title: "Modal", presentation: "modal" }}
+            />
+          </Stack>
+        </GestureHandlerRootView>
+        {{/unless}}
+      </ClerkProvider>
       {{else}}
-      <GestureHandlerRootView style=\\{{ flex: 1 }}>
-        <Stack
-          screenOptions=\\{{
-            headerStyle: {
-              backgroundColor: theme.colors.background,
-            },
-            headerTitleStyle: {
-              color: theme.colors.foreground,
-            },
-            headerTintColor: theme.colors.foreground,
-          }}
-        >
-          <Stack.Screen name="(drawer)" options=\\{{ headerShown: false }} />
-          <Stack.Screen
-            name="modal"
-            options=\\{{ title: "Modal", presentation: "modal" }}
-          />
-        </Stack>
-      </GestureHandlerRootView>
-      {{/unless}}
+        {{#unless (eq api "none")}}
+      <QueryClientProvider client={queryClient}>
+        <GestureHandlerRootView style=\\{{ flex: 1 }}>
+          <Stack
+            screenOptions=\\{{
+              headerStyle: {
+                backgroundColor: theme.colors.background,
+              },
+              headerTitleStyle: {
+                color: theme.colors.foreground,
+              },
+              headerTintColor: theme.colors.foreground,
+            }}
+          >
+            <Stack.Screen name="(drawer)" options=\\{{ headerShown: false }} />
+            <Stack.Screen
+              name="modal"
+              options=\\{{ title: "Modal", presentation: "modal" }}
+            />
+          </Stack>
+        </GestureHandlerRootView>
+      </QueryClientProvider>
+        {{else}}
+        <GestureHandlerRootView style=\\{{ flex: 1 }}>
+          <Stack
+            screenOptions=\\{{
+              headerStyle: {
+                backgroundColor: theme.colors.background,
+              },
+              headerTitleStyle: {
+                color: theme.colors.foreground,
+              },
+              headerTintColor: theme.colors.foreground,
+            }}
+          >
+            <Stack.Screen name="(drawer)" options=\\{{ headerShown: false }} />
+            <Stack.Screen
+              name="modal"
+              options=\\{{ title: "Modal", presentation: "modal" }}
+            />
+          </Stack>
+        </GestureHandlerRootView>
+        {{/unless}}
+      {{/if}}
     {{/if}}
   );
 }
@@ -24556,7 +26270,11 @@ import { trpc } from "@/utils/trpc";
 import { Link } from "expo-router";
 import { Authenticated, AuthLoading, Unauthenticated, useQuery } from "convex/react";
 import { api } from "@{{ projectName }}/backend/convex/_generated/api";
-import { useUser } from "@clerk/clerk-expo";
+import { useUser } from "@clerk/expo";
+import { SignOutButton } from "@/components/sign-out-button";
+{{else if (and (ne backend "convex") (eq auth "clerk"))}}
+import { Link } from "expo-router";
+import { useAuth, useUser } from "@clerk/expo";
 import { SignOutButton } from "@/components/sign-out-button";
 {{else if (and (eq backend "convex") (eq auth "better-auth"))}}
 import { useConvexAuth, useQuery } from "convex/react";
@@ -24580,6 +26298,9 @@ export default function Home() {
   const { user } = useUser();
   const healthCheck = useQuery(api.healthCheck.get);
   const privateData = useQuery(api.privateData.get);
+  {{else if (and (ne backend "convex") (eq auth "clerk"))}}
+  const { isLoaded, isSignedIn } = useAuth();
+  const { user } = useUser();
   {{else if (and (eq backend "convex") (eq auth "better-auth"))}}
   const healthCheck = useQuery(api.healthCheck.get);
   const { isAuthenticated } = useConvexAuth();
@@ -24682,6 +26403,32 @@ export default function Home() {
         </AuthLoading>
         {{/if}}
 
+        {{#if (and (ne backend "convex") (eq auth "clerk"))}}
+        {!isLoaded ? (
+          <Text style={styles.apiStatusText}>Loading...</Text>
+        ) : isSignedIn ? (
+          <View style={styles.userCard}>
+            <View style={styles.userHeader}>
+              <Text style={styles.userWelcome}>
+                Welcome,{" "}
+                <Text style={styles.userName}>{user?.fullName ?? user?.firstName ?? "there"}</Text>
+              </Text>
+            </View>
+            <Text style={styles.userEmail}>{user?.emailAddresses[0]?.emailAddress}</Text>
+            <SignOutButton />
+          </View>
+        ) : (
+          <>
+            <Link href="/(auth)/sign-in">
+              <Text style={styles.apiStatusText}>Sign in</Text>
+            </Link>
+            <Link href="/(auth)/sign-up">
+              <Text style={styles.apiStatusText}>Sign up</Text>
+            </Link>
+          </>
+        )}
+        {{/if}}
+
         {{#if (and (eq backend "convex") (eq auth "better-auth"))}}
         {user ? (
           <View style={styles.userCard}>
@@ -24872,7 +26619,8 @@ const styles = StyleSheet.create((theme) => ({
   apiStatusText: {
     color: theme.colors.mutedForeground,
   },
-}));`],
+}));
+`],
 	["frontend/native/unistyles/app/+html.tsx.hbs", `import { ScrollViewStyleReset } from "expo-router/html";
 import { type PropsWithChildren } from "react";
 
@@ -25349,8 +27097,17 @@ uniwind-types.d.ts
 	["frontend/native/uniwind/app/_layout.tsx.hbs", `{{#if (includes examples "ai")}}
 import "@/polyfills";
 {{/if}}
+{{#if (and (eq auth "clerk") (ne api "none") (ne backend "convex"))}}
+import { useEffect } from "react";
+import { setClerkAuthTokenGetter } from "@/utils/clerk-auth";
+{{/if}}
 
 import "@/global.css";
+{{#if (and (ne backend "convex") (eq auth "clerk"))}}
+import { ClerkProvider{{#unless (eq api "none")}}, useAuth{{/unless}} } from "@clerk/expo";
+import { tokenCache } from "@clerk/expo/token-cache";
+import { env } from "@{{projectName}}/env/native";
+{{/if}}
 
 {{#if (eq backend "convex")}}
   {{#if (eq auth "better-auth")}}
@@ -25364,9 +27121,9 @@ import "@/global.css";
   {{/if}}
 
   {{#if (eq auth "clerk")}}
-    import { ClerkProvider, useAuth } from "@clerk/clerk-expo";
+    import { ClerkProvider, useAuth } from "@clerk/expo";
     import { ConvexProviderWithClerk } from "convex/react-clerk";
-    import { tokenCache } from "@clerk/clerk-expo/token-cache";
+    import { tokenCache } from "@clerk/expo/token-cache";
   {{/if}}
 {{else}}
   {{#unless (eq api "none")}}
@@ -25397,6 +27154,22 @@ export const unstable_settings = {
   });
 {{/if}}
 
+{{#if (and (eq auth "clerk") (ne api "none") (ne backend "convex"))}}
+function ClerkApiAuthBridge() {
+  const { getToken } = useAuth();
+
+  useEffect(() => {
+    setClerkAuthTokenGetter(getToken);
+
+    return () => {
+      setClerkAuthTokenGetter(null);
+    };
+  }, [getToken]);
+
+  return null;
+}
+{{/if}}
+
 function StackLayout() {
   return (
     <Stack screenOptions=\\{{}}>
@@ -25449,35 +27222,65 @@ export default function Layout() {
               </AppThemeProvider>
             </KeyboardProvider>
           </GestureHandlerRootView>
-        </ConvexProvider>
+        </ConvexProvider>
+      {{/if}}
+    {{else}}
+      {{#if (eq auth "clerk")}}
+        <ClerkProvider tokenCache={tokenCache} publishableKey={env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY}>
+          {{#unless (eq api "none")}}
+            <ClerkApiAuthBridge />
+            <QueryClientProvider client={queryClient}>
+              <GestureHandlerRootView style=\\{{ flex: 1 }}>
+                <KeyboardProvider>
+                  <AppThemeProvider>
+                    <HeroUINativeProvider>
+                      <StackLayout />
+                    </HeroUINativeProvider>
+                  </AppThemeProvider>
+                </KeyboardProvider>
+              </GestureHandlerRootView>
+            </QueryClientProvider>
+          {{else}}
+            <GestureHandlerRootView style=\\{{ flex: 1 }}>
+              <KeyboardProvider>
+                <AppThemeProvider>
+                  <HeroUINativeProvider>
+                    <StackLayout />
+                  </HeroUINativeProvider>
+                </AppThemeProvider>
+              </KeyboardProvider>
+            </GestureHandlerRootView>
+          {{/unless}}
+        </ClerkProvider>
+      {{else}}
+        {{#unless (eq api "none")}}
+          <QueryClientProvider client={queryClient}>
+            <GestureHandlerRootView style=\\{{ flex: 1 }}>
+              <KeyboardProvider>
+                <AppThemeProvider>
+                  <HeroUINativeProvider>
+                    <StackLayout />
+                  </HeroUINativeProvider>
+                </AppThemeProvider>
+              </KeyboardProvider>
+            </GestureHandlerRootView>
+          </QueryClientProvider>
+        {{else}}
+          <GestureHandlerRootView style=\\{{ flex: 1 }}>
+            <KeyboardProvider>
+              <AppThemeProvider>
+                <HeroUINativeProvider>
+                  <StackLayout />
+                </HeroUINativeProvider>
+              </AppThemeProvider>
+            </KeyboardProvider>
+          </GestureHandlerRootView>
+        {{/unless}}
       {{/if}}
-    {{else}}
-      {{#unless (eq api "none")}}
-        <QueryClientProvider client={queryClient}>
-          <GestureHandlerRootView style=\\{{ flex: 1 }}>
-            <KeyboardProvider>
-              <AppThemeProvider>
-                <HeroUINativeProvider>
-                  <StackLayout />
-                </HeroUINativeProvider>
-              </AppThemeProvider>
-            </KeyboardProvider>
-          </GestureHandlerRootView>
-        </QueryClientProvider>
-      {{else}}
-        <GestureHandlerRootView style=\\{{ flex: 1 }}>
-          <KeyboardProvider>
-            <AppThemeProvider>
-              <HeroUINativeProvider>
-                <StackLayout />
-              </HeroUINativeProvider>
-            </AppThemeProvider>
-          </KeyboardProvider>
-        </GestureHandlerRootView>
-      {{/unless}}
     {{/if}}
   );
-}`],
+}
+`],
 	["frontend/native/uniwind/app/(drawer)/_layout.tsx.hbs", `import React, { useCallback } from "react";
 import { Ionicons, MaterialIcons } from "@expo/vector-icons";
 import { Link } from "expo-router";
@@ -25662,7 +27465,11 @@ import { trpc } from "@/utils/trpc";
 import { Link } from "expo-router";
 import { Authenticated, AuthLoading, Unauthenticated, useQuery } from "convex/react";
 import { api } from "@{{projectName}}/backend/convex/_generated/api";
-import { useUser } from "@clerk/clerk-expo";
+import { useUser } from "@clerk/expo";
+import { SignOutButton } from "@/components/sign-out-button";
+{{else if (and (ne backend "convex") (eq auth "clerk"))}}
+import { Link } from "expo-router";
+import { useAuth, useUser } from "@clerk/expo";
 import { SignOutButton } from "@/components/sign-out-button";
 {{else if (and (eq backend "convex") (eq auth "better-auth"))}}
 import { useConvexAuth, useQuery } from "convex/react";
@@ -25690,6 +27497,9 @@ const healthCheck = useQuery(trpc.healthCheck.queryOptions());
 const { user } = useUser();
 const healthCheck = useQuery(api.healthCheck.get);
 const privateData = useQuery(api.privateData.get);
+{{else if (and (ne backend "convex") (eq auth "clerk"))}}
+const { isLoaded, isSignedIn } = useAuth();
+const { user } = useUser();
 {{else if (and (eq backend "convex") (eq auth "better-auth"))}}
 const healthCheck = useQuery(api.healthCheck.get);
 const { isAuthenticated } = useConvexAuth();
@@ -25796,6 +27606,37 @@ return (
   </AuthLoading>
   {{/if}}
 
+  {{#if (and (ne backend "convex") (eq auth "clerk"))}}
+  {!isLoaded ? (
+  <View className="mt-4 items-center">
+    <Spinner size="sm" />
+  </View>
+  ) : isSignedIn ? (
+  <Surface variant="secondary" className="mt-5 p-4 rounded-xl">
+    <View className="flex-row items-center justify-between">
+      <View className="flex-1">
+        <Text className="text-foreground font-medium">
+          {user?.fullName ?? user?.firstName ?? "Welcome"}
+        </Text>
+        <Text className="text-muted text-xs mt-0.5">
+          {user?.emailAddresses[0]?.emailAddress}
+        </Text>
+      </View>
+      <SignOutButton />
+    </View>
+  </Surface>
+  ) : (
+  <View className="mt-4 gap-3">
+    <Link href="/(auth)/sign-in" asChild>
+      <Button variant="secondary"><Button.Label>Sign In</Button.Label></Button>
+    </Link>
+    <Link href="/(auth)/sign-up" asChild>
+      <Button variant="ghost"><Button.Label>Sign Up</Button.Label></Button>
+    </Link>
+  </View>
+  )}
+  {{/if}}
+
   {{#if (and (eq backend "convex") (eq auth "better-auth"))}}
   {user ? (
   <Surface variant="secondary" className="mb-4 p-4 rounded-xl">
@@ -26142,6 +27983,8 @@ module.exports = uniwindConfig;
     "**/*.tsx"
   ]
 }`],
+	["frontend/native/uniwind/uniwind-env.d.ts", `/// <reference types="uniwind/types" />
+`],
 	["frontend/nuxt/_gitignore", `# Nuxt dev/build outputs
 .output
 .data
@@ -26479,7 +28322,7 @@ initOpenNextCloudflareForDev();
   "dependencies": {
     "@{{projectName}}/ui": "{{#if (eq packageManager "npm")}}*{{else}}workspace:*{{/if}}",
     "lucide-react": "^0.546.0",
-    "next": "^16.1.1",
+    "next": "^16.2.0",
     "next-themes": "^0.4.6",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
@@ -26506,8 +28349,8 @@ export default config;
 	["frontend/react/next/src/app/layout.tsx.hbs", `import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "../index.css";
-{{#if (eq auth "clerk")}}{{#if (eq backend "convex")}}import { ClerkProvider } from "@clerk/nextjs";
-{{/if}}{{/if}}{{#if (and (eq backend "convex") (eq auth "better-auth"))}}
+{{#if (eq auth "clerk")}}import { ClerkProvider } from "@clerk/nextjs";
+{{/if}}{{#if (and (eq backend "convex") (eq auth "better-auth"))}}
 import { getToken } from "@/lib/auth-server";
 {{/if}}
 import Providers from "@/components/providers";
@@ -26556,12 +28399,12 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  	return (
+	return (
 		<html lang="en" suppressHydrationWarning>
 			<body
 				className={\`\${geistSans.variable} \${geistMono.variable} antialiased\`}
 			>
-				{{#if (and (eq auth "clerk") (eq backend "convex"))}}<ClerkProvider>
+				{{#if (eq auth "clerk")}}<ClerkProvider>
 					<Providers>
 						<div className="grid grid-rows-[auto_1fr] h-svh">
 							<Header />
@@ -26700,9 +28543,15 @@ export function ModeToggle() {
 `],
 	["frontend/react/next/src/components/providers.tsx.hbs", `"use client";
 
+{{#if (and (eq auth "clerk") (ne api "none"))}}
+import { useEffect } from "react";
+import { setClerkAuthTokenGetter } from "@/utils/clerk-auth";
+{{/if}}
+{{#if (and (eq auth "clerk") (or (eq backend "convex") (ne api "none")))}}
+import { useAuth } from "@clerk/nextjs";
+{{/if}}
 {{#if (eq backend "convex")}}
 {{#if (eq auth "clerk")}}
-import { useAuth } from "@clerk/nextjs";
 import { ConvexReactClient } from "convex/react";
 import { ConvexProviderWithClerk } from "convex/react-clerk";
 import { env } from "@{{projectName}}/env/web";
@@ -26734,6 +28583,22 @@ import { Toaster } from "@{{projectName}}/ui/components/sonner";
 const convex = new ConvexReactClient(env.NEXT_PUBLIC_CONVEX_URL);
 {{/if}}
 
+{{#if (and (eq auth "clerk") (ne backend "convex") (ne api "none"))}}
+function ClerkApiAuthBridge() {
+  const { getToken } = useAuth();
+
+  useEffect(() => {
+    setClerkAuthTokenGetter(getToken);
+
+    return () => {
+      setClerkAuthTokenGetter(null);
+    };
+  }, [getToken]);
+
+  return null;
+}
+{{/if}}
+
 export default function Providers({
   children,
 {{#if (and (eq backend "convex") (eq auth "better-auth"))}}
@@ -26771,6 +28636,9 @@ export default function Providers({
       {{else}}
       {{#unless (eq api "none")}}
       <QueryClientProvider client={queryClient}>
+        {{#if (eq auth "clerk")}}
+        <ClerkApiAuthBridge />
+        {{/if}}
         {{#if (eq api "orpc")}}
         {children}
         {{/if}}
@@ -26815,7 +28683,7 @@ export function ThemeProvider({
     "resolveJsonModule": true,
     "isolatedModules": true,
     "verbatimModuleSyntax": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -26834,10 +28702,11 @@ export function ThemeProvider({
     {{#if (eq serverDeploy "cloudflare")}}
     "../server/env.d.ts",
     {{/if}}
-    "./next-env.d.ts",
-    "./**/*.ts",
-    "./**/*.tsx",
-    "./.next/types/**/*.ts"
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
   ],
   "exclude": [
     "./node_modules"
@@ -26887,6 +28756,9 @@ export function ThemeProvider({
 export default {
   ssr: false,
   appDirectory: "src",
+  future: {
+    v8_middleware: true,
+  },
 } satisfies Config;
 `],
 	["frontend/react/react-router/src/components/mode-toggle.tsx.hbs", `import { Moon, Sun } from "lucide-react";
@@ -26944,16 +28816,23 @@ import "./index.css";
 import Header from "./components/header";
 import { ThemeProvider } from "./components/theme-provider";
 import { Toaster } from "@{{projectName}}/ui/components/sonner";
+{{#if (eq auth "clerk")}}
+import { ClerkProvider{{#if (or (eq backend "convex") (ne api "none"))}}, useAuth{{/if}} } from "@clerk/react-router";
+import { clerkMiddleware, rootAuthLoader } from "@clerk/react-router/server";
+{{/if}}
+{{#if (and (eq auth "clerk") (ne backend "convex") (ne api "none"))}}
+import { useEffect } from "react";
+import { setClerkAuthTokenGetter } from "@/utils/clerk-auth";
+{{/if}}
 
 {{#if (eq backend "convex")}}
 import { ConvexReactClient } from "convex/react";
 import { env } from "@{{projectName}}/env/web";
-{{#if (eq auth "clerk")}}
-import { ClerkProvider, useAuth } from "@clerk/clerk-react";
+  {{#if (eq auth "clerk")}}
 import { ConvexProviderWithClerk } from "convex/react-clerk";
-{{else}}
+  {{else}}
 import { ConvexProvider } from "convex/react";
-{{/if}}
+  {{/if}}
 {{else}}
   {{#unless (eq api "none")}}
 import { QueryClientProvider } from "@tanstack/react-query";
@@ -26967,6 +28846,28 @@ import { queryClient } from "./utils/trpc";
   {{/unless}}
 {{/if}}
 
+{{#if (eq auth "clerk")}}
+export const middleware: Route.MiddlewareFunction[] = [clerkMiddleware()];
+
+export const loader = (args: Route.LoaderArgs) => rootAuthLoader(args);
+{{/if}}
+
+{{#if (and (eq auth "clerk") (ne backend "convex") (ne api "none"))}}
+function ClerkApiAuthBridge() {
+  const { getToken } = useAuth();
+
+  useEffect(() => {
+    setClerkAuthTokenGetter(getToken);
+
+    return () => {
+      setClerkAuthTokenGetter(null);
+    };
+  }, [getToken]);
+
+  return null;
+}
+{{/if}}
+
 export const links: Route.LinksFunction = () => [
   { rel: "preconnect", href: "https://fonts.googleapis.com" },
   { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" },
@@ -26996,11 +28897,15 @@ export function Layout({ children }: { children: React.ReactNode }) {
 }
 
 {{#if (eq backend "convex")}}
+{{#if (eq auth "clerk")}}
+export default function App({ loaderData }: Route.ComponentProps) {
+{{else}}
 export default function App() {
+{{/if}}
   const convex = new ConvexReactClient(env.VITE_CONVEX_URL);
   {{#if (eq auth "clerk")}}
   return (
-    <ClerkProvider publishableKey={env.VITE_CLERK_PUBLISHABLE_KEY}>
+    <ClerkProvider loaderData={loaderData}>
       <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
         <ThemeProvider
           attribute="class"
@@ -27036,6 +28941,62 @@ export default function App() {
   );
   {{/if}}
 }
+{{else if (eq auth "clerk")}}
+export default function App({ loaderData }: Route.ComponentProps) {
+  return (
+    <ClerkProvider loaderData={loaderData}>
+      {{#unless (eq api "none")}}
+      <ClerkApiAuthBridge />
+      {{/unless}}
+      {{#if (eq api "orpc")}}
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="dark"
+          disableTransitionOnChange
+          storageKey="vite-ui-theme"
+        >
+          <div className="grid grid-rows-[auto_1fr] h-svh">
+            <Header />
+            <Outlet />
+          </div>
+          <Toaster richColors />
+        </ThemeProvider>
+        <ReactQueryDevtools position="bottom" buttonPosition="bottom-right" />
+      </QueryClientProvider>
+      {{else if (eq api "trpc")}}
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="dark"
+          disableTransitionOnChange
+          storageKey="vite-ui-theme"
+        >
+          <div className="grid grid-rows-[auto_1fr] h-svh">
+            <Header />
+            <Outlet />
+          </div>
+          <Toaster richColors />
+        </ThemeProvider>
+        <ReactQueryDevtools position="bottom" buttonPosition="bottom-right" />
+      </QueryClientProvider>
+      {{else}}
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="dark"
+        disableTransitionOnChange
+        storageKey="vite-ui-theme"
+      >
+        <div className="grid grid-rows-[auto_1fr] h-svh">
+          <Header />
+          <Outlet />
+        </div>
+        <Toaster richColors />
+      </ThemeProvider>
+      {{/if}}
+    </ClerkProvider>
+  );
+}
 {{else if (eq api "orpc")}}
 export default function App() {
   return (
@@ -27278,7 +29239,7 @@ export default defineConfig({
 		"build": "vite build",
 		"serve": "vite preview",
 		"start": "vite",
-		"check-types": "tsc --noEmit"
+		"check-types": "vite build && tsc --noEmit"
 	},
 	"dependencies": {
         "@hookform/resolvers": "^5.1.1",
@@ -27348,6 +29309,10 @@ export { useTheme } from "next-themes";
 `],
 	["frontend/react/tanstack-router/src/main.tsx.hbs", `import { RouterProvider, createRouter } from "@tanstack/react-router";
 import ReactDOM from "react-dom/client";
+{{#if (and (eq auth "clerk") (ne backend "convex") (ne api "none"))}}
+import { useEffect } from "react";
+import { setClerkAuthTokenGetter } from "@/utils/clerk-auth";
+{{/if}}
 import Loader from "./components/loader";
 import { routeTree } from "./routeTree.gen";
 
@@ -27359,11 +29324,15 @@ import { routeTree } from "./routeTree.gen";
   import { QueryClientProvider } from "@tanstack/react-query";
   import { queryClient, trpc } from "./utils/trpc";
 {{/if}}
+{{#if (or (eq backend "convex") (eq auth "clerk"))}}
+  import { env } from "@{{projectName}}/env/web";
+{{/if}}
+{{#if (eq auth "clerk")}}
+  import { ClerkProvider{{#if (or (eq backend "convex") (ne api "none"))}}, useAuth{{/if}} } from "@clerk/react";
+{{/if}}
 {{#if (eq backend "convex")}}
   import { ConvexReactClient } from "convex/react";
-  import { env } from "@{{projectName}}/env/web";
   {{#if (eq auth "clerk")}}
-  import { ClerkProvider, useAuth } from "@clerk/clerk-react";
   import { ConvexProviderWithClerk } from "convex/react-clerk";
   {{else if (eq auth "better-auth")}}
   import { ConvexBetterAuthProvider } from "@convex-dev/better-auth/react";
@@ -27374,6 +29343,22 @@ import { routeTree } from "./routeTree.gen";
   const convex = new ConvexReactClient(env.VITE_CONVEX_URL);
 {{/if}}
 
+{{#if (and (eq auth "clerk") (ne backend "convex") (ne api "none"))}}
+function ClerkApiAuthBridge() {
+  const { getToken } = useAuth();
+
+  useEffect(() => {
+    setClerkAuthTokenGetter(getToken);
+
+    return () => {
+      setClerkAuthTokenGetter(null);
+    };
+  }, [getToken]);
+
+  return null;
+}
+{{/if}}
+
 const router = createRouter({
   routeTree,
   defaultPreload: "intent",
@@ -27382,18 +29367,36 @@ const router = createRouter({
   context: { orpc, queryClient },
   Wrap: function WrapComponent({ children }: { children: React.ReactNode }) {
     return (
+      {{#if (eq auth "clerk")}}
+      <ClerkProvider publishableKey={env.VITE_CLERK_PUBLISHABLE_KEY}>
+        <ClerkApiAuthBridge />
+        <QueryClientProvider client={queryClient}>
+          {children}
+        </QueryClientProvider>
+      </ClerkProvider>
+      {{else}}
       <QueryClientProvider client={queryClient}>
         {children}
       </QueryClientProvider>
+      {{/if}}
     );
   },
   {{else if (eq api "trpc")}}
   context: { trpc, queryClient },
   Wrap: function WrapComponent({ children }: { children: React.ReactNode }) {
     return (
+      {{#if (eq auth "clerk")}}
+      <ClerkProvider publishableKey={env.VITE_CLERK_PUBLISHABLE_KEY}>
+        <ClerkApiAuthBridge />
+        <QueryClientProvider client={queryClient}>
+          {children}
+        </QueryClientProvider>
+      </ClerkProvider>
+      {{else}}
       <QueryClientProvider client={queryClient}>
         {children}
       </QueryClientProvider>
+      {{/if}}
     );
   },
   {{else if (eq backend "convex")}}
@@ -27415,6 +29418,11 @@ const router = createRouter({
     return <ConvexProvider client={convex}>{children}</ConvexProvider>;
     {{/if}}
   },
+  {{else if (eq auth "clerk")}}
+  context: {},
+  Wrap: function WrapComponent({ children }: { children: React.ReactNode }) {
+    return <ClerkProvider publishableKey={env.VITE_CLERK_PUBLISHABLE_KEY}>{children}</ClerkProvider>;
+  },
   {{else}}
   context: {},
   {{/if}}
@@ -27734,6 +29742,9 @@ import { TRPCProvider } from "./utils/trpc";
 {{#unless (eq backend "self")}}
 import { env } from "@{{projectName}}/env/web";
 {{/unless}}
+{{#if (eq auth "clerk")}}
+import { getClerkAuthToken } from "@/utils/clerk-auth";
+{{/if}}
 {{else if (eq api "orpc")}}
 import { QueryClientProvider } from "@tanstack/react-query";
 import { orpc, queryClient } from "./utils/orpc";
@@ -27794,6 +29805,12 @@ const trpcClient = createTRPCClient<AppRouter>({
 	links: [
 		httpBatchLink({
 			url: {{#if (eq backend "self")}}"/api/trpc"{{else}}\`\${env.VITE_SERVER_URL}/trpc\`{{/if}},
+{{#if (eq auth "clerk")}}
+			headers: async () => {
+				const token = await getClerkAuthToken();
+				return token ? { Authorization: \`Bearer \${token}\` } : {};
+			},
+{{/if}}
 {{#if (eq auth "better-auth")}}
 			fetch(url, options) {
 				return fetch(url, {
@@ -27880,8 +29897,14 @@ import type { QueryClient } from "@tanstack/react-query";
 {{/if}}
 {{/if}}
 
+{{#if (eq auth "clerk")}}
+import { ClerkProvider{{#if (or (eq backend "convex") (ne api "none"))}}, useAuth{{/if}} } from "@clerk/tanstack-react-start";
+{{/if}}
+{{#if (and (eq auth "clerk") (ne backend "convex") (ne api "none"))}}
+import { useEffect } from "react";
+import { setClerkAuthTokenGetter } from "@/utils/clerk-auth";
+{{/if}}
 {{#if (and (eq backend "convex") (eq auth "clerk"))}}
-import { ClerkProvider, useAuth } from "@clerk/tanstack-react-start";
 import { auth } from "@clerk/tanstack-react-start/server";
 import { createServerFn } from "@tanstack/react-start";
 import { ConvexProviderWithClerk } from "convex/react-clerk";
@@ -27904,6 +29927,22 @@ const getAuth = createServerFn({ method: "GET" }).handler(async () => {
 import { ConvexProvider } from "convex/react";
 {{/if}}
 
+{{#if (and (eq auth "clerk") (ne backend "convex") (ne api "none"))}}
+function ClerkApiAuthBridge() {
+  const { getToken } = useAuth();
+
+  useEffect(() => {
+    setClerkAuthTokenGetter(getToken);
+
+    return () => {
+      setClerkAuthTokenGetter(null);
+    };
+  }, [getToken]);
+
+  return null;
+}
+{{/if}}
+
 {{#if (eq backend "convex")}}
 export interface RouterAppContext {
   queryClient: QueryClient;
@@ -28021,6 +30060,31 @@ function RootDocument() {
       </html>
     </ConvexBetterAuthProvider>
   );
+  {{else if (eq auth "clerk")}}
+  return (
+    <ClerkProvider>
+      {{#unless (eq api "none")}}
+      <ClerkApiAuthBridge />
+      {{/unless}}
+      <html lang="en" className="dark">
+        <head>
+          <HeadContent />
+        </head>
+        <body>
+          <div className="grid h-svh grid-rows-[auto_1fr]">
+            <Header />
+            <Outlet />
+          </div>
+          <Toaster richColors />
+          <TanStackRouterDevtools position="bottom-left" />
+          {{#unless (eq api "none")}}
+          <ReactQueryDevtools position="bottom" buttonPosition="bottom-right" />
+          {{/unless}}
+          <Scripts />
+        </body>
+      </html>
+    </ClerkProvider>
+  );
   {{else if (eq backend "convex")}}
   const { convexQueryClient } = Route.useRouteContext();
   return (
@@ -29075,16 +31139,17 @@ export const env = createEnv({
 {{#if (eq auth "better-auth")}}
 		EXPO_PUBLIC_CONVEX_SITE_URL: z.url(),
 {{/if}}
-{{#if (eq auth "clerk")}}
-		EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().min(1),
-{{/if}}
 {{else}}
 		EXPO_PUBLIC_SERVER_URL: z.url(),
+{{/if}}
+{{#if (eq auth "clerk")}}
+		EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().min(1),
 {{/if}}
 	},
 	runtimeEnv: process.env,
 	emptyStringAsUndefined: true,
-});`],
+});
+`],
 	["packages/env/src/server.ts.hbs", `{{#if (or (eq serverDeploy "cloudflare") (and (eq backend "self") (eq webDeploy "cloudflare")))}}
 /// <reference path="../env.d.ts" />
 // For Cloudflare Workers, env is accessed via cloudflare:workers module
@@ -29113,6 +31178,12 @@ export const env = createEnv({
 		BETTER_AUTH_SECRET: z.string().min(32),
 		BETTER_AUTH_URL: z.url(),
 {{/if}}
+{{#if (eq auth "clerk")}}
+		CLERK_SECRET_KEY: z.string().min(1),
+{{#if (or (eq backend "express") (eq backend "fastify") (and (ne api "none") (or (eq backend "self") (eq backend "hono") (eq backend "elysia"))))}}
+		CLERK_PUBLISHABLE_KEY: z.string().min(1),
+{{/if}}
+{{/if}}
 {{#if (eq payments "polar")}}
 		POLAR_ACCESS_TOKEN: z.string().min(1),
 		POLAR_SUCCESS_URL: z.url(),
@@ -29190,22 +31261,40 @@ export const env = createEnv({
 {{/if}}
 {{else if (eq backend "self")}}
 {{#if (includes frontend "next")}}
-	client: {},
-	runtimeEnv: {},
+	client: {
+{{#if (eq auth "clerk")}}
+		NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().min(1),
+{{/if}}
+	},
+	runtimeEnv: {
+{{#if (eq auth "clerk")}}
+		NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
+{{/if}}
+	},
 {{else if (includes frontend "nuxt")}}
 	client: {},
 {{else}}
 	clientPrefix: "VITE_",
-	client: {},
+	client: {
+{{#if (eq auth "clerk")}}
+		VITE_CLERK_PUBLISHABLE_KEY: z.string().min(1),
+{{/if}}
+	},
 	runtimeEnv: (import.meta as any).env,
 {{/if}}
 {{else if (ne backend "none")}}
 {{#if (includes frontend "next")}}
 	client: {
 		NEXT_PUBLIC_SERVER_URL: z.url(),
+{{#if (eq auth "clerk")}}
+		NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().min(1),
+{{/if}}
 	},
 	runtimeEnv: {
 		NEXT_PUBLIC_SERVER_URL: process.env.NEXT_PUBLIC_SERVER_URL,
+{{#if (eq auth "clerk")}}
+		NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
+{{/if}}
 	},
 {{else if (includes frontend "nuxt")}}
 	client: {
@@ -29221,12 +31310,16 @@ export const env = createEnv({
 	clientPrefix: "VITE_",
 	client: {
 		VITE_SERVER_URL: z.url(),
+{{#if (eq auth "clerk")}}
+		VITE_CLERK_PUBLISHABLE_KEY: z.string().min(1),
+{{/if}}
 	},
 	runtimeEnv: (import.meta as any).env,
 {{/if}}
 {{/if}}
 	emptyStringAsUndefined: true,
-});`],
+});
+`],
 	["packages/env/tsconfig.json.hbs", `{
   "extends": "@{{projectName}}/config/tsconfig.base.json",
 }
@@ -29310,6 +31403,9 @@ export const web = await Nextjs("web", {
     {{/if}}
     {{#if (eq auth "clerk")}}
     CLERK_SECRET_KEY: alchemy.secret.env.CLERK_SECRET_KEY!,
+    {{#if (and (ne api "none") (or (eq backend "self") (eq backend "hono") (eq backend "elysia")))}}
+    CLERK_PUBLISHABLE_KEY: alchemy.env.CLERK_PUBLISHABLE_KEY!,
+    {{/if}}
     {{/if}}
     {{#if (and (includes examples "ai") (ne backend "convex"))}}
     GOOGLE_GENERATIVE_AI_API_KEY: alchemy.secret.env.GOOGLE_GENERATIVE_AI_API_KEY!,
@@ -29362,6 +31458,9 @@ export const web = await Nuxt("web", {
     {{/if}}
     {{#if (eq auth "clerk")}}
     CLERK_SECRET_KEY: alchemy.secret.env.CLERK_SECRET_KEY!,
+    {{#if (and (ne api "none") (or (eq backend "self") (eq backend "hono") (eq backend "elysia")))}}
+    CLERK_PUBLISHABLE_KEY: alchemy.env.CLERK_PUBLISHABLE_KEY!,
+    {{/if}}
     {{/if}}
     {{#if (and (includes examples "ai") (ne backend "convex"))}}
     GOOGLE_GENERATIVE_AI_API_KEY: alchemy.secret.env.GOOGLE_GENERATIVE_AI_API_KEY!,
@@ -29423,6 +31522,9 @@ export const web = await TanStackStart("web", {
     {{/if}}
     {{#if (eq auth "clerk")}}
     CLERK_SECRET_KEY: alchemy.secret.env.CLERK_SECRET_KEY!,
+    {{#if (and (ne api "none") (or (eq backend "self") (eq backend "hono") (eq backend "elysia")))}}
+    CLERK_PUBLISHABLE_KEY: alchemy.env.CLERK_PUBLISHABLE_KEY!,
+    {{/if}}
     {{/if}}
     {{#if (and (includes examples "ai") (ne backend "convex"))}}
     GOOGLE_GENERATIVE_AI_API_KEY: alchemy.secret.env.GOOGLE_GENERATIVE_AI_API_KEY!,
@@ -29548,6 +31650,9 @@ export const server = await Worker("server", {
     {{/if}}
     {{#if (eq auth "clerk")}}
     CLERK_SECRET_KEY: alchemy.secret.env.CLERK_SECRET_KEY!,
+    {{#if (and (ne api "none") (or (eq backend "self") (eq backend "hono") (eq backend "elysia")))}}
+    CLERK_PUBLISHABLE_KEY: alchemy.env.CLERK_PUBLISHABLE_KEY!,
+    {{/if}}
     {{/if}}
     {{#if (includes examples "ai")}}
     GOOGLE_GENERATIVE_AI_API_KEY: alchemy.secret.env.GOOGLE_GENERATIVE_AI_API_KEY!,
@@ -30526,7 +32631,7 @@ function SuccessPage() {
 </div>
 `]
 ]);
-const TEMPLATE_COUNT = 444;
+const TEMPLATE_COUNT = 457;
 
 //#endregion
 export { EMBEDDED_TEMPLATES, GeneratorError, Handlebars, TEMPLATE_COUNT, VirtualFileSystem, dependencyVersionMap, generate, generateReproducibleCommand, isBinaryFile, processAddonTemplates, processAddonsDeps, processFileContent, processTemplateString, transformFilename, writeBtsConfigToVfs };