@getjack/jack 0.1.32 → 0.1.33

package/templates/cron/src/webhooks.ts

@@ -0,0 +1,95 @@
+// Convert an ArrayBuffer to hex string
+function bufferToHex(buffer: ArrayBuffer): string {
+	const bytes = new Uint8Array(buffer);
+	const hexChars: string[] = [];
+	for (const byte of bytes) {
+		hexChars.push(byte.toString(16).padStart(2, "0"));
+	}
+	return hexChars.join("");
+}
+
+// Verify HMAC-SHA256 webhook signature
+// Expected header format: sha256=<hex-encoded-signature>
+export async function verifyWebhookSignature(
+	payload: string,
+	signatureHeader: string,
+	secret: string,
+): Promise<boolean> {
+	if (!signatureHeader || !secret) {
+		return false;
+	}
+
+	// Parse the signature header
+	const parts = signatureHeader.split("=");
+	if (parts.length !== 2 || parts[0] !== "sha256") {
+		return false;
+	}
+
+	const receivedSignature = parts[1];
+	if (!receivedSignature) {
+		return false;
+	}
+
+	// Import the secret as a CryptoKey
+	const encoder = new TextEncoder();
+	const key = await crypto.subtle.importKey(
+		"raw",
+		encoder.encode(secret),
+		{ name: "HMAC", hash: "SHA-256" },
+		false,
+		["sign"],
+	);
+
+	// Sign the payload
+	const signatureBuffer = await crypto.subtle.sign(
+		"HMAC",
+		key,
+		encoder.encode(payload),
+	);
+
+	// Convert to hex and compare
+	const expectedSignature = bufferToHex(signatureBuffer);
+
+	// Constant-time comparison
+	if (receivedSignature.length !== expectedSignature.length) {
+		return false;
+	}
+
+	let mismatch = 0;
+	for (let i = 0; i < receivedSignature.length; i++) {
+		mismatch |=
+			receivedSignature.charCodeAt(i) ^ expectedSignature.charCodeAt(i);
+	}
+
+	return mismatch === 0;
+}
+
+export interface WebhookEventInput {
+	source?: string;
+	eventType?: string;
+	payload: string;
+}
+
+// Log a webhook event to D1
+export async function logWebhookEvent(
+	db: D1Database,
+	input: WebhookEventInput,
+): Promise<string> {
+	const id = crypto.randomUUID();
+	const now = Math.floor(Date.now() / 1000);
+
+	await db
+		.prepare(
+			"INSERT INTO webhook_events (id, source, event_type, payload, status, created_at) VALUES (?, ?, ?, ?, 'received', ?)",
+		)
+		.bind(
+			id,
+			input.source || "unknown",
+			input.eventType || null,
+			input.payload,
+			now,
+		)
+		.run();
+
+	return id;
+}

package/templates/cron/tsconfig.json

@@ -0,0 +1,17 @@
+{
+	"compilerOptions": {
+		"target": "ESNext",
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"lib": ["ESNext"],
+		"types": ["@cloudflare/workers-types"],
+		"strict": true,
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"isolatedModules": true
+	},
+	"include": ["src/**/*.ts"],
+	"exclude": ["node_modules"]
+}

package/templates/cron/wrangler.jsonc

@@ -0,0 +1,11 @@
+{
+	"name": "jack-template",
+	"main": "src/index.ts",
+	"compatibility_date": "2024-12-01",
+	"d1_databases": [
+		{
+			"binding": "DB",
+			"database_name": "jack-template-db"
+		}
+	]
+}

package/templates/miniapp/.jack.json

@@ -16,7 +16,7 @@
 		"examples": ["simple dashboard", "farcaster miniapp"]
 	},
 	"agentContext": {
-		"summary": "A Farcaster miniapp using React + Vite frontend, Hono API on Cloudflare Workers, with D1 SQLite database and AI capabilities.",
+		"summary": "A Farcaster miniapp using React + Vite frontend, Hono API backend, with D1 SQLite database and AI capabilities.",
 		"full_text": "## Project Structure\n\n- `src/App.tsx` - React application entry point\n- `src/worker.ts` - Hono API routes for backend\n- `src/hooks/useAI.ts` - AI generation hook\n- `src/components/` - React components\n- `schema.sql` - D1 database schema\n- `wrangler.jsonc` - Cloudflare Workers configuration\n\n## Conventions\n\n- API routes are defined with Hono in `src/worker.ts`\n- Frontend uses Vite for bundling and is served as static assets\n- Database uses D1 prepared statements for queries\n- Secrets are managed via jack and pushed to Cloudflare\n- Wrangler is installed globally by jack, not in project dependencies\n\n## AI Feature\n\nThe template includes a `useAI()` hook for AI text generation.\n\n### Usage\n```tsx\nconst { generate, isLoading, error } = useAI();\nconst result = await generate('Your prompt here');\n// result.result = AI response text\n// result.provider = 'openai' | 'workers-ai'\n```\n\n### Providers\n- **Workers AI** (default): Free, uses Llama 3.1 8B. No API key needed.\n- **OpenAI** (optional): Better quality with gpt-4o-mini. Requires OPENAI_API_KEY.\n\n### Costs\n- **Workers AI**: Free (included in Cloudflare Workers)\n- **OpenAI gpt-4o-mini**: ~$0.0001 per request (~$0.15/1M input + $0.60/1M output tokens)\n- Typical usage (10 requests/day): ~$0.03/month\n\n### Rate Limiting\n- 10 requests per minute per IP address\n- Returns 429 with Retry-After header when exceeded\n- Rate limit headers: X-RateLimit-Limit, X-RateLimit-Remaining\n\n## Resources\n\n- [Farcaster Miniapp Docs](https://miniapps.farcaster.xyz)\n- [Hono Documentation](https://hono.dev)\n- [Cloudflare D1 Docs](https://developers.cloudflare.com/d1)\n- [Workers AI Models](https://developers.cloudflare.com/workers-ai/models/)"
 	},
 	"hooks": {

package/templates/nextjs/.jack.json

@@ -9,7 +9,7 @@
 	},
 	"agentContext": {
 		"summary": "A Next.js app deployed with jack. Supports SSR, SSG, and React Server Components.",
-		"full_text": "## Project Structure\n\n- `app/` - Next.js App Router pages and layouts\n- `public/` - Static assets\n- `open-next.config.ts` - OpenNext configuration\n- `wrangler.jsonc` - Worker configuration\n\n## Commands\n\n- `bun run dev` - Local development\n- `jack ship` - Deploy to production\n- `bun run preview` - Preview production build locally\n\n## Conventions\n\n- Uses App Router (not Pages Router)\n- SSR and SSG work out of the box\n- Server Components supported\n\n## Resources\n\n- [OpenNext Docs](https://opennext.js.org/cloudflare)\n- [Next.js App Router](https://nextjs.org/docs/app)"
+		"full_text": "## Project Structure\n\n- `app/` - Next.js App Router pages and layouts\n- `public/` - Static assets\n- `open-next.config.ts` - OpenNext configuration\n- `wrangler.jsonc` - Worker configuration\n\n## Commands\n\n- `bun run dev` - Local development\n- `jack ship` - Deploy to production\n- `bun run preview` - Preview production build locally\n\n## Conventions\n\n- Uses App Router (not Pages Router)\n- SSR and SSG work out of the box\n- Server Components supported\n\n## OpenNext on Cloudflare — Important Rules\n\nThis app runs via OpenNext on Cloudflare Workers. Follow these rules to avoid runtime errors:\n\n### Use window.location.href instead of router.push() for full-page transitions\nOpenNext has a broken webpack chunk URL resolver. Client-side navigation via `router.push()` to pages whose chunks aren't already loaded fails with `ChunkLoadError`. Use `window.location.href` for navigations that change auth state or cross major app sections. `<Link>` components work fine because Next.js prefetches their chunks.\n\n```tsx\n// BAD — may cause ChunkLoadError\nrouter.push('/dashboard');\nrouter.refresh();\n\n// GOOD — full reload, always works\nwindow.location.href = '/dashboard';\n```\n\n### Add `export const dynamic = 'force-dynamic'` to pages using getCloudflareContext()\nWithout this, Next.js tries to statically prerender the page at build time, which fails because `getCloudflareContext()` is only available at request time.\n\n### Edge middleware cannot use Node.js APIs\nNext.js middleware runs in the edge runtime. Do not import or call anything that requires Node.js built-in modules (e.g., `perf_hooks`, `fs`, `crypto` beyond Web Crypto).\n\n### nodejs_compat flag is required\nThe `wrangler.jsonc` must include `\"compatibility_flags\": [\"nodejs_compat\"]` and a recent `compatibility_date`.\n\n## Resources\n\n- [OpenNext Docs](https://opennext.js.org/cloudflare)\n- [Next.js App Router](https://nextjs.org/docs/app)"
 	},
 	"hooks": {
 		"postDeploy": [

package/templates/nextjs-auth/.jack.json

@@ -0,0 +1,44 @@
+{
+	"name": "nextjs-auth",
+	"description": "Next.js + Better Auth (self-hosted auth with D1)",
+	"secrets": ["BETTER_AUTH_SECRET"],
+	"capabilities": ["db"],
+	"requires": ["DB"],
+	"intent": {
+		"keywords": ["auth", "login", "signup", "better-auth", "authentication", "session", "nextjs"],
+		"examples": ["app with self-hosted auth", "login system", "authenticated app"]
+	},
+	"agentContext": {
+		"summary": "A Next.js app with Better Auth self-hosted authentication, email/password login, optional GitHub/Google OAuth, and D1 database.",
+		"full_text": "## Project Structure\n\n- `app/layout.tsx` - Root layout\n- `app/page.tsx` - Landing page with sign-in CTA\n- `app/login/page.tsx` - Login page with email/password form\n- `app/signup/page.tsx` - Sign up page\n- `app/dashboard/page.tsx` - Protected dashboard\n- `app/api/auth/[...all]/route.ts` - Better Auth API handler\n- `middleware.ts` - Edge-safe cookie-based auth middleware\n- `lib/auth.ts` - Better Auth server configuration\n- `lib/auth-client.ts` - Better Auth client for client components\n- `schema.sql` - D1 database schema\n\n## Authentication\n\nUses Better Auth with email/password. Auth routes are handled at `/api/auth/*`.\nWorks immediately with zero external dependencies — just email/password.\n\n### Client-side\n```tsx\nimport { authClient } from '@/lib/auth-client';\n\n// Sign up\nawait authClient.signUp.email({ email, password, name });\n\n// Sign in\nawait authClient.signIn.email({ email, password });\n\n// Get session\nconst { data: session } = authClient.useSession();\n\n// Sign out\nawait authClient.signOut();\n```\n\n### Server-side\n```tsx\nimport { getAuth } from '@/lib/auth';\nimport { headers } from 'next/headers';\n\nconst auth = await getAuth();\nconst session = await auth.api.getSession({ headers: await headers() });\n```\n\n## Optional Social Login (Add Later)\n\nSocial providers are pre-wired but disabled by default. Add keys via `jack secrets` to enable:\n\n**GitHub** (easiest — 30 second setup):\n1. Go to github.com/settings/developers → New OAuth App\n2. Set callback URL to `https://your-app.workers.dev/api/auth/callback/github`\n3. Run: `jack secrets` and add `GITHUB_CLIENT_ID` + `GITHUB_CLIENT_SECRET`\n\n**Google**:\n1. Go to console.cloud.google.com/apis/credentials\n2. Create OAuth 2.0 Client ID\n3. Run: `jack secrets` and add `GOOGLE_CLIENT_ID` + `GOOGLE_CLIENT_SECRET`\n\nThe login form automatically shows buttons for configured providers.\n\n## Database\n\nD1 SQLite via Kysely. Tables: user, session, account, verification.\n\n## Environment Variables\n\n- `BETTER_AUTH_SECRET` - Auth token signing secret (auto-generated)\n- `GITHUB_CLIENT_ID` - GitHub OAuth client ID (optional)\n- `GITHUB_CLIENT_SECRET` - GitHub OAuth client secret (optional)\n- `GOOGLE_CLIENT_ID` - Google OAuth client ID (optional)\n- `GOOGLE_CLIENT_SECRET` - Google OAuth client secret (optional)\n\n## Cloudflare Workers Compatibility Notes\n\nBetter Auth has known compatibility issues with Cloudflare Workers. These are already handled in this template, but be aware when modifying:\n\n### NEVER call auth.api.getSession() in middleware\nNext.js edge middleware cannot use Node.js `perf_hooks` module. The middleware.ts uses cookie-only checks instead. Full session validation happens in server components.\n\n### Auth must be created per-request, not as a singleton\nD1 bindings are only available inside request handlers. The `getAuth()` helper in lib/auth.ts calls `getCloudflareContext()` on each invocation to get the D1 binding. Do NOT try to create a top-level auth instance.\n\n### Required wrangler.jsonc flags\n- `nodejs_compat` compatibility flag is required\n- Use a recent `compatibility_date` (2024-12-30 or later)\n\n### Version pinning\nBetter Auth v1.4+ had `createRequire` and `runWithRequestState` errors on Workers. If you hit module errors, try pinning to the latest working version or using `better-auth@beta`.\n\n### Do NOT use Drizzle adapter directly\nThis template uses Kysely + kysely-d1 for the database adapter. The Drizzle ORM adapter (`drizzleAdapter`) requires `drizzle-orm/d1` which has build-time initialization issues with OpenNext. Kysely works reliably with D1 in this setup.\n\n## OpenNext Navigation Rules\n\nOpenNext on Cloudflare Workers has a broken webpack chunk URL resolver (`r.u` is empty). This means dynamic chunk loading during client-side navigation can fail with `ChunkLoadError: Loading chunk X failed`.\n\n### NEVER use router.push() after auth state changes\nAfter sign-in, sign-up, or sign-out, always use `window.location.href` instead of `router.push()` + `router.refresh()`. Auth state changes need a full page reload so middleware and server components re-evaluate with the new session.\n\n```tsx\n// BAD - causes ChunkLoadError on OpenNext\nawait authClient.signOut();\nrouter.push('/');\nrouter.refresh();\n\n// GOOD - full reload ensures clean auth state\nawait authClient.signOut();\nwindow.location.href = '/';\n```\n\n### Use <Link> for in-app navigation\nNext.js `<Link>` components work because they prefetch chunks via `<script>` tags in the HTML. Only `router.push()` to pages whose chunks aren't already loaded will fail.\n\n### Add `export const dynamic = 'force-dynamic'` to pages using getCloudflareContext\nWithout this, Next.js tries to statically prerender the page at build time, which fails because `getCloudflareContext()` is only available at runtime.\n\n## Resources\n\n- [Better Auth Docs](https://www.betterauth.com/docs)\n- [Better Auth Cloudflare package](https://github.com/zpg6/better-auth-cloudflare)\n- [Hono + Better Auth on Cloudflare](https://hono.dev/examples/better-auth-on-cloudflare)\n- [OpenNext Docs](https://opennext.js.org/cloudflare)"
+	},
+	"hooks": {
+		"preCreate": [
+			{
+				"action": "require",
+				"source": "secret",
+				"key": "BETTER_AUTH_SECRET",
+				"message": "Generating authentication secret...",
+				"onMissing": "generate",
+				"generateCommand": "openssl rand -base64 32"
+			}
+		],
+		"postDeploy": [
+			{
+				"action": "clipboard",
+				"text": "{{url}}",
+				"message": "Deploy URL copied to clipboard"
+			},
+			{
+				"action": "box",
+				"title": "Auth ready: {{name}}",
+				"lines": [
+					"{{url}}",
+					"",
+					"Email/password login works out of the box.",
+					"Social login requires OAuth credentials (run jack secrets to add later)."
+				]
+			}
+		]
+	}
+}

package/templates/nextjs-auth/app/api/auth/[...all]/route.ts

@@ -0,0 +1,11 @@
+import { getAuth } from "@/lib/auth";
+
+export const dynamic = "force-dynamic";
+
+async function handler(request: Request) {
+	const auth = await getAuth();
+	return auth.handler(request);
+}
+
+export const GET = handler;
+export const POST = handler;

package/templates/nextjs-auth/app/dashboard/loading.tsx

@@ -0,0 +1,53 @@
+export default function DashboardLoading() {
+	return (
+		<div className="min-h-screen">
+			<header className="border-b border-gray-200 bg-white">
+				<div className="mx-auto flex h-14 max-w-3xl items-center justify-between px-6">
+					<div className="h-5 w-28 animate-pulse rounded bg-gray-200" />
+					<div className="h-8 w-20 animate-pulse rounded bg-gray-200" />
+				</div>
+			</header>
+
+			<main className="mx-auto max-w-3xl px-6 py-12">
+				<div className="mb-8">
+					<div className="h-8 w-40 animate-pulse rounded bg-gray-200" />
+					<div className="mt-2 h-5 w-56 animate-pulse rounded bg-gray-200" />
+				</div>
+
+				<div className="grid gap-6 sm:grid-cols-2">
+					<div className="rounded-xl border border-gray-200 bg-white p-6">
+						<div className="h-5 w-16 animate-pulse rounded bg-gray-200" />
+						<div className="mt-4 space-y-3">
+							<div>
+								<div className="h-3 w-12 animate-pulse rounded bg-gray-200" />
+								<div className="mt-1.5 h-5 w-32 animate-pulse rounded bg-gray-200" />
+							</div>
+							<div>
+								<div className="h-3 w-12 animate-pulse rounded bg-gray-200" />
+								<div className="mt-1.5 h-5 w-44 animate-pulse rounded bg-gray-200" />
+							</div>
+						</div>
+					</div>
+
+					<div className="rounded-xl border border-gray-200 bg-white p-6">
+						<div className="h-5 w-16 animate-pulse rounded bg-gray-200" />
+						<div className="mt-4 space-y-3">
+							<div>
+								<div className="h-3 w-20 animate-pulse rounded bg-gray-200" />
+								<div className="mt-1.5 h-5 w-48 animate-pulse rounded bg-gray-200" />
+							</div>
+							<div>
+								<div className="h-3 w-16 animate-pulse rounded bg-gray-200" />
+								<div className="mt-1.5 h-5 w-36 animate-pulse rounded bg-gray-200" />
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div className="mt-8">
+					<div className="h-10 w-28 animate-pulse rounded-lg bg-gray-200" />
+				</div>
+			</main>
+		</div>
+	);
+}

package/templates/nextjs-auth/app/dashboard/page.tsx

@@ -0,0 +1,73 @@
+import { Header } from "@/components/header";
+import { UserMenu } from "@/components/user-menu";
+import { getAuth } from "@/lib/auth";
+import { headers } from "next/headers";
+import { redirect } from "next/navigation";
+
+export const dynamic = "force-dynamic";
+
+export default async function DashboardPage() {
+	const auth = await getAuth();
+	const session = await auth.api.getSession({
+		headers: await headers(),
+	});
+
+	if (!session) {
+		redirect("/login");
+	}
+
+	return (
+		<div className="min-h-screen">
+			<Header user={session.user} />
+
+			<main className="mx-auto max-w-3xl px-6 py-12">
+				<div className="mb-8">
+					<h1 className="text-2xl font-bold">Dashboard</h1>
+					<p className="mt-1 text-gray-500">
+						Welcome back, {session.user.name || session.user.email}
+					</p>
+				</div>
+
+				<div className="grid gap-6 sm:grid-cols-2">
+					<div className="rounded-xl border border-gray-200 bg-white p-6">
+						<h2 className="font-semibold">Profile</h2>
+						<div className="mt-4 space-y-3">
+							<div>
+								<p className="text-xs font-medium uppercase tracking-wide text-gray-400">Name</p>
+								<p className="mt-0.5">{session.user.name || "Not set"}</p>
+							</div>
+							<div>
+								<p className="text-xs font-medium uppercase tracking-wide text-gray-400">Email</p>
+								<p className="mt-0.5">{session.user.email}</p>
+							</div>
+						</div>
+					</div>
+
+					<div className="rounded-xl border border-gray-200 bg-white p-6">
+						<h2 className="font-semibold">Session</h2>
+						<div className="mt-4 space-y-3">
+							<div>
+								<p className="text-xs font-medium uppercase tracking-wide text-gray-400">
+									Session ID
+								</p>
+								<p className="mt-0.5 truncate font-mono text-sm text-gray-600">
+									{session.session.id}
+								</p>
+							</div>
+							<div>
+								<p className="text-xs font-medium uppercase tracking-wide text-gray-400">Expires</p>
+								<p className="mt-0.5 text-sm text-gray-600">
+									{new Date(session.session.expiresAt).toLocaleString()}
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div className="mt-8">
+					<UserMenu />
+				</div>
+			</main>
+		</div>
+	);
+}

package/templates/nextjs-auth/app/error.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { AlertCircle, RotateCcw } from "lucide-react";
+import Link from "next/link";
+
+// biome-ignore lint/suspicious/noShadowRestrictedNames: Next.js convention for error boundaries
+export default function Error({
+	error,
+	reset,
+}: {
+	error: Error & { digest?: string };
+	reset: () => void;
+}) {
+	return (
+		<div className="flex min-h-screen items-center justify-center px-4">
+			<div className="w-full max-w-sm text-center">
+				<div className="mx-auto mb-4 flex size-12 items-center justify-center rounded-full bg-red-100">
+					<AlertCircle className="size-6 text-red-600" />
+				</div>
+				<h1 className="text-xl font-bold">Something went wrong</h1>
+				<p className="mt-2 text-sm text-gray-500">
+					{error.message || "An unexpected error occurred."}
+				</p>
+				{error.digest && <p className="mt-1 text-xs text-gray-400">Error ID: {error.digest}</p>}
+				<div className="mt-6 flex items-center justify-center gap-3">
+					<button
+						type="button"
+						onClick={reset}
+						className="inline-flex items-center gap-2 rounded-lg bg-gray-900 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-gray-800"
+					>
+						<RotateCcw className="size-4" />
+						Try again
+					</button>
+					<Link
+						href="/"
+						className="rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 transition hover:bg-gray-50"
+					>
+						Go home
+					</Link>
+				</div>
+			</div>
+		</div>
+	);
+}

package/templates/nextjs-auth/app/globals.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/templates/nextjs-auth/app/health/route.ts

@@ -0,0 +1,3 @@
+export function GET() {
+	return Response.json({ status: "ok", timestamp: Date.now() });
+}

package/templates/nextjs-auth/app/layout.tsx

@@ -0,0 +1,24 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+	title: "jack-template",
+	description: "Next.js app with self-hosted authentication",
+};
+
+export default function RootLayout({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return (
+		<html lang="en">
+			<body className={`${inter.className} min-h-screen bg-gray-50 text-gray-900 antialiased`}>
+				{children}
+			</body>
+		</html>
+	);
+}

package/templates/nextjs-auth/app/login/page.tsx

@@ -0,0 +1,10 @@
+import { AuthForm } from "@/components/auth-form";
+import { Suspense } from "react";
+
+export default function LoginPage() {
+	return (
+		<Suspense>
+			<AuthForm mode="login" />
+		</Suspense>
+	);
+}

package/templates/nextjs-auth/app/page.tsx

@@ -0,0 +1,86 @@
+import { Header } from "@/components/header";
+import { LogIn, Shield, UserPlus } from "lucide-react";
+import Link from "next/link";
+
+export default function Home() {
+	return (
+		<div className="min-h-screen">
+			<Header />
+
+			<main className="mx-auto max-w-3xl px-6 py-20 text-center">
+				<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-gray-200 bg-white px-4 py-1.5 text-sm text-gray-600">
+					<Shield className="size-4" />
+					Self-hosted authentication
+				</div>
+
+				<h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
+					Authentication
+					<br />
+					<span className="text-gray-400">ready to go</span>
+				</h1>
+
+				<p className="mx-auto mt-4 max-w-lg text-lg text-gray-500">
+					Email/password login, session management, and optional social login. Your auth data stays
+					in your database.
+				</p>
+
+				<div className="mt-10 flex items-center justify-center gap-4">
+					<Link
+						href="/signup"
+						className="inline-flex items-center gap-2 rounded-lg bg-gray-900 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-gray-800"
+					>
+						<UserPlus className="size-4" />
+						Sign Up
+					</Link>
+					<Link
+						href="/login"
+						className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-700 transition hover:bg-gray-50"
+					>
+						<LogIn className="size-4" />
+						Sign In
+					</Link>
+				</div>
+
+				<div className="mt-20 grid gap-6 sm:grid-cols-3">
+					<div className="rounded-xl border border-gray-200 bg-white p-6 text-left">
+						<div className="mb-3 flex size-10 items-center justify-center rounded-lg bg-gray-100">
+							<Shield className="size-5 text-gray-600" />
+						</div>
+						<h3 className="font-semibold">Self-hosted</h3>
+						<p className="mt-1 text-sm text-gray-500">
+							Your auth data lives in your D1 database. No third-party dependency.
+						</p>
+					</div>
+
+					<div className="rounded-xl border border-gray-200 bg-white p-6 text-left">
+						<div className="mb-3 flex size-10 items-center justify-center rounded-lg bg-gray-100">
+							<LogIn className="size-5 text-gray-600" />
+						</div>
+						<h3 className="font-semibold">Email + Social</h3>
+						<p className="mt-1 text-sm text-gray-500">
+							Email/password out of the box. Add GitHub or Google OAuth with two environment
+							variables.
+						</p>
+					</div>
+
+					<div className="rounded-xl border border-gray-200 bg-white p-6 text-left">
+						<div className="mb-3 flex size-10 items-center justify-center rounded-lg bg-gray-100">
+							<UserPlus className="size-5 text-gray-600" />
+						</div>
+						<h3 className="font-semibold">Extensible</h3>
+						<p className="mt-1 text-sm text-gray-500">
+							Add 2FA, magic links, passkeys, and organizations via Better Auth plugins.
+						</p>
+					</div>
+				</div>
+			</main>
+
+			<footer className="border-t border-gray-200 py-6">
+				<p className="text-center text-sm text-gray-400">
+					Built with jack. Deploy with{" "}
+					<code className="rounded bg-gray-100 px-1 py-0.5 text-gray-600">jack ship</code>
+				</p>
+			</footer>
+		</div>
+	);
+}

package/templates/nextjs-auth/app/signup/page.tsx

@@ -0,0 +1,10 @@
+import { AuthForm } from "@/components/auth-form";
+import { Suspense } from "react";
+
+export default function SignupPage() {
+	return (
+		<Suspense>
+			<AuthForm mode="signup" />
+		</Suspense>
+	);
+}