@helloleo/plugins 0.2.0-beta.3 → 0.2.0-beta.5

package/src/tools/setup-password-auth.ts

@@ -0,0 +1,599 @@
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+import type { Plugin } from "@opencode-ai/plugin";
+import { tool } from "@opencode-ai/plugin";
+
+/**
+ * Adds email/password auth on top of an existing scaffold: a `users` table,
+ * a stateless JWT session (HMAC-signed, httpOnly cookie -- never
+ * localStorage), and signup/login/logout/me API routes. Session verification
+ * needs no database round-trip.
+ *
+ * Auth lives behind `src/routes/api/auth/*` server routes (per this
+ * template's own README: "prefer API routes ... server functions are served
+ * from generated URLs that read as random gibberish"), never
+ * `createServerFn`. This also sidesteps vite's `[import-protection]` error
+ * class entirely: server routes are never imported by client route files,
+ * they're only fetched by URL, so there is no server-only import to leak
+ * into the client bundle.
+ *
+ * `vinxi/http` does NOT exist in this template (Vite-based Start, no vinxi)
+ * -- do not import it. Nothing here does.
+ *
+ * Only additive files are written, except `src/db/schema.ts`, which is
+ * drizzle.config.ts's one hardcoded schema path -- the `users` table MUST
+ * live there for `drizzle-kit push`/`generate` to see it. That file is
+ * appended to (idempotently), never replaced.
+ *
+ * Called AFTER `scaffold`, never instead of it.
+ */
+
+const SCHEMA_MARKER = "sqliteTable('users'";
+
+function usersTableBlock(): string {
+	return `
+export const users = sqliteTable('users', {
+  id: integer('id').primaryKey({ autoIncrement: true }),
+  email: text('email').notNull().unique(),
+  passwordHash: text('password_hash').notNull(),
+  createdAt: integer('created_at')
+    .notNull()
+    .default(sql\`(unixepoch())\`),
+})
+
+export type User = typeof users.$inferSelect
+`;
+}
+
+function authLibTs(): string {
+	return `import { db } from '#/db'
+import { users } from '#/db/schema'
+import { env } from '@helloleo/runtime'
+import { eq } from 'drizzle-orm'
+
+/*
+ * Password hashing, session JWTs, and user lookup. Used ONLY from
+ * src/routes/api/auth/*.ts server routes -- never imported by a client
+ * route file. Sessions are a stateless HMAC-signed JWT in an httpOnly
+ * cookie, not a server-side session store: verifying a session costs one
+ * signature check, no database or KV round-trip.
+ *
+ * AUTH_JWT_SECRET must be set for signing/verifying to work:
+ *   - dev: add \`AUTH_JWT_SECRET=<random value>\` to .env (gitignored;
+ *     the cf-shim exposes process.env vars as-is in dev).
+ *   - prod: \`wrangler secret put AUTH_JWT_SECRET\`.
+ * Generate a value with: openssl rand -hex 32
+ */
+
+const encoder = new TextEncoder()
+const SESSION_COOKIE = 'session'
+const SESSION_TTL_SECONDS = 60 * 60 * 24 * 7
+
+function getAuthSecret(): string {
+  const secret = (env as { AUTH_JWT_SECRET?: string }).AUTH_JWT_SECRET
+  if (!secret) {
+    throw new Error(
+      'AUTH_JWT_SECRET is not set. Add it to .env (dev) or run ' +
+        '\`wrangler secret put AUTH_JWT_SECRET\` (prod).',
+    )
+  }
+  return secret
+}
+
+function toHex(bytes: Uint8Array): string {
+  return Array.from(bytes)
+    .map(b => b.toString(16).padStart(2, '0'))
+    .join('')
+}
+
+function timingSafeEqual(a: string, b: string): boolean {
+  if (a.length !== b.length) return false
+  let diff = 0
+  for (let i = 0; i < a.length; i++) diff |= a.charCodeAt(i) ^ b.charCodeAt(i)
+  return diff === 0
+}
+
+// ---- password hashing (salted SHA-256; sufficient for a single-tenant
+// demo app -- swap for a WASM bcrypt/argon2 if this ever guards real data) ----
+
+export function generateSalt(): string {
+  return toHex(crypto.getRandomValues(new Uint8Array(16)))
+}
+
+async function sha256Hex(input: string): Promise<string> {
+  const digest = await crypto.subtle.digest('SHA-256', encoder.encode(input))
+  return toHex(new Uint8Array(digest))
+}
+
+export async function hashPassword(password: string, salt: string): Promise<string> {
+  return \`\${salt}:\${await sha256Hex(salt + password)}\`
+}
+
+export async function verifyPassword(password: string, stored: string): Promise<boolean> {
+  const [salt, hash] = stored.split(':')
+  if (!salt || !hash) return false
+  return timingSafeEqual(await sha256Hex(salt + password), hash)
+}
+
+// ---- session JWT (HS256, hand-rolled -- no dependency needed for one HMAC) ----
+
+function base64url(bytes: Uint8Array): string {
+  let binary = ''
+  for (const b of bytes) binary += String.fromCharCode(b)
+  return btoa(binary).replace(/\\+/g, '-').replace(/\\//g, '_').replace(/=+$/, '')
+}
+
+function base64urlDecode(value: string): string {
+  const padded = value.replace(/-/g, '+').replace(/_/g, '/')
+  return atob(padded)
+}
+
+async function hmacKey(secret: string) {
+  return crypto.subtle.importKey(
+    'raw',
+    encoder.encode(secret),
+    { name: 'HMAC', hash: 'SHA-256' },
+    false,
+    ['sign'],
+  )
+}
+
+export async function signSession(userId: number): Promise<string> {
+  const header = base64url(encoder.encode(JSON.stringify({ alg: 'HS256', typ: 'JWT' })))
+  const payload = base64url(
+    encoder.encode(
+      JSON.stringify({ sub: userId, exp: Math.floor(Date.now() / 1000) + SESSION_TTL_SECONDS }),
+    ),
+  )
+  const key = await hmacKey(getAuthSecret())
+  const sig = await crypto.subtle.sign('HMAC', key, encoder.encode(\`\${header}.\${payload}\`))
+  return \`\${header}.\${payload}.\${base64url(new Uint8Array(sig))}\`
+}
+
+export async function verifySession(token: string): Promise<number | null> {
+  const parts = token.split('.')
+  if (parts.length !== 3) return null
+  const [header, payload, sig] = parts
+  const key = await hmacKey(getAuthSecret())
+  const expectedSig = base64url(
+    new Uint8Array(await crypto.subtle.sign('HMAC', key, encoder.encode(\`\${header}.\${payload}\`))),
+  )
+  if (!timingSafeEqual(expectedSig, sig)) return null
+  try {
+    const claims = JSON.parse(base64urlDecode(payload)) as { sub: number; exp: number }
+    if (claims.exp < Math.floor(Date.now() / 1000)) return null
+    return claims.sub
+  } catch {
+    return null
+  }
+}
+
+export function sessionCookieHeader(token: string): string {
+  return \`\${SESSION_COOKIE}=\${token}; Path=/; Max-Age=\${SESSION_TTL_SECONDS}; HttpOnly; SameSite=Lax\`
+}
+
+export function clearSessionCookieHeader(): string {
+  return \`\${SESSION_COOKIE}=; Path=/; Max-Age=0; HttpOnly; SameSite=Lax\`
+}
+
+export function readSessionToken(request: Request): string | null {
+  const cookieHeader = request.headers.get('cookie') ?? ''
+  for (const part of cookieHeader.split(/;\\s*/)) {
+    const eq = part.indexOf('=')
+    if (eq === -1) continue
+    if (part.slice(0, eq) === SESSION_COOKIE) return part.slice(eq + 1)
+  }
+  return null
+}
+
+export async function getUserFromRequest(request: Request) {
+  const token = readSessionToken(request)
+  if (!token) return null
+  const userId = await verifySession(token)
+  if (userId === null) return null
+  const [user] = await db
+    .select({ id: users.id, email: users.email })
+    .from(users)
+    .where(eq(users.id, userId))
+    .limit(1)
+  return user ?? null
+}
+`;
+}
+
+function signupRouteTs(): string {
+	return `import { createFileRoute } from '@tanstack/react-router'
+import { db } from '#/db'
+import { users } from '#/db/schema'
+import { generateSalt, hashPassword, sessionCookieHeader, signSession } from '#/lib/auth'
+import { eq } from 'drizzle-orm'
+import { z } from 'zod'
+
+const bodySchema = z.object({ email: z.string().email(), password: z.string().min(8) })
+
+export const Route = createFileRoute('/api/auth/signup')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const parsed = bodySchema.safeParse(await request.json().catch(() => null))
+        if (!parsed.success) {
+          return Response.json({ error: 'Invalid email or password (min 8 characters).' }, { status: 400 })
+        }
+        const email = parsed.data.email.toLowerCase()
+
+        const [existing] = await db.select({ id: users.id }).from(users).where(eq(users.email, email)).limit(1)
+        if (existing) {
+          return Response.json({ error: 'An account with this email already exists.' }, { status: 409 })
+        }
+
+        const salt = generateSalt()
+        const passwordHash = await hashPassword(parsed.data.password, salt)
+        const [user] = await db
+          .insert(users)
+          .values({ email, passwordHash })
+          .returning({ id: users.id, email: users.email })
+
+        const token = await signSession(user.id)
+        return Response.json(
+          { user },
+          { status: 201, headers: { 'Set-Cookie': sessionCookieHeader(token) } },
+        )
+      },
+    },
+  },
+})
+`;
+}
+
+function loginRouteTs(): string {
+	return `import { createFileRoute } from '@tanstack/react-router'
+import { db } from '#/db'
+import { users } from '#/db/schema'
+import { sessionCookieHeader, signSession, verifyPassword } from '#/lib/auth'
+import { eq } from 'drizzle-orm'
+import { z } from 'zod'
+
+const bodySchema = z.object({ email: z.string().email(), password: z.string() })
+
+export const Route = createFileRoute('/api/auth/login')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const parsed = bodySchema.safeParse(await request.json().catch(() => null))
+        if (!parsed.success) {
+          return Response.json({ error: 'Invalid email or password.' }, { status: 400 })
+        }
+        const email = parsed.data.email.toLowerCase()
+
+        const [user] = await db.select().from(users).where(eq(users.email, email)).limit(1)
+        if (!user || !(await verifyPassword(parsed.data.password, user.passwordHash))) {
+          return Response.json({ error: 'Invalid email or password.' }, { status: 401 })
+        }
+
+        const token = await signSession(user.id)
+        return Response.json(
+          { user: { id: user.id, email: user.email } },
+          { status: 200, headers: { 'Set-Cookie': sessionCookieHeader(token) } },
+        )
+      },
+    },
+  },
+})
+`;
+}
+
+function logoutRouteTs(): string {
+	return `import { createFileRoute } from '@tanstack/react-router'
+import { clearSessionCookieHeader } from '#/lib/auth'
+
+export const Route = createFileRoute('/api/auth/logout')({
+  server: {
+    handlers: {
+      POST: async () => {
+        return Response.json({ ok: true }, { headers: { 'Set-Cookie': clearSessionCookieHeader() } })
+      },
+    },
+  },
+})
+`;
+}
+
+function meRouteTs(): string {
+	return `import { createFileRoute } from '@tanstack/react-router'
+import { getUserFromRequest } from '#/lib/auth'
+
+export const Route = createFileRoute('/api/auth/me')({
+  server: {
+    handlers: {
+      GET: async ({ request }) => {
+        const user = await getUserFromRequest(request)
+        return Response.json({ user })
+      },
+    },
+  },
+})
+`;
+}
+
+function sessionClientTs(): string {
+	return `/*
+ * Client-side session helpers. getUser() is the getUser() referenced by the
+ * "Authenticated routes" pattern in src/routes/README.md -- wire it into
+ * __root.tsx's beforeLoad (see that file's manual step below).
+ */
+
+export interface SessionUser {
+  id: number
+  email: string
+}
+
+export async function getUser(): Promise<SessionUser | null> {
+  const res = await fetch('/api/auth/me')
+  if (!res.ok) return null
+  const data = (await res.json()) as { user: SessionUser | null }
+  return data.user
+}
+
+export async function login(email: string, password: string): Promise<{ user: SessionUser } | { error: string }> {
+  const res = await fetch('/api/auth/login', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ email, password }),
+  })
+  const data = await res.json()
+  return res.ok ? { user: data.user } : { error: data.error ?? 'Something went wrong.' }
+}
+
+export async function signup(email: string, password: string): Promise<{ user: SessionUser } | { error: string }> {
+  const res = await fetch('/api/auth/signup', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ email, password }),
+  })
+  const data = await res.json()
+  return res.ok ? { user: data.user } : { error: data.error ?? 'Something went wrong.' }
+}
+
+export async function logout(): Promise<void> {
+  await fetch('/api/auth/logout', { method: 'POST' })
+}
+`;
+}
+
+function authedLayoutTsx(): string {
+	return `import { createFileRoute, redirect } from '@tanstack/react-router'
+
+// 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: ({ context }) => {
+    if (!context.user) {
+      throw redirect({ to: '/login' })
+    }
+  },
+})
+`;
+}
+
+function loginPageTsx(): string {
+	return `import { createFileRoute, Link, redirect, useRouter } from '@tanstack/react-router'
+import { useState } from 'react'
+import { login } from '#/lib/session-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('/login')({
+  beforeLoad: ({ context }) => {
+    if (context.user) throw redirect({ to: '/' })
+  },
+  component: LoginPage,
+})
+
+function LoginPage() {
+  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 result = await login(email, password)
+    setLoading(false)
+    if ('error' in result) {
+      setError(result.error)
+      return
+    }
+    await router.invalidate()
+    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>Log in</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <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>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+`;
+}
+
+function signupPageTsx(): string {
+	return `import { createFileRoute, Link, redirect, useRouter } from '@tanstack/react-router'
+import { useState } from 'react'
+import { signup } from '#/lib/session-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')({
+  beforeLoad: ({ context }) => {
+    if (context.user) throw redirect({ to: '/' })
+  },
+  component: SignupPage,
+})
+
+function SignupPage() {
+  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 result = await signup(email, password)
+    setLoading(false)
+    if ('error' in result) {
+      setError(result.error)
+      return
+    }
+    await router.invalidate()
+    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="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>
+  )
+}
+`;
+}
+
+async function appendUsersTable(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${usersTableBlock()}`);
+	return true;
+}
+
+export const setupPasswordAuth = tool({
+	description:
+		"Add email/password auth to an existing project. Call scaffold first, " +
+		"then this. Writes a users table, stateless-JWT session helpers, and " +
+		"signup/login/logout/me API routes.",
+	args: {},
+	async execute(_args, context) {
+		const dir = context.directory;
+
+		await Promise.all([
+			Bun.write(path.join(dir, "src", "lib", "auth.ts"), authLibTs()),
+			Bun.write(
+				path.join(dir, "src", "lib", "session-client.ts"),
+				sessionClientTs(),
+			),
+			Bun.write(
+				path.join(dir, "src", "routes", "api", "auth", "signup.ts"),
+				signupRouteTs(),
+			),
+			Bun.write(
+				path.join(dir, "src", "routes", "api", "auth", "login.ts"),
+				loginRouteTs(),
+			),
+			Bun.write(
+				path.join(dir, "src", "routes", "api", "auth", "logout.ts"),
+				logoutRouteTs(),
+			),
+			Bun.write(
+				path.join(dir, "src", "routes", "api", "auth", "me.ts"),
+				meRouteTs(),
+			),
+			Bun.write(
+				path.join(dir, "src", "routes", "_authed.tsx"),
+				authedLayoutTsx(),
+			),
+			Bun.write(path.join(dir, "src", "routes", "login.tsx"), loginPageTsx()),
+			Bun.write(path.join(dir, "src", "routes", "signup.tsx"), signupPageTsx()),
+		]);
+
+		const schemaAppended = await appendUsersTable(dir);
+
+		return [
+			"Wrote password auth (users table, JWT session, API routes):",
+			`  - src/db/schema.ts ${schemaAppended ? "(appended `users` table)" : "(already had a `users` table, left as-is)"}`,
+			"  - src/lib/auth.ts (hashing, JWT sign/verify, getUserFromRequest -- server-only, never import from a client route)",
+			"  - src/lib/session-client.ts (getUser, login, signup, logout -- client fetch helpers)",
+			"  - src/routes/api/auth/{signup,login,logout,me}.ts (server routes -- never createServerFn)",
+			"  - src/routes/_authed.tsx (pathless guard for protected routes)",
+			"  - src/routes/login.tsx, src/routes/signup.tsx",
+			"",
+			"Session is a stateless HMAC-signed JWT in an httpOnly cookie (no localStorage, no server-side session store).",
+			"",
+			"Required: set AUTH_JWT_SECRET or every request 500s.",
+			"  - dev: add `AUTH_JWT_SECRET=<value>` to .env",
+			"  - prod: `wrangler secret put AUTH_JWT_SECRET`.",
+			"",
+			"Next (manual, one edit): in src/routes/__root.tsx, load the user into router context, per src/routes/README.md's Authenticated routes section:",
+			"",
+			"    import { getUser } from '#/lib/session-client'",
+			"    // in createRootRouteWithContext(...)({ ... }):",
+			"    beforeLoad: async () => ({ user: await getUser() }),",
+			"",
+			"Then put protected pages under src/routes/_authed/ (e.g. _authed/dashboard.tsx -> /dashboard); they inherit the guard.",
+		].join("\n");
+	},
+});
+
+export const SetupPasswordAuthPlugin: Plugin = async () => {
+	return {
+		tool: { setup_password_auth: setupPasswordAuth },
+	};
+};