@getjack/jack 0.1.32 → 0.1.33

package/templates/nextjs-auth/cloudflare-env.d.ts

@@ -0,0 +1,8 @@
+interface CloudflareEnv {
+	DB: D1Database;
+	BETTER_AUTH_SECRET: string;
+	GITHUB_CLIENT_ID?: string;
+	GITHUB_CLIENT_SECRET?: string;
+	GOOGLE_CLIENT_ID?: string;
+	GOOGLE_CLIENT_SECRET?: string;
+}

package/templates/nextjs-auth/components/auth-form.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import { authClient } from "@/lib/auth-client";
+import { Check, Eye, EyeOff, Loader2, Mail } from "lucide-react";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { useState } from "react";
+
+interface AuthFormProps {
+	mode: "login" | "signup";
+}
+
+export function AuthForm({ mode }: AuthFormProps) {
+	const searchParams = useSearchParams();
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [name, setName] = useState("");
+	const [error, setError] = useState("");
+	const [loading, setLoading] = useState(false);
+	const [showPassword, setShowPassword] = useState(false);
+	const [success, setSuccess] = useState(false);
+
+	const isLogin = mode === "login";
+	const rawCallback = isLogin ? searchParams.get("callbackUrl") : null;
+	const callbackUrl =
+		rawCallback?.startsWith("/") && !rawCallback.startsWith("//") ? rawCallback : "/dashboard";
+	const title = isLogin ? "Sign in to your account" : "Create your account";
+	const submitLabel = isLogin ? "Sign In" : "Sign Up";
+	const switchText = isLogin ? "Don't have an account?" : "Already have an account?";
+	const switchHref = isLogin ? "/signup" : "/login";
+	const switchLabel = isLogin ? "Sign up" : "Sign in";
+
+	async function handleSubmit(e: React.FormEvent) {
+		e.preventDefault();
+		setError("");
+		setLoading(true);
+
+		try {
+			if (isLogin) {
+				const result = await authClient.signIn.email({
+					email,
+					password,
+				});
+
+				if (result.error) {
+					setError(result.error.message || "Invalid email or password");
+					return;
+				}
+
+				// Full reload ensures middleware + server components re-evaluate with new auth state
+				window.location.href = callbackUrl;
+			} else {
+				const result = await authClient.signUp.email({
+					email,
+					password,
+					name: name || email.split("@")[0],
+				});
+
+				if (result.error) {
+					setError(result.error.message || "Failed to create account");
+					return;
+				}
+
+				setSuccess(true);
+				setTimeout(() => {
+					window.location.href = "/dashboard";
+				}, 800);
+				return;
+			}
+		} catch {
+			setError("Something went wrong. Please try again.");
+		} finally {
+			setLoading(false);
+		}
+	}
+
+	if (success) {
+		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-green-100">
+						<Check className="size-6 text-green-600" />
+					</div>
+					<h1 className="text-xl font-bold">Account created!</h1>
+					<p className="mt-2 text-sm text-gray-500">Redirecting to your dashboard...</p>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex min-h-screen items-center justify-center px-4">
+			<div className="w-full max-w-sm">
+				<div className="mb-8 text-center">
+					<Link
+						href="/"
+						className="mb-6 inline-flex items-center gap-2 text-sm text-gray-500 transition hover:text-gray-700"
+					>
+						&larr; Back
+					</Link>
+					<h1 className="text-2xl font-bold">{title}</h1>
+				</div>
+
+				<form onSubmit={handleSubmit} className="space-y-4">
+					{!isLogin && (
+						<div>
+							<label htmlFor="name" className="mb-1.5 block text-sm font-medium text-gray-700">
+								Name
+							</label>
+							<input
+								id="name"
+								type="text"
+								value={name}
+								onChange={(e) => setName(e.target.value)}
+								placeholder="Your name"
+								className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none transition focus:border-gray-500 focus:ring-2 focus:ring-gray-200"
+							/>
+						</div>
+					)}
+
+					<div>
+						<label htmlFor="email" className="mb-1.5 block text-sm font-medium text-gray-700">
+							Email
+						</label>
+						<input
+							id="email"
+							type="email"
+							value={email}
+							onChange={(e) => setEmail(e.target.value)}
+							placeholder="you@example.com"
+							required
+							className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none transition focus:border-gray-500 focus:ring-2 focus:ring-gray-200"
+						/>
+					</div>
+
+					<div>
+						<label htmlFor="password" className="mb-1.5 block text-sm font-medium text-gray-700">
+							Password
+						</label>
+						<div className="relative">
+							<input
+								id="password"
+								type={showPassword ? "text" : "password"}
+								value={password}
+								onChange={(e) => setPassword(e.target.value)}
+								placeholder="Enter your password"
+								required
+								minLength={8}
+								className="w-full rounded-lg border border-gray-300 px-3 py-2 pr-9 text-sm outline-none transition focus:border-gray-500 focus:ring-2 focus:ring-gray-200"
+							/>
+							<button
+								type="button"
+								onClick={() => setShowPassword(!showPassword)}
+								className="absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+								tabIndex={-1}
+							>
+								{showPassword ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+							</button>
+						</div>
+					</div>
+
+					{error && (
+						<div className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
+							{error}
+						</div>
+					)}
+
+					<button
+						type="submit"
+						disabled={loading}
+						className="flex w-full items-center justify-center gap-2 rounded-lg bg-gray-900 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-50"
+					>
+						{loading ? <Loader2 className="size-4 animate-spin" /> : <Mail className="size-4" />}
+						{submitLabel}
+					</button>
+				</form>
+
+				{/* Social login (GitHub, Google) is pre-wired in lib/auth.ts.
+				    To enable: add GITHUB_CLIENT_ID + GITHUB_CLIENT_SECRET or
+				    GOOGLE_CLIENT_ID + GOOGLE_CLIENT_SECRET via `jack secrets` */}
+
+				<p className="mt-6 text-center text-sm text-gray-500">
+					{switchText}{" "}
+					<Link href={switchHref} className="font-medium text-gray-900 hover:underline">
+						{switchLabel}
+					</Link>
+				</p>
+			</div>
+		</div>
+	);
+}

package/templates/nextjs-auth/components/header.tsx

@@ -0,0 +1,50 @@
+import { Shield } from "lucide-react";
+import Link from "next/link";
+
+interface HeaderProps {
+	user?: {
+		name: string | null;
+		email: string;
+	};
+}
+
+export function Header({ user }: HeaderProps) {
+	return (
+		<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">
+				<Link href="/" className="flex items-center gap-2 font-semibold">
+					<div className="flex size-7 items-center justify-center rounded-md bg-gray-900 text-white text-xs">
+						<Shield className="size-4" />
+					</div>
+					jack-template
+				</Link>
+
+				<nav className="flex items-center gap-1">
+					{user ? (
+						<Link
+							href="/dashboard"
+							className="rounded-md px-3 py-1.5 text-sm font-medium text-gray-600 transition hover:bg-gray-100 hover:text-gray-900"
+						>
+							Dashboard
+						</Link>
+					) : (
+						<>
+							<Link
+								href="/login"
+								className="rounded-md px-3 py-1.5 text-sm font-medium text-gray-600 transition hover:bg-gray-100 hover:text-gray-900"
+							>
+								Sign In
+							</Link>
+							<Link
+								href="/signup"
+								className="rounded-md bg-gray-900 px-3 py-1.5 text-sm font-medium text-white transition hover:bg-gray-800"
+							>
+								Sign Up
+							</Link>
+						</>
+					)}
+				</nav>
+			</div>
+		</header>
+	);
+}

package/templates/nextjs-auth/components/user-menu.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { authClient } from "@/lib/auth-client";
+import { LogOut } from "lucide-react";
+
+export function UserMenu() {
+	async function handleSignOut() {
+		await authClient.signOut();
+		// Full reload after auth state change ensures middleware + server components re-evaluate
+		window.location.href = "/";
+	}
+
+	return (
+		<button
+			type="button"
+			onClick={handleSignOut}
+			className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition hover:bg-gray-50"
+		>
+			<LogOut className="size-4" />
+			Sign Out
+		</button>
+	);
+}

package/templates/nextjs-auth/lib/auth-client.ts

@@ -0,0 +1,3 @@
+import { createAuthClient } from "better-auth/react";
+
+export const authClient = createAuthClient();

package/templates/nextjs-auth/lib/auth.ts

@@ -0,0 +1,43 @@
+import { getCloudflareContext } from "@opennextjs/cloudflare";
+import { betterAuth } from "better-auth";
+import { Kysely } from "kysely";
+import { D1Dialect } from "kysely-d1";
+
+export function createAuth(d1: D1Database, env: Record<string, string | undefined>) {
+	// biome-ignore lint/suspicious/noExplicitAny: D1 has no typed schema
+	const db = new Kysely<any>({
+		dialect: new D1Dialect({ database: d1 }),
+	});
+
+	return betterAuth({
+		database: {
+			db,
+			type: "sqlite",
+		},
+		secret: env.BETTER_AUTH_SECRET,
+		emailAndPassword: { enabled: true },
+		socialProviders: {
+			...(env.GITHUB_CLIENT_ID && env.GITHUB_CLIENT_SECRET
+				? {
+						github: {
+							clientId: env.GITHUB_CLIENT_ID,
+							clientSecret: env.GITHUB_CLIENT_SECRET,
+						},
+					}
+				: {}),
+			...(env.GOOGLE_CLIENT_ID && env.GOOGLE_CLIENT_SECRET
+				? {
+						google: {
+							clientId: env.GOOGLE_CLIENT_ID,
+							clientSecret: env.GOOGLE_CLIENT_SECRET,
+						},
+					}
+				: {}),
+		},
+	});
+}
+
+export async function getAuth() {
+	const { env } = await getCloudflareContext();
+	return createAuth(env.DB, env as unknown as Record<string, string | undefined>);
+}

package/templates/nextjs-auth/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}

package/templates/nextjs-auth/middleware.ts

@@ -0,0 +1,33 @@
+import { type NextRequest, NextResponse } from "next/server";
+
+const protectedPaths = ["/dashboard"];
+
+export function middleware(request: NextRequest) {
+	const { pathname } = request.nextUrl;
+
+	const isProtected = protectedPaths.some(
+		(path) => pathname === path || pathname.startsWith(`${path}/`),
+	);
+
+	if (!isProtected) {
+		return NextResponse.next();
+	}
+
+	// Edge-safe session check: only inspect the cookie, do not call auth.api.getSession()
+	// because that requires Node.js APIs (perf_hooks) unavailable in edge middleware.
+	const sessionCookie =
+		request.cookies.get("better-auth.session_token") ??
+		request.cookies.get("__Secure-better-auth.session_token");
+
+	if (!sessionCookie?.value) {
+		const loginUrl = new URL("/login", request.url);
+		loginUrl.searchParams.set("callbackUrl", pathname);
+		return NextResponse.redirect(loginUrl);
+	}
+
+	return NextResponse.next();
+}
+
+export const config = {
+	matcher: ["/dashboard/:path*"],
+};

package/templates/nextjs-auth/next.config.ts

@@ -0,0 +1,8 @@
+import { initOpenNextCloudflareForDev } from "@opennextjs/cloudflare";
+import type { NextConfig } from "next";
+
+initOpenNextCloudflareForDev();
+
+const nextConfig: NextConfig = {};
+
+export default nextConfig;

package/templates/nextjs-auth/open-next.config.ts

@@ -0,0 +1,6 @@
+import { defineCloudflareConfig } from "@opennextjs/cloudflare";
+import r2IncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache";
+
+export default defineCloudflareConfig({
+	incrementalCache: r2IncrementalCache,
+});

package/templates/nextjs-auth/package.json

@@ -0,0 +1,33 @@
+{
+	"name": "jack-template",
+	"type": "module",
+	"private": true,
+	"scripts": {
+		"dev": "next dev",
+		"build": "next build",
+		"preview": "opennextjs-cloudflare build && opennextjs-cloudflare preview",
+		"deploy": "opennextjs-cloudflare build && opennextjs-cloudflare deploy",
+		"cf-typegen": "wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts"
+	},
+	"dependencies": {
+		"@opennextjs/cloudflare": "^1.0.0",
+		"@tailwindcss/postcss": "^4.1.18",
+		"better-auth": "^1",
+		"clsx": "^2.1.1",
+		"kysely": "^0.27",
+		"kysely-d1": "^0.3",
+		"lucide-react": "^0.563.0",
+		"next": "^15.0.0",
+		"postcss": "^8.5.6",
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0",
+		"tailwind-merge": "^3.4.0",
+		"tailwindcss": "^4.1.18"
+	},
+	"devDependencies": {
+		"@cloudflare/workers-types": "^4.20241205.0",
+		"@types/react": "^19.0.0",
+		"@types/react-dom": "^19.0.0",
+		"typescript": "^5.6.0"
+	}
+}

package/templates/nextjs-auth/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+	plugins: {
+		"@tailwindcss/postcss": {},
+	},
+};
+
+export default config;

package/templates/nextjs-auth/schema.sql

@@ -0,0 +1,49 @@
+CREATE TABLE IF NOT EXISTS user (
+  id TEXT PRIMARY KEY,
+  name TEXT NOT NULL,
+  email TEXT NOT NULL UNIQUE,
+  emailVerified INTEGER NOT NULL DEFAULT 0,
+  image TEXT,
+  createdAt INTEGER NOT NULL DEFAULT (unixepoch()),
+  updatedAt INTEGER NOT NULL DEFAULT (unixepoch())
+);
+
+CREATE TABLE IF NOT EXISTS session (
+  id TEXT PRIMARY KEY,
+  expiresAt INTEGER NOT NULL,
+  token TEXT NOT NULL UNIQUE,
+  ipAddress TEXT,
+  userAgent TEXT,
+  userId TEXT NOT NULL REFERENCES user(id) ON DELETE CASCADE,
+  createdAt INTEGER NOT NULL DEFAULT (unixepoch()),
+  updatedAt INTEGER NOT NULL DEFAULT (unixepoch())
+);
+
+CREATE TABLE IF NOT EXISTS account (
+  id TEXT PRIMARY KEY,
+  accountId TEXT NOT NULL,
+  providerId TEXT NOT NULL,
+  userId TEXT NOT NULL REFERENCES user(id) ON DELETE CASCADE,
+  accessToken TEXT,
+  refreshToken TEXT,
+  idToken TEXT,
+  accessTokenExpiresAt INTEGER,
+  refreshTokenExpiresAt INTEGER,
+  scope TEXT,
+  password TEXT,
+  createdAt INTEGER NOT NULL DEFAULT (unixepoch()),
+  updatedAt INTEGER NOT NULL DEFAULT (unixepoch())
+);
+
+CREATE TABLE IF NOT EXISTS verification (
+  id TEXT PRIMARY KEY,
+  identifier TEXT NOT NULL,
+  value TEXT NOT NULL,
+  expiresAt INTEGER NOT NULL,
+  createdAt INTEGER NOT NULL DEFAULT (unixepoch()),
+  updatedAt INTEGER NOT NULL DEFAULT (unixepoch())
+);
+
+CREATE INDEX IF NOT EXISTS idx_session_token ON session(token);
+CREATE INDEX IF NOT EXISTS idx_session_userId ON session(userId);
+CREATE INDEX IF NOT EXISTS idx_account_userId ON account(userId);

package/templates/nextjs-auth/tsconfig.json

@@ -0,0 +1,28 @@
+{
+	"compilerOptions": {
+		"target": "ES2022",
+		"lib": ["ES2022", "DOM", "DOM.Iterable"],
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"jsx": "preserve",
+		"strict": true,
+		"skipLibCheck": true,
+		"noEmit": true,
+		"incremental": true,
+		"esModuleInterop": true,
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"paths": {
+			"@/*": ["./*"]
+		},
+		"plugins": [
+			{
+				"name": "next"
+			}
+		],
+		"types": ["@cloudflare/workers-types"],
+		"allowJs": true
+	},
+	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "cloudflare-env.d.ts"],
+	"exclude": ["node_modules"]
+}

package/templates/nextjs-auth/wrangler.jsonc

@@ -0,0 +1,23 @@
+{
+	"$schema": "node_modules/wrangler/config-schema.json",
+	"name": "jack-template",
+	"main": ".open-next/worker.js",
+	"compatibility_date": "2024-12-30",
+	"compatibility_flags": ["nodejs_compat"],
+	"assets": {
+		"directory": ".open-next/assets",
+		"binding": "ASSETS"
+	},
+	"d1_databases": [
+		{
+			"binding": "DB",
+			"database_name": "jack-template-db"
+		}
+	],
+	"r2_buckets": [
+		{
+			"binding": "NEXT_INC_CACHE_R2_BUCKET",
+			"bucket_name": "jack-template-cache"
+		}
+	]
+}

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

@@ -0,0 +1,54 @@
+{
+	"name": "nextjs-clerk",
+	"description": "Next.js + Clerk (managed auth with pre-built UI components)",
+	"secrets": ["NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY", "CLERK_SECRET_KEY"],
+	"capabilities": [],
+	"intent": {
+		"keywords": ["clerk", "auth", "login", "nextjs", "managed-auth", "sso"],
+		"examples": ["app with managed auth", "clerk login", "quick auth setup"]
+	},
+	"agentContext": {
+		"summary": "A Next.js app with Clerk managed authentication, pre-built sign-in/sign-up components, and route protection middleware.",
+		"full_text": "## Project Structure\n\n- `app/layout.tsx` - Root layout with ClerkProvider\n- `app/page.tsx` - Landing page with sign-in CTA\n- `app/sign-in/[[...sign-in]]/page.tsx` - Clerk sign-in page\n- `app/sign-up/[[...sign-up]]/page.tsx` - Clerk sign-up page\n- `app/dashboard/page.tsx` - Protected dashboard page\n- `middleware.ts` - Clerk auth middleware for route protection\n- `components/header.tsx` - Header with UserButton for profile/logout\n\n## Authentication\n\nUses Clerk for fully managed auth. No database tables needed for auth.\n\n### Route Protection\n\nThe `middleware.ts` uses `clerkMiddleware()` with `createRouteMatcher()` to protect routes. By default, `/dashboard` and `/dashboard/*` are protected.\n\n### Client Components\n\n```tsx\nimport { SignInButton, SignedIn, SignedOut, UserButton } from '@clerk/nextjs';\n\n// Show sign-in button when signed out\n<SignedOut><SignInButton /></SignedOut>\n\n// Show user button when signed in\n<SignedIn><UserButton /></SignedIn>\n```\n\n### Server Components\n\n```tsx\nimport { auth, currentUser } from '@clerk/nextjs/server';\n\n// Get auth state\nconst { userId } = await auth();\n\n// Get full user object\nconst user = await currentUser();\n```\n\n## Environment Variables\n\n- `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` - Clerk publishable key (pk_test_...)\n- `CLERK_SECRET_KEY` - Clerk secret key (sk_test_...)\n\nGet these from https://dashboard.clerk.com\n\n## OpenNext on Cloudflare — Important Rules\n\nThis app runs via OpenNext on Cloudflare Workers. Follow these rules:\n\n### Use window.location.href instead of router.push() for full-page transitions\nOpenNext has a broken webpack chunk URL resolver. `router.push()` to pages whose chunks aren't loaded fails with `ChunkLoadError`. Use `window.location.href` for auth state changes or cross-section navigation. `<Link>` components work fine.\n\n### Add `export const dynamic = 'force-dynamic'` to pages using getCloudflareContext()\nWithout this, static prerendering fails because `getCloudflareContext()` is only available at request time.\n\n### Edge middleware cannot use Node.js APIs\nDo not import Node.js built-in modules in middleware. Clerk's `clerkMiddleware()` is edge-compatible.\n\n## Resources\n\n- [Clerk Docs](https://clerk.com/docs)\n- [Clerk Next.js Quickstart](https://clerk.com/docs/quickstarts/nextjs)\n- [OpenNext Docs](https://opennext.js.org/cloudflare)"
+	},
+	"hooks": {
+		"preCreate": [
+			{
+				"action": "require",
+				"source": "secret",
+				"key": "NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY",
+				"message": "Clerk publishable key",
+				"setupUrl": "https://dashboard.clerk.com",
+				"onMissing": "prompt",
+				"promptMessage": "Enter Clerk Publishable Key (pk_test_...):"
+			},
+			{
+				"action": "require",
+				"source": "secret",
+				"key": "CLERK_SECRET_KEY",
+				"message": "Clerk secret key",
+				"setupUrl": "https://dashboard.clerk.com",
+				"onMissing": "prompt",
+				"promptMessage": "Enter Clerk Secret Key (sk_test_...):"
+			}
+		],
+		"postDeploy": [
+			{
+				"action": "clipboard",
+				"text": "{{url}}",
+				"message": "Deploy URL copied to clipboard"
+			},
+			{
+				"action": "box",
+				"title": "Auth ready: {{name}}",
+				"lines": [
+					"{{url}}",
+					"",
+					"Clerk dashboard: https://dashboard.clerk.com",
+					"Sign-up and login pages work immediately.",
+					"Configure social providers in Clerk dashboard."
+				]
+			}
+		]
+	}
+}

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

@@ -0,0 +1,69 @@
+import { currentUser } from "@clerk/nextjs/server";
+import { redirect } from "next/navigation";
+
+export default async function DashboardPage() {
+	const user = await currentUser();
+
+	if (!user) {
+		redirect("/sign-in");
+	}
+
+	return (
+		<main className="mx-auto max-w-3xl px-6 py-12">
+			<h1 className="text-2xl font-bold">Dashboard</h1>
+			<p className="mt-1 text-gray-500">Welcome back. This page is protected by Clerk middleware.</p>
+
+			<div className="mt-8 rounded-xl border border-gray-200 bg-white p-6">
+				<h2 className="text-lg font-semibold">Your Profile</h2>
+				<dl className="mt-4 space-y-3">
+					<div className="flex gap-2">
+						<dt className="w-28 shrink-0 text-sm font-medium text-gray-500">Name</dt>
+						<dd className="text-sm">
+							{user.firstName} {user.lastName}
+						</dd>
+					</div>
+					<div className="flex gap-2">
+						<dt className="w-28 shrink-0 text-sm font-medium text-gray-500">Email</dt>
+						<dd className="text-sm">{user.emailAddresses[0]?.emailAddress}</dd>
+					</div>
+					<div className="flex gap-2">
+						<dt className="w-28 shrink-0 text-sm font-medium text-gray-500">User ID</dt>
+						<dd className="text-sm font-mono text-gray-400">{user.id}</dd>
+					</div>
+					<div className="flex gap-2">
+						<dt className="w-28 shrink-0 text-sm font-medium text-gray-500">Joined</dt>
+						<dd className="text-sm">
+							{user.createdAt ? new Date(user.createdAt).toLocaleDateString() : "Unknown"}
+						</dd>
+					</div>
+				</dl>
+			</div>
+
+			<div className="mt-6 rounded-xl border border-gray-200 bg-white p-6">
+				<h2 className="text-lg font-semibold">Next Steps</h2>
+				<ul className="mt-3 space-y-2 text-sm text-gray-600">
+					<li>
+						Add social providers in the{" "}
+						<a
+							href="https://dashboard.clerk.com"
+							target="_blank"
+							rel="noopener noreferrer"
+							className="font-medium text-gray-900 underline underline-offset-2"
+						>
+							Clerk dashboard
+						</a>
+					</li>
+					<li>Protect more routes by editing <code className="rounded bg-gray-100 px-1 py-0.5 text-xs">middleware.ts</code></li>
+					<li>
+						Access user data in server components with{" "}
+						<code className="rounded bg-gray-100 px-1 py-0.5 text-xs">currentUser()</code>
+					</li>
+					<li>
+						Access auth state in client components with{" "}
+						<code className="rounded bg-gray-100 px-1 py-0.5 text-xs">useUser()</code>
+					</li>
+				</ul>
+			</div>
+		</main>
+	);
+}

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

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

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

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