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

package/dist/index.mjs

@@ -705,8 +705,8 @@ function renameDevScriptsForAlchemy(vfs, config) {
 //#region src/utils/add-deps.ts
 const dependencyVersionMap = {
 	typescript: "^5",
-	"better-auth": "1.5.2",
-	"@better-auth/expo": "1.5.2",
+	"better-auth": "1.5.5",
+	"@better-auth/expo": "1.5.5",
 	"@clerk/backend": "^3.2.1",
 	"@clerk/express": "^2.0.5",
 	"@clerk/fastify": "^3.1.3",
@@ -776,17 +776,17 @@ const dependencyVersionMap = {
 	"@orpc/openapi": "^1.12.2",
 	"@orpc/zod": "^1.12.2",
 	"@orpc/tanstack-query": "^1.13.6",
-	"@trpc/tanstack-react-query": "^11.7.2",
-	"@trpc/server": "^11.7.2",
-	"@trpc/client": "^11.7.2",
+	"@trpc/tanstack-react-query": "^11.13.4",
+	"@trpc/server": "^11.13.4",
+	"@trpc/client": "^11.13.4",
 	next: "^16.2.0",
-	convex: "^1.32.0",
+	convex: "^1.33.1",
 	"@convex-dev/react-query": "^0.1.0",
 	"@convex-dev/agent": "^0.3.2",
 	"convex-svelte": "^0.0.12",
 	"convex-nuxt": "0.1.5",
 	"convex-vue": "^0.1.5",
-	"@convex-dev/better-auth": "^0.10.13",
+	"@convex-dev/better-auth": "^0.11.3",
 	"@tanstack/svelte-query": "^5.85.3",
 	"@tanstack/svelte-query-devtools": "^5.85.3",
 	"@tanstack/vue-query-devtools": "^6.1.5",
@@ -815,7 +815,7 @@ const dependencyVersionMap = {
 	"@t3-oss/env-core": "^0.13.1",
 	"@t3-oss/env-nextjs": "^0.13.1",
 	"@t3-oss/env-nuxt": "^0.13.1",
-	"@polar-sh/better-auth": "^1.6.4",
+	"@polar-sh/better-auth": "^1.8.3",
 	"@polar-sh/sdk": "^0.42.2"
 };
 /**
@@ -1335,6 +1335,7 @@ function addConvexDeps(vfs, frontend, frontendType) {
 
 //#endregion
 //#region src/processors/auth-deps.ts
+const CONVEX_BETTER_AUTH_VERSION = "1.5.3";
 function processAuthDeps(vfs, config) {
 	const { auth, backend } = config;
 	if (!auth || auth === "none") return;
@@ -1396,13 +1397,13 @@ function processConvexAuthDeps(vfs, config) {
 				vfs,
 				packagePath: backendPath,
 				dependencies: ["better-auth", "@convex-dev/better-auth"],
-				customDependencies: { "better-auth": "1.4.9" }
+				customDependencies: { "better-auth": CONVEX_BETTER_AUTH_VERSION }
 			});
 			if (hasNative) addPackageDependency({
 				vfs,
 				packagePath: backendPath,
 				dependencies: ["@better-auth/expo"],
-				customDependencies: { "@better-auth/expo": "1.4.9" }
+				customDependencies: { "@better-auth/expo": CONVEX_BETTER_AUTH_VERSION }
 			});
 		}
 		if (webExists) {
@@ -1410,7 +1411,7 @@ function processConvexAuthDeps(vfs, config) {
 				vfs,
 				packagePath: webPath,
 				dependencies: ["better-auth", "@convex-dev/better-auth"],
-				customDependencies: { "better-auth": "1.4.9" }
+				customDependencies: { "better-auth": CONVEX_BETTER_AUTH_VERSION }
 			});
 			if (hasReactWebAuthForms) addPackageDependency({
 				vfs,
@@ -1438,8 +1439,8 @@ function processConvexAuthDeps(vfs, config) {
 				"@tanstack/react-form"
 			],
 			customDependencies: {
-				"better-auth": "1.4.9",
-				"@better-auth/expo": "1.4.9"
+				"better-auth": CONVEX_BETTER_AUTH_VERSION,
+				"@better-auth/expo": CONVEX_BETTER_AUTH_VERSION
 			}
 		});
 	}
@@ -1878,9 +1879,16 @@ function processEnvDeps(vfs, config) {
 	if (!vfs.exists(envPath)) return;
 	const { frontend, backend, runtime } = config;
 	const deps = ["zod"];
-	if (frontend.includes("next")) deps.push("@t3-oss/env-nextjs");
-	else if (frontend.includes("nuxt")) deps.push("@t3-oss/env-nuxt");
-	else deps.push("@t3-oss/env-core");
+	const hasNative = frontend.some((value) => [
+		"native-bare",
+		"native-uniwind",
+		"native-unistyles"
+	].includes(value));
+	const hasNextJs = frontend.includes("next");
+	const hasNuxt = frontend.includes("nuxt");
+	if (hasNextJs) deps.push("@t3-oss/env-nextjs");
+	else if (hasNuxt) deps.push("@t3-oss/env-nuxt");
+	if (hasNative || !hasNextJs && !hasNuxt) deps.push("@t3-oss/env-core");
 	if (backend !== "convex" && backend !== "none" && runtime !== "workers" && !deps.includes("@t3-oss/env-core")) deps.push("@t3-oss/env-core");
 	addPackageDependency({
 		vfs,
@@ -2050,7 +2058,7 @@ function buildConvexBackendVars(frontend, auth, examples) {
 	const hasNextJs = frontend.includes("next");
 	const hasNative = frontend.includes("native-bare") || frontend.includes("native-uniwind") || frontend.includes("native-unistyles");
 	const hasWeb = frontend.includes("react-router") || frontend.includes("tanstack-router") || frontend.includes("tanstack-start") || hasNextJs || frontend.includes("nuxt") || frontend.includes("solid") || frontend.includes("svelte") || frontend.includes("astro");
-	const defaultSiteUrl = hasNative && !hasWeb ? "http://localhost:8081" : "http://localhost:3001";
+	const defaultSiteUrl = hasNative && !hasWeb ? "http://localhost:8081" : frontend.includes("react-router") || frontend.includes("tanstack-router") || frontend.includes("svelte") ? "http://localhost:5173" : frontend.includes("astro") ? "http://localhost:4321" : "http://localhost:3001";
 	const vars = [];
 	if (examples?.includes("ai")) vars.push({
 		key: "GOOGLE_GENERATIVE_AI_API_KEY",
@@ -2088,7 +2096,7 @@ function buildConvexBackendVars(frontend, auth, examples) {
 function buildConvexCommentBlocks(frontend, auth, examples) {
 	const hasNative = frontend.includes("native-bare") || frontend.includes("native-uniwind") || frontend.includes("native-unistyles");
 	const hasWeb = frontend.includes("react-router") || frontend.includes("tanstack-router") || frontend.includes("tanstack-start") || frontend.includes("next") || frontend.includes("nuxt") || frontend.includes("solid") || frontend.includes("svelte") || frontend.includes("astro");
-	const defaultSiteUrl = hasNative && !hasWeb ? "http://localhost:8081" : "http://localhost:3001";
+	const defaultSiteUrl = hasNative && !hasWeb ? "http://localhost:8081" : frontend.includes("react-router") || frontend.includes("tanstack-router") || frontend.includes("svelte") ? "http://localhost:5173" : frontend.includes("astro") ? "http://localhost:4321" : "http://localhost:3001";
 	let commentBlocks = "";
 	if (examples?.includes("ai")) commentBlocks += `# Set Google AI API key for AI agent
 # npx convex env set GOOGLE_GENERATIVE_AI_API_KEY=your_google_api_key
@@ -2101,11 +2109,12 @@ ${hasWeb || hasNative ? `# npx convex env set SITE_URL ${defaultSiteUrl}\n` : ""
 }
 function buildServerVars(backend, frontend, auth, api, database, dbSetup, runtime, webDeploy, serverDeploy, payments, examples) {
 	const hasReactRouter = frontend.includes("react-router");
+	const hasTanStackRouter = frontend.includes("tanstack-router");
 	const hasSvelte = frontend.includes("svelte");
 	const hasAstro = frontend.includes("astro");
 	let corsOrigin = "http://localhost:3001";
 	if (hasAstro) corsOrigin = "http://localhost:4321";
-	else if (hasReactRouter || hasSvelte) corsOrigin = "http://localhost:5173";
+	else if (hasReactRouter || hasTanStackRouter || hasSvelte) corsOrigin = "http://localhost:5173";
 	else if (backend === "self") corsOrigin = "http://localhost:3001";
 	let databaseUrl = null;
 	if (database !== "none" && dbSetup === "none") switch (database) {
@@ -2615,6 +2624,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 hasTanStackRouter = frontend.includes("tanstack-router");
 	const hasNative = hasNativeFrontend(frontend);
 	const hasReactWeb = frontend.some((f) => [
 		"tanstack-router",
@@ -2625,7 +2635,7 @@ function generateReadmeContent(options) {
 	const hasSvelte = frontend.includes("svelte");
 	const hasAstro = frontend.includes("astro");
 	const packageManagerRunCmd = `${packageManager} run`;
-	const webPort = hasReactRouter || hasSvelte ? "5173" : hasAstro ? "4321" : "3001";
+	const webPort = hasReactRouter || hasTanStackRouter || hasSvelte ? "5173" : hasAstro ? "4321" : "3001";
 	const stackDescription = generateStackDescription(frontend, backend, api, isConvex);
 	return `# ${projectName}
 
@@ -5869,7 +5879,14 @@ import { authComponent, createAuth } from "./auth";
 const http = httpRouter();
 
 {{#if (or (includes frontend "native-bare") (includes frontend "native-uniwind") (includes frontend "native-unistyles") (includes frontend "tanstack-router") (includes frontend "react-router") (includes frontend "nuxt") (includes frontend "svelte") (includes frontend "solid"))}}
+{{#if (or (includes frontend "tanstack-router") (includes frontend "react-router") (includes frontend "nuxt") (includes frontend "svelte") (includes frontend "solid"))}}
+authComponent.registerRoutesLazy(http, createAuth, {
+  cors: true,
+  trustedOrigins: [process.env.SITE_URL!],
+});
+{{else}}
 authComponent.registerRoutes(http, createAuth, { cors: true });
+{{/if}}
 {{else}}
 authComponent.registerRoutes(http, createAuth);
 {{/if}}
@@ -7585,6 +7602,402 @@ export const {
 	convexUrl: env.NEXT_PUBLIC_CONVEX_URL,
 	convexSiteUrl: env.NEXT_PUBLIC_CONVEX_SITE_URL,
 });
+`],
+	["auth/better-auth/convex/web/react/react-router/src/components/sign-in-form.tsx.hbs", `import { authClient } from "@/lib/auth-client";
+import { useForm } from "@tanstack/react-form";
+import { useNavigate } from "react-router";
+import { toast } from "sonner";
+import z from "zod";
+import { Button } from "@{{projectName}}/ui/components/button";
+import { Input } from "@{{projectName}}/ui/components/input";
+import { Label } from "@{{projectName}}/ui/components/label";
+
+export default function SignInForm({
+  onSwitchToSignUp,
+}: {
+  onSwitchToSignUp: () => void;
+}) {
+  const navigate = useNavigate();
+
+  const form = useForm({
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+    onSubmit: async ({ value }) => {
+      await authClient.signIn.email(
+        {
+          email: value.email,
+          password: value.password,
+        },
+        {
+          onSuccess: () => {
+            navigate("/dashboard");
+            toast.success("Sign in successful");
+          },
+          onError: (error) => {
+            toast.error(error.error.message || error.error.statusText);
+          },
+        },
+      );
+    },
+    validators: {
+      onSubmit: z.object({
+        email: z.email("Invalid email address"),
+        password: z.string().min(8, "Password must be at least 8 characters"),
+      }),
+    },
+  });
+
+  return (
+    <div className="mx-auto mt-10 w-full max-w-md p-6">
+      <h1 className="mb-6 text-center text-3xl font-bold">Welcome Back</h1>
+
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          form.handleSubmit();
+        }}
+        className="space-y-4"
+      >
+        <div>
+          <form.Field name="email">
+            {(field) => (
+              <div className="space-y-2">
+                <Label htmlFor={field.name}>Email</Label>
+                <Input
+                  id={field.name}
+                  name={field.name}
+                  type="email"
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+                {field.state.meta.errors.map((error, index) => (
+                  <p key={\`\${field.name}-error-\${index}\`} className="text-red-500">
+                    {error?.message}
+                  </p>
+                ))}
+              </div>
+            )}
+          </form.Field>
+        </div>
+
+        <div>
+          <form.Field name="password">
+            {(field) => (
+              <div className="space-y-2">
+                <Label htmlFor={field.name}>Password</Label>
+                <Input
+                  id={field.name}
+                  name={field.name}
+                  type="password"
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+                {field.state.meta.errors.map((error, index) => (
+                  <p key={\`\${field.name}-error-\${index}\`} className="text-red-500">
+                    {error?.message}
+                  </p>
+                ))}
+              </div>
+            )}
+          </form.Field>
+        </div>
+
+        <form.Subscribe
+          selector={(state) => ({
+            canSubmit: state.canSubmit,
+            isSubmitting: state.isSubmitting,
+          })}
+        >
+          {({ canSubmit, isSubmitting }) => (
+            <Button type="submit" className="w-full" disabled={!canSubmit || isSubmitting}>
+              {isSubmitting ? "Submitting..." : "Sign In"}
+            </Button>
+          )}
+        </form.Subscribe>
+      </form>
+
+      <div className="mt-4 text-center">
+        <Button
+          variant="link"
+          onClick={onSwitchToSignUp}
+          className="text-indigo-600 hover:text-indigo-800"
+        >
+          Need an account? Sign Up
+        </Button>
+      </div>
+    </div>
+  );
+}
+`],
+	["auth/better-auth/convex/web/react/react-router/src/components/sign-up-form.tsx.hbs", `import { authClient } from "@/lib/auth-client";
+import { useForm } from "@tanstack/react-form";
+import { useNavigate } from "react-router";
+import { toast } from "sonner";
+import z from "zod";
+import { Button } from "@{{projectName}}/ui/components/button";
+import { Input } from "@{{projectName}}/ui/components/input";
+import { Label } from "@{{projectName}}/ui/components/label";
+
+export default function SignUpForm({
+  onSwitchToSignIn,
+}: {
+  onSwitchToSignIn: () => void;
+}) {
+  const navigate = useNavigate();
+
+  const form = useForm({
+    defaultValues: {
+      email: "",
+      password: "",
+      name: "",
+    },
+    onSubmit: async ({ value }) => {
+      await authClient.signUp.email(
+        {
+          email: value.email,
+          password: value.password,
+          name: value.name,
+        },
+        {
+          onSuccess: () => {
+            navigate("/dashboard");
+            toast.success("Sign up successful");
+          },
+          onError: (error) => {
+            toast.error(error.error.message || error.error.statusText);
+          },
+        },
+      );
+    },
+    validators: {
+      onSubmit: z.object({
+        name: z.string().min(2, "Name must be at least 2 characters"),
+        email: z.email("Invalid email address"),
+        password: z.string().min(8, "Password must be at least 8 characters"),
+      }),
+    },
+  });
+
+  return (
+    <div className="mx-auto mt-10 w-full max-w-md p-6">
+      <h1 className="mb-6 text-center text-3xl font-bold">Create Account</h1>
+
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          form.handleSubmit();
+        }}
+        className="space-y-4"
+      >
+        <div>
+          <form.Field name="name">
+            {(field) => (
+              <div className="space-y-2">
+                <Label htmlFor={field.name}>Name</Label>
+                <Input
+                  id={field.name}
+                  name={field.name}
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+                {field.state.meta.errors.map((error, index) => (
+                  <p key={\`\${field.name}-error-\${index}\`} className="text-red-500">
+                    {error?.message}
+                  </p>
+                ))}
+              </div>
+            )}
+          </form.Field>
+        </div>
+
+        <div>
+          <form.Field name="email">
+            {(field) => (
+              <div className="space-y-2">
+                <Label htmlFor={field.name}>Email</Label>
+                <Input
+                  id={field.name}
+                  name={field.name}
+                  type="email"
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+                {field.state.meta.errors.map((error, index) => (
+                  <p key={\`\${field.name}-error-\${index}\`} className="text-red-500">
+                    {error?.message}
+                  </p>
+                ))}
+              </div>
+            )}
+          </form.Field>
+        </div>
+
+        <div>
+          <form.Field name="password">
+            {(field) => (
+              <div className="space-y-2">
+                <Label htmlFor={field.name}>Password</Label>
+                <Input
+                  id={field.name}
+                  name={field.name}
+                  type="password"
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+                {field.state.meta.errors.map((error, index) => (
+                  <p key={\`\${field.name}-error-\${index}\`} className="text-red-500">
+                    {error?.message}
+                  </p>
+                ))}
+              </div>
+            )}
+          </form.Field>
+        </div>
+
+        <form.Subscribe
+          selector={(state) => ({
+            canSubmit: state.canSubmit,
+            isSubmitting: state.isSubmitting,
+          })}
+        >
+          {({ canSubmit, isSubmitting }) => (
+            <Button type="submit" className="w-full" disabled={!canSubmit || isSubmitting}>
+              {isSubmitting ? "Submitting..." : "Sign Up"}
+            </Button>
+          )}
+        </form.Subscribe>
+      </form>
+
+      <div className="mt-4 text-center">
+        <Button
+          variant="link"
+          onClick={onSwitchToSignIn}
+          className="text-indigo-600 hover:text-indigo-800"
+        >
+          Already have an account? Sign In
+        </Button>
+      </div>
+    </div>
+  );
+}
+`],
+	["auth/better-auth/convex/web/react/react-router/src/components/user-menu.tsx.hbs", `import { useNavigate } from "react-router";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@{{projectName}}/ui/components/dropdown-menu";
+import { authClient } from "@/lib/auth-client";
+import { useQuery } from "convex/react";
+import { api } from "@{{projectName}}/backend/convex/_generated/api";
+
+import { Button } from "@{{projectName}}/ui/components/button";
+
+export default function UserMenu() {
+  const navigate = useNavigate();
+  const user = useQuery(api.auth.getCurrentUser);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger render={<Button variant="outline" />}>
+        {user?.name}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="bg-card">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>My Account</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>{user?.email}</DropdownMenuItem>
+          <DropdownMenuItem
+            variant="destructive"
+            onClick={() => {
+              authClient.signOut({
+                fetchOptions: {
+                  onSuccess: () => {
+                    navigate("/dashboard");
+                  },
+                },
+              });
+            }}
+          >
+            Sign Out
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+`],
+	["auth/better-auth/convex/web/react/react-router/src/lib/auth-client.ts.hbs", `import { createAuthClient } from "better-auth/react";
+import {
+  convexClient,
+  crossDomainClient,
+} from "@convex-dev/better-auth/client/plugins";
+import { env } from "@{{projectName}}/env/web";
+
+export const authClient = createAuthClient({
+  baseURL: env.VITE_CONVEX_SITE_URL,
+  plugins: [crossDomainClient(), convexClient()],
+});
+`],
+	["auth/better-auth/convex/web/react/react-router/src/routes/dashboard.tsx.hbs", `import SignInForm from "@/components/sign-in-form";
+import SignUpForm from "@/components/sign-up-form";
+import UserMenu from "@/components/user-menu";
+import { api } from "@{{projectName}}/backend/convex/_generated/api";
+import {
+  Authenticated,
+  AuthLoading,
+  Unauthenticated,
+  useQuery,
+} from "convex/react";
+import { useState } from "react";
+
+function PrivateDashboardContent() {
+  const privateData = useQuery(api.privateData.get);
+
+  return (
+    <div>
+      <h1>Dashboard</h1>
+      <p>privateData: {privateData?.message}</p>
+      <UserMenu />
+    </div>
+  );
+}
+
+export default function Dashboard() {
+  const [showSignIn, setShowSignIn] = useState(false);
+
+  return (
+    <>
+      <Authenticated>
+        <PrivateDashboardContent />
+      </Authenticated>
+      <Unauthenticated>
+        {showSignIn ? (
+          <SignInForm onSwitchToSignUp={() => setShowSignIn(false)} />
+        ) : (
+          <SignUpForm onSwitchToSignIn={() => setShowSignIn(true)} />
+        )}
+      </Unauthenticated>
+      <AuthLoading>
+        <div>Loading...</div>
+      </AuthLoading>
+    </>
+  );
+}
 `],
 	["auth/better-auth/convex/web/react/tanstack-router/src/components/sign-in-form.tsx.hbs", `import { authClient } from "@/lib/auth-client";
 import { useForm } from "@tanstack/react-form";
@@ -7661,8 +8074,8 @@ export default function SignInForm({
                                     onBlur={field.handleBlur}
                                     onChange={(e) => field.handleChange(e.target.value)}
                                 />
-                                {field.state.meta.errors.map((error) => (
-                                    <p key={error?.message} className="text-red-500">
+                                {field.state.meta.errors.map((error, index) => (
+                                    <p key={\`\${field.name}-error-\${index}\`} className="text-red-500">
                                         {error?.message}
                                     </p>
                                 ))}
@@ -7684,8 +8097,8 @@ export default function SignInForm({
                                     onBlur={field.handleBlur}
                                     onChange={(e) => field.handleChange(e.target.value)}
                                 />
-                                {field.state.meta.errors.map((error) => (
-                                    <p key={error?.message} className="text-red-500">
+                                {field.state.meta.errors.map((error, index) => (
+                                    <p key={\`\${field.name}-error-\${index}\`} className="text-red-500">
                                         {error?.message}
                                     </p>
                                 ))}
@@ -7797,8 +8210,8 @@ export default function SignUpForm({
                                     onBlur={field.handleBlur}
                                     onChange={(e) => field.handleChange(e.target.value)}
                                 />
-                                {field.state.meta.errors.map((error) => (
-                                    <p key={error?.message} className="text-red-500">
+                                {field.state.meta.errors.map((error, index) => (
+                                    <p key={\`\${field.name}-error-\${index}\`} className="text-red-500">
                                         {error?.message}
                                     </p>
                                 ))}
@@ -7820,8 +8233,8 @@ export default function SignUpForm({
                                     onBlur={field.handleBlur}
                                     onChange={(e) => field.handleChange(e.target.value)}
                                 />
-                                {field.state.meta.errors.map((error) => (
-                                    <p key={error?.message} className="text-red-500">
+                                {field.state.meta.errors.map((error, index) => (
+                                    <p key={\`\${field.name}-error-\${index}\`} className="text-red-500">
                                         {error?.message}
                                     </p>
                                 ))}
@@ -7843,8 +8256,8 @@ export default function SignUpForm({
                                     onBlur={field.handleBlur}
                                     onChange={(e) => field.handleChange(e.target.value)}
                                 />
-                                {field.state.meta.errors.map((error) => (
-                                    <p key={error?.message} className="text-red-500">
+                                {field.state.meta.errors.map((error, index) => (
+                                    <p key={\`\${field.name}-error-\${index}\`} className="text-red-500">
                                         {error?.message}
                                     </p>
                                 ))}
@@ -7961,18 +8374,25 @@ export const Route = createFileRoute("/dashboard")({
   component: RouteComponent,
 });
 
+function PrivateDashboardContent() {
+  const privateData = useQuery(api.privateData.get);
+
+  return (
+    <div>
+      <h1>Dashboard</h1>
+      <p>privateData: {privateData?.message}</p>
+      <UserMenu />
+    </div>
+  );
+}
+
 function RouteComponent() {
   const [showSignIn, setShowSignIn] = useState(false);
-  const privateData = useQuery(api.privateData.get);
 
   return (
     <>
       <Authenticated>
-        <div>
-          <h1>Dashboard</h1>
-          <p>privateData: {privateData?.message}</p>
-          <UserMenu />
-        </div>
+        <PrivateDashboardContent />
       </Authenticated>
       <Unauthenticated>
         {showSignIn ? (
@@ -24802,6 +25222,9 @@ export const unstable_settings = {
 
 {{#if (eq backend "convex")}}
 const convex = new ConvexReactClient(env.EXPO_PUBLIC_CONVEX_URL, {
+  {{#if (eq auth "better-auth")}}
+  expectAuth: true,
+  {{/if}}
   unsavedChangesWarning: false,
 });
 {{/if}}
@@ -25850,6 +26273,9 @@ export const unstable_settings = {
 
 {{#if (eq backend "convex")}}
 const convex = new ConvexReactClient(env.EXPO_PUBLIC_CONVEX_URL, {
+  {{#if (eq auth "better-auth")}}
+  expectAuth: true,
+  {{/if}}
   unsavedChangesWarning: false,
 });
 {{/if}}
@@ -27150,6 +27576,9 @@ export const unstable_settings = {
 
 {{#if (eq backend "convex")}}
   const convex = new ConvexReactClient(env.EXPO_PUBLIC_CONVEX_URL, {
+    {{#if (eq auth "better-auth")}}
+    expectAuth: true,
+    {{/if}}
     unsavedChangesWarning: false,
   });
 {{/if}}
@@ -27946,7 +28375,7 @@ module.exports = uniwindConfig;
     "expo-secure-store": "~55.0.8",
     "expo-status-bar": "~55.0.4",
     "expo-web-browser": "~55.0.9",
-    "heroui-native": "^1.0.0-rc.3",
+    "heroui-native": "^1.0.0",
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "react-native": "0.83.2",
@@ -27960,8 +28389,8 @@ module.exports = uniwindConfig;
     "react-native-worklets": "0.7.2",
     "tailwind-merge": "^3.4.0",
     "tailwind-variants": "^3.2.2",
-    "tailwindcss": "^4.1.18",
-    "uniwind": "^1.4.0"
+    "tailwindcss": "^4.2.2",
+    "uniwind": "^1.6.0"
   },
   "devDependencies": {
     "@types/node": "^24.10.0",
@@ -28830,6 +29259,9 @@ import { ConvexReactClient } from "convex/react";
 import { env } from "@{{projectName}}/env/web";
   {{#if (eq auth "clerk")}}
 import { ConvexProviderWithClerk } from "convex/react-clerk";
+  {{else if (eq auth "better-auth")}}
+import { ConvexBetterAuthProvider } from "@convex-dev/better-auth/react";
+import { authClient } from "@/lib/auth-client";
   {{else}}
 import { ConvexProvider } from "convex/react";
   {{/if}}
@@ -28899,10 +29331,18 @@ export function Layout({ children }: { children: React.ReactNode }) {
 {{#if (eq backend "convex")}}
 {{#if (eq auth "clerk")}}
 export default function App({ loaderData }: Route.ComponentProps) {
+{{else if (eq auth "better-auth")}}
+export default function App() {
 {{else}}
 export default function App() {
 {{/if}}
+  {{#if (eq auth "better-auth")}}
+  const convex = new ConvexReactClient(env.VITE_CONVEX_URL, {
+    expectAuth: true,
+  });
+  {{else}}
   const convex = new ConvexReactClient(env.VITE_CONVEX_URL);
+  {{/if}}
   {{#if (eq auth "clerk")}}
   return (
     <ClerkProvider loaderData={loaderData}>
@@ -28922,6 +29362,23 @@ export default function App() {
       </ConvexProviderWithClerk>
     </ClerkProvider>
   );
+  {{else if (eq auth "better-auth")}}
+  return (
+    <ConvexBetterAuthProvider client={convex} authClient={authClient}>
+      <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>
+    </ConvexBetterAuthProvider>
+  );
   {{else}}
   return (
     <ConvexProvider client={convex}>
@@ -29340,7 +29797,13 @@ import { routeTree } from "./routeTree.gen";
   {{else}}
   import { ConvexProvider } from "convex/react";
   {{/if}}
+  {{#if (eq auth "better-auth")}}
+  const convex = new ConvexReactClient(env.VITE_CONVEX_URL, {
+    expectAuth: true,
+  });
+  {{else}}
   const convex = new ConvexReactClient(env.VITE_CONVEX_URL);
+  {{/if}}
 {{/if}}
 
 {{#if (and (eq auth "clerk") (ne backend "convex") (ne api "none"))}}
@@ -32631,7 +33094,7 @@ function SuccessPage() {
 </div>
 `]
 ]);
-const TEMPLATE_COUNT = 457;
+const TEMPLATE_COUNT = 462;
 
 //#endregion
 export { EMBEDDED_TEMPLATES, GeneratorError, Handlebars, TEMPLATE_COUNT, VirtualFileSystem, dependencyVersionMap, generate, generateReproducibleCommand, isBinaryFile, processAddonTemplates, processAddonsDeps, processFileContent, processTemplateString, transformFilename, writeBtsConfigToVfs };