@helloleo/plugins 0.2.0-beta.6 → 0.2.0-beta.7

package/dist/templates/tanstack-start-2026-06-18/package.json

@@ -87,6 +87,7 @@
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.3",
     "jsdom": "^29.1.1",
+    "oxfmt": "^0.57.0",
     "oxlint": "^1.72.0",
     "typescript": "^6.0.3",
     "vite": "^8.1.3",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helloleo/plugins",
-  "version": "0.2.0-beta.6",
+  "version": "0.2.0-beta.7",
   "description": "OpenCode plugins for HelloLeo",
   "license": "UNLICENSED",
   "type": "module",

package/src/index.ts

@@ -1,8 +1,8 @@
 export { InspectHttpPlugin } from "./tools/inspect-http.ts";
 export { RemovePlugin } from "./tools/remove.ts";
 export { ScaffoldPlugin } from "./tools/scaffold.ts";
+export { SetupAuthenticationPlugin } from "./tools/setup-authentication/index.ts";
 export { SetupNetsuitePlugin } from "./tools/setup-netsuite.ts";
-export { SetupPasswordAuthPlugin } from "./tools/setup-password-auth.ts";
 // export { CreatePlanPlugin } from "./tools/create-plan.ts";
 // export { ListPlansPlugin } from "./tools/list-plans.ts";
 // export { ModifyPlanPlugin } from "./tools/modify-plan.ts";

package/src/templates/tanstack-start-2026-06-18/package.json

@@ -87,6 +87,7 @@
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.3",
     "jsdom": "^29.1.1",
+    "oxfmt": "^0.57.0",
     "oxlint": "^1.72.0",
     "typescript": "^6.0.3",
     "vite": "^8.1.3",

package/src/tools/scaffold.ts

@@ -106,6 +106,7 @@ export const scaffold = tool({
 			"- Always fetch data with react-query (useQuery and useMutation).",
 			"",
 			"Next: read src/routes/index.tsx and continue with the user's request.",
+			"For authentication (password and/or OAuth), call setup_authentication.",
 			"For NetSuite projects, call setup_netsuite.",
 		].join("\n");
 	},

package/src/tools/setup-authentication/auth-files.ts

@@ -0,0 +1,132 @@
+import type { OAuthProvider, Provider } from "./constants.ts";
+
+/**
+ * getAuth() builds the betterAuth instance lazily, on first call from
+ * INSIDE a request -- never a module-scope `export const auth =
+ * betterAuth(...)` like better-auth's own docs show. `db` (the app's #/db)
+ * is a lazy Proxy over the D1 binding, and env.* Worker secrets don't exist
+ * until a request is in flight; touching either while workerd boots the
+ * isolate throws. `instance`'s type is inferred from `buildAuth`'s own
+ * return type (not a hand-written `BetterAuthOptions` annotation) -- with
+ * secret/clientId/clientSecret resolved to plain `string` at runtime via
+ * requireEnv, an explicit `ReturnType<typeof betterAuth>` annotation
+ * mismatches on optionality and fails to typecheck.
+ */
+export function authLibTs(providers: Provider[]): string {
+	const hasPassword = providers.includes("password");
+	const oauth = providers.filter((p): p is OAuthProvider => p !== "password");
+
+	const envFields = [
+		"BETTER_AUTH_SECRET?: string",
+		"BETTER_AUTH_URL?: string",
+		...oauth.flatMap((p) => {
+			const prefix = p.toUpperCase();
+			return [
+				`${prefix}_CLIENT_ID?: string`,
+				`${prefix}_CLIENT_SECRET?: string`,
+			];
+		}),
+	].join("\n    ");
+
+	const socialProvidersBlock = oauth.length
+		? `
+    socialProviders: {
+${oauth
+	.map((p) => {
+		const prefix = p.toUpperCase();
+		return `      ${p}: { clientId: requireEnv(e.${prefix}_CLIENT_ID, '${prefix}_CLIENT_ID'), clientSecret: requireEnv(e.${prefix}_CLIENT_SECRET, '${prefix}_CLIENT_SECRET') },`;
+	})
+	.join("\n")}
+    },`
+		: "";
+
+	const requireEnvFn = oauth.length
+		? `
+function requireEnv(value: string | undefined, name: string): string {
+  if (!value) {
+    throw new Error(\`\${name} is not set. Add it to .env (dev) or run \\\`wrangler secret put \${name}\\\` (prod).\`)
+  }
+  return value
+}
+`
+		: "";
+
+	return `import { betterAuth } from 'better-auth'
+import { drizzleAdapter } from '@better-auth/drizzle-adapter'
+import { tanstackStartCookies } from 'better-auth/tanstack-start'
+import { db } from '#/db'
+import * as schema from '#/db/schema'
+import { env } from '@helloleo/runtime'
+
+/*
+ * buildAuth() only runs from INSIDE a request (see getAuth() below) --
+ * never call it at module scope. \`db\` is a lazy Proxy over the D1 binding
+ * and env.* Worker secrets don't exist until a request is in flight;
+ * touching either while workerd boots the isolate throws.
+ */
+${requireEnvFn}
+function buildAuth() {
+  const e = env as {
+    ${envFields}
+  }
+
+  return betterAuth({
+    secret: e.BETTER_AUTH_SECRET,
+    baseURL: e.BETTER_AUTH_URL,
+    database: drizzleAdapter(db, { provider: 'sqlite', schema }),
+    emailAndPassword: {
+      enabled: ${hasPassword},
+    },${socialProvidersBlock}
+    plugins: [tanstackStartCookies()],
+  })
+}
+
+let instance: ReturnType<typeof buildAuth> | undefined
+
+export function getAuth() {
+  if (!instance) instance = buildAuth()
+  return instance
+}
+`;
+}
+
+export function authClientTs(): string {
+	return `import { createAuthClient } from 'better-auth/react'
+
+export const authClient = createAuthClient()
+`;
+}
+
+export function authServerTs(): string {
+	return `import { createServerFn } from '@tanstack/react-start'
+import { getRequestHeaders } from '@tanstack/react-start/server'
+import { getAuth } from '#/lib/auth'
+
+export const getSession = createServerFn({ method: 'GET' }).handler(async () => {
+  const headers = getRequestHeaders()
+  return getAuth().api.getSession({ headers })
+})
+
+export const ensureSession = createServerFn({ method: 'GET' }).handler(async () => {
+  const headers = getRequestHeaders()
+  const session = await getAuth().api.getSession({ headers })
+  if (!session) throw new Error('Unauthorized')
+  return session
+})
+`;
+}
+
+export function authRouteTs(): string {
+	return `import { createFileRoute } from '@tanstack/react-router'
+import { getAuth } from '#/lib/auth'
+
+export const Route = createFileRoute('/api/auth/$')({
+  server: {
+    handlers: {
+      GET: ({ request }: { request: Request }) => getAuth().handler(request),
+      POST: ({ request }: { request: Request }) => getAuth().handler(request),
+    },
+  },
+})
+`;
+}

package/src/tools/setup-authentication/constants.ts

@@ -0,0 +1,19 @@
+export const PROVIDERS = [
+	"password",
+	"google",
+	"github",
+	"discord",
+	"microsoft",
+] as const;
+
+export type Provider = (typeof PROVIDERS)[number];
+export type OAuthProvider = Exclude<Provider, "password">;
+
+export const PROVIDER_LABELS: Record<OAuthProvider, string> = {
+	google: "Google",
+	github: "GitHub",
+	discord: "Discord",
+	microsoft: "Microsoft",
+};
+
+export const BETTER_AUTH_VERSION = "^1.6.23";

package/src/tools/setup-authentication/db-schema.ts

@@ -0,0 +1,96 @@
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+
+/**
+ * user/session/account/verification, hand-written to match better-auth's
+ * documented drizzle/sqlite schema exactly (text ids, no relations --
+ * experimental.joins is not enabled). Appended into src/db/schema.ts --
+ * drizzle.config.ts hardcodes that file as the one schema source, and this
+ * template's dev/prod pipeline is drizzle-kit push / wrangler d1
+ * migrations, not better-auth's own Kysely-based migration runner.
+ */
+const SCHEMA_MARKER = "sqliteTable('user'";
+
+function authTablesBlock(): string {
+	return `
+export const user = sqliteTable('user', {
+  id: text('id').primaryKey(),
+  name: text('name').notNull(),
+  email: text('email').notNull().unique(),
+  emailVerified: integer('email_verified', { mode: 'boolean' }).default(false).notNull(),
+  image: text('image'),
+  createdAt: integer('created_at', { mode: 'timestamp_ms' })
+    .default(sql\`(cast(unixepoch('subsecond') * 1000 as integer))\`)
+    .notNull(),
+  updatedAt: integer('updated_at', { mode: 'timestamp_ms' })
+    .default(sql\`(cast(unixepoch('subsecond') * 1000 as integer))\`)
+    .$onUpdate(() => new Date())
+    .notNull(),
+})
+
+export const session = sqliteTable('session', {
+  id: text('id').primaryKey(),
+  expiresAt: integer('expires_at', { mode: 'timestamp_ms' }).notNull(),
+  token: text('token').notNull().unique(),
+  createdAt: integer('created_at', { mode: 'timestamp_ms' })
+    .default(sql\`(cast(unixepoch('subsecond') * 1000 as integer))\`)
+    .notNull(),
+  updatedAt: integer('updated_at', { mode: 'timestamp_ms' })
+    .$onUpdate(() => new Date())
+    .notNull(),
+  ipAddress: text('ip_address'),
+  userAgent: text('user_agent'),
+  userId: text('user_id')
+    .notNull()
+    .references(() => user.id, { onDelete: 'cascade' }),
+})
+
+export const account = sqliteTable('account', {
+  id: text('id').primaryKey(),
+  accountId: text('account_id').notNull(),
+  providerId: text('provider_id').notNull(),
+  userId: text('user_id')
+    .notNull()
+    .references(() => user.id, { onDelete: 'cascade' }),
+  accessToken: text('access_token'),
+  refreshToken: text('refresh_token'),
+  idToken: text('id_token'),
+  accessTokenExpiresAt: integer('access_token_expires_at', { mode: 'timestamp_ms' }),
+  refreshTokenExpiresAt: integer('refresh_token_expires_at', { mode: 'timestamp_ms' }),
+  scope: text('scope'),
+  password: text('password'),
+  createdAt: integer('created_at', { mode: 'timestamp_ms' })
+    .default(sql\`(cast(unixepoch('subsecond') * 1000 as integer))\`)
+    .notNull(),
+  updatedAt: integer('updated_at', { mode: 'timestamp_ms' })
+    .$onUpdate(() => new Date())
+    .notNull(),
+})
+
+export const verification = sqliteTable('verification', {
+  id: text('id').primaryKey(),
+  identifier: text('identifier').notNull(),
+  value: text('value').notNull(),
+  expiresAt: integer('expires_at', { mode: 'timestamp_ms' }).notNull(),
+  createdAt: integer('created_at', { mode: 'timestamp_ms' })
+    .default(sql\`(cast(unixepoch('subsecond') * 1000 as integer))\`)
+    .notNull(),
+  updatedAt: integer('updated_at', { mode: 'timestamp_ms' })
+    .default(sql\`(cast(unixepoch('subsecond') * 1000 as integer))\`)
+    .$onUpdate(() => new Date())
+    .notNull(),
+})
+`;
+}
+
+/** Appends the auth tables to src/db/schema.ts. Idempotent; returns whether it wrote anything. */
+export async function appendAuthTables(dir: string): Promise<boolean> {
+	const schemaPath = path.join(dir, "src", "db", "schema.ts");
+	const current = await readFile(schemaPath, "utf8").catch(() => null);
+	if (current === null) {
+		throw new Error("src/db/schema.ts not found -- run scaffold first.");
+	}
+	if (current.includes(SCHEMA_MARKER)) return false;
+	await Bun.write(schemaPath, `${current.trimEnd()}\n${authTablesBlock()}`);
+	return true;
+}

package/src/tools/setup-authentication/index.ts

@@ -0,0 +1,119 @@
+import path from "node:path";
+import type { Plugin } from "@opencode-ai/plugin";
+import { tool } from "@opencode-ai/plugin";
+import { z } from "zod/v4";
+import {
+	authClientTs,
+	authLibTs,
+	authRouteTs,
+	authServerTs,
+} from "./auth-files.ts";
+import type { OAuthProvider } from "./constants.ts";
+import { PROVIDER_LABELS, PROVIDERS } from "./constants.ts";
+import { appendAuthTables } from "./db-schema.ts";
+import { addAuthDependencies } from "./package-json.ts";
+import {
+	authedLayoutTsx,
+	dashboardPageTsx,
+	loginPageTsx,
+	signupPageTsx,
+} from "./pages.ts";
+
+/**
+ * Adds authentication on top of an existing scaffold via better-auth:
+ * email/password and/or social sign-in (google/github/discord/microsoft),
+ * a drizzle-backed session store, and login/signup routes.
+ *
+ * Only additive files are written, except `src/db/schema.ts` (appended,
+ * never replaced) and `package.json` (two deps added if missing).
+ *
+ * Mutually exclusive with setup_netsuite: both own src/routes/login.tsx and
+ * the app's one auth strategy. Called AFTER `scaffold`, never instead of it.
+ */
+export const setupAuthentication = tool({
+	description:
+		"Add authentication to an existing project via better-auth. Call scaffold first, " +
+		"then this. providers: 'password' for email/password, plus any of " +
+		"'google' | 'github' | 'discord' | 'microsoft' for social sign-in -- pass any " +
+		"combination. Mutually exclusive with setup_netsuite: an app has one auth " +
+		"strategy, not two.",
+	args: {
+		providers: z
+			.array(z.enum(PROVIDERS))
+			.min(1)
+			.describe("Auth methods to enable, e.g. ['password', 'google']"),
+	},
+	async execute({ providers }, context) {
+		const dir = context.directory;
+		const hasPassword = providers.includes("password");
+		const oauth = providers.filter((p): p is OAuthProvider => p !== "password");
+
+		const files: [string, string][] = [
+			[path.join("src", "lib", "auth.ts"), authLibTs(providers)],
+			[path.join("src", "lib", "auth-client.ts"), authClientTs()],
+			[path.join("src", "lib", "auth-server.ts"), authServerTs()],
+			[path.join("src", "routes", "api", "auth", "$.ts"), authRouteTs()],
+			[path.join("src", "routes", "_authed.tsx"), authedLayoutTsx()],
+			[
+				path.join("src", "routes", "_authed", "dashboard.tsx"),
+				dashboardPageTsx(),
+			],
+			[
+				path.join("src", "routes", "login.tsx"),
+				loginPageTsx(hasPassword, oauth),
+			],
+		];
+		if (hasPassword) {
+			files.push([path.join("src", "routes", "signup.tsx"), signupPageTsx()]);
+		}
+
+		for (const [filePath, content] of files) {
+			await Bun.write(path.join(dir, filePath), content);
+		}
+
+		const schemaAppended = await appendAuthTables(dir);
+		const depsAdded = await addAuthDependencies(dir);
+
+		const envLines = [
+			"  - dev (.env): BETTER_AUTH_SECRET=<random>, BETTER_AUTH_URL=http://localhost:3000",
+			"  - prod: `wrangler secret put BETTER_AUTH_SECRET`, and BETTER_AUTH_URL as a var in wrangler.jsonc",
+		];
+		for (const p of oauth) {
+			const prefix = p.toUpperCase();
+			envLines.push(
+				`  - ${PROVIDER_LABELS[p]}: ${prefix}_CLIENT_ID / ${prefix}_CLIENT_SECRET (dev: .env, prod: wrangler secret put)`,
+			);
+		}
+
+		return [
+			`Wrote authentication (better-auth, providers: ${providers.join(", ")}):`,
+			"  - src/lib/auth.ts (lazy betterAuth instance -- read the comment on why it's not a module-scope export)",
+			"  - src/lib/auth-client.ts (React client -- authClient.signIn.email/social, signUp.email, signOut)",
+			"  - src/lib/auth-server.ts (getSession/ensureSession server functions, for SSR route guards)",
+			"  - src/routes/api/auth/$.ts (catch-all handler)",
+			"  - src/routes/_authed.tsx (pathless guard for protected routes)",
+			"  - src/routes/_authed/dashboard.tsx (example protected page -- _authed needs at least one child route or it collides with index.tsx on '/')",
+			`  - src/routes/login.tsx${hasPassword ? ", src/routes/signup.tsx" : ""}`,
+			`  - src/db/schema.ts ${schemaAppended ? "(appended user/session/account/verification tables)" : "(already had a `user` table, left as-is)"}`,
+			`  - package.json ${depsAdded ? "(added better-auth, @better-auth/drizzle-adapter)" : "(dependencies already present)"}`,
+			"",
+			"Run `bun install`, then `bun run db:push` (or just `bun dev`, which runs it first) to create the new tables.",
+			"",
+			"Required env vars/secrets:",
+			...envLines,
+			"",
+			"Add more protected pages under src/routes/_authed/ (e.g. _authed/settings.tsx -> /settings); they inherit the guard.",
+			"",
+			"Verify before shipping: password hashing defaults to scrypt via Node's crypto, exposed through the " +
+				"nodejs_compat flag (already on for this template) -- confirm a real sign-up/login round-trip works in `bun dev`.",
+			"",
+			"Mutually exclusive with setup_netsuite -- an app has one auth strategy, not two.",
+		].join("\n");
+	},
+});
+
+export const SetupAuthenticationPlugin: Plugin = async () => {
+	return {
+		tool: { setup_authentication: setupAuthentication },
+	};
+};

package/src/tools/setup-authentication/package-json.ts

@@ -0,0 +1,17 @@
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+import { BETTER_AUTH_VERSION } from "./constants.ts";
+
+/** Adds better-auth + its drizzle adapter to the project's package.json. Idempotent. */
+export async function addAuthDependencies(dir: string): Promise<boolean> {
+	const pkgPath = path.join(dir, "package.json");
+	const pkg = JSON.parse(await readFile(pkgPath, "utf8")) as {
+		dependencies?: Record<string, string>;
+	};
+	pkg.dependencies ??= {};
+	if (pkg.dependencies["better-auth"]) return false;
+	pkg.dependencies["better-auth"] = BETTER_AUTH_VERSION;
+	pkg.dependencies["@better-auth/drizzle-adapter"] = BETTER_AUTH_VERSION;
+	await Bun.write(pkgPath, `${JSON.stringify(pkg, null, 2)}\n`);
+	return true;
+}

package/src/tools/setup-authentication/pages.ts

@@ -0,0 +1,241 @@
+import type { OAuthProvider } from "./constants.ts";
+import { PROVIDER_LABELS } from "./constants.ts";
+
+function socialButtonsJsx(oauth: OAuthProvider[]): string {
+	return oauth
+		.map(
+			(p) => `          <Button
+            type="button"
+            variant="outline"
+            className="w-full"
+            onClick={() => authClient.signIn.social({ provider: '${p}', callbackURL: '/' })}
+          >
+            Continue with ${PROVIDER_LABELS[p]}
+          </Button>`,
+		)
+		.join("\n");
+}
+
+export function authedLayoutTsx(): string {
+	return `import { createFileRoute, redirect } from '@tanstack/react-router'
+import { getSession } from '#/lib/auth-server'
+
+// Pathless guard -- no URL segment of its own. Put protected pages under
+// src/routes/_authed/ (e.g. _authed/dashboard.tsx -> /dashboard) and they
+// inherit this beforeLoad. See src/routes/README.md, "Authenticated routes".
+export const Route = createFileRoute('/_authed')({
+  beforeLoad: async () => {
+    const session = await getSession()
+    if (!session) throw redirect({ to: '/login' })
+    return { user: session.user }
+  },
+})
+`;
+}
+
+export function loginPageTsx(
+	hasPassword: boolean,
+	oauth: OAuthProvider[],
+): string {
+	const social = oauth.length ? `\n${socialButtonsJsx(oauth)}\n` : "";
+
+	const divider =
+		oauth.length && hasPassword
+			? `
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <span className="w-full border-t" />
+            </div>
+            <div className="relative flex justify-center text-xs uppercase">
+              <span className="bg-card px-2 text-muted-foreground">Or continue with email</span>
+            </div>
+          </div>
+`
+			: "";
+
+	const passwordForm = hasPassword
+		? `
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input id="email" type="email" value={email} onChange={e => setEmail(e.target.value)} required autoComplete="email" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password">Password</Label>
+              <Input id="password" type="password" value={password} onChange={e => setPassword(e.target.value)} required autoComplete="current-password" />
+            </div>
+            {error && <p className="text-sm text-destructive">{error}</p>}
+            <Button type="submit" className="w-full" disabled={loading}>
+              {loading ? 'Logging in…' : 'Log in'}
+            </Button>
+            <p className="text-sm text-center text-muted-foreground">
+              No account? <Link to="/signup" className="underline">Sign up</Link>
+            </p>
+          </form>
+`
+		: "";
+
+	const stateAndHandler = hasPassword
+		? `
+  const router = useRouter()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+    const { error } = await authClient.signIn.email({ email, password })
+    setLoading(false)
+    if (error) {
+      setError(error.message ?? 'Something went wrong.')
+      return
+    }
+    router.navigate({ to: '/' })
+  }
+`
+		: "";
+
+	const imports = [
+		hasPassword
+			? "import { createFileRoute, Link, useRouter } from '@tanstack/react-router'"
+			: "import { createFileRoute } from '@tanstack/react-router'",
+		hasPassword ? "import { useState } from 'react'" : "",
+		"import { authClient } from '#/lib/auth-client'",
+		"import { Button } from '#/components/ui/button'",
+		hasPassword ? "import { Input } from '#/components/ui/input'" : "",
+		hasPassword ? "import { Label } from '#/components/ui/label'" : "",
+		"import { Card, CardContent, CardHeader, CardTitle } from '#/components/ui/card'",
+	]
+		.filter(Boolean)
+		.join("\n");
+
+	return `${imports}
+
+export const Route = createFileRoute('/login')({
+  component: LoginPage,
+})
+
+function LoginPage() {${stateAndHandler}
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-4">
+      <Card className="w-full max-w-sm">
+        <CardHeader>
+          <CardTitle>Log in</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">${social}${divider}${passwordForm}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+`;
+}
+
+export function signupPageTsx(): string {
+	return `import { createFileRoute, Link, useRouter } from '@tanstack/react-router'
+import { useState } from 'react'
+import { authClient } from '#/lib/auth-client'
+import { Button } from '#/components/ui/button'
+import { Input } from '#/components/ui/input'
+import { Label } from '#/components/ui/label'
+import { Card, CardContent, CardHeader, CardTitle } from '#/components/ui/card'
+
+export const Route = createFileRoute('/signup')({
+  component: SignupPage,
+})
+
+function SignupPage() {
+  const router = useRouter()
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+    const { error } = await authClient.signUp.email({ name, email, password })
+    setLoading(false)
+    if (error) {
+      setError(error.message ?? 'Something went wrong.')
+      return
+    }
+    router.navigate({ to: '/' })
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-4">
+      <Card className="w-full max-w-sm">
+        <CardHeader>
+          <CardTitle>Sign up</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="name">Name</Label>
+              <Input id="name" type="text" value={name} onChange={e => setName(e.target.value)} required autoComplete="name" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input id="email" type="email" value={email} onChange={e => setEmail(e.target.value)} required autoComplete="email" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password">Password</Label>
+              <Input id="password" type="password" value={password} onChange={e => setPassword(e.target.value)} required autoComplete="new-password" minLength={8} />
+            </div>
+            {error && <p className="text-sm text-destructive">{error}</p>}
+            <Button type="submit" className="w-full" disabled={loading}>
+              {loading ? 'Signing up…' : 'Sign up'}
+            </Button>
+            <p className="text-sm text-center text-muted-foreground">
+              Already have an account? <Link to="/login" className="underline">Log in</Link>
+            </p>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+`;
+}
+
+export function dashboardPageTsx(): string {
+	return `import { createFileRoute, useRouter } from '@tanstack/react-router'
+import { authClient } from '#/lib/auth-client'
+import { Button } from '#/components/ui/button'
+
+// Example protected page -- _authed.tsx needs at least one child route or
+// it collides with index.tsx on path "/" and \`tsr generate\` fails. Replace
+// this, or add more pages alongside it under src/routes/_authed/.
+export const Route = createFileRoute('/_authed/dashboard')({
+  component: DashboardPage,
+})
+
+function DashboardPage() {
+  const router = useRouter()
+  const { data: session } = authClient.useSession()
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-4">
+      <div className="text-center space-y-4">
+        <p className="text-lg">Signed in as {session?.user.email}</p>
+        <Button
+          onClick={() =>
+            authClient.signOut({
+              fetchOptions: { onSuccess: () => router.navigate({ to: '/login' }) },
+            })
+          }
+        >
+          Sign out
+        </Button>
+      </div>
+    </div>
+  )
+}
+`;
+}