{props.children}

\n \n \n );\n}\n\nfunction Input(props: any) {\n return (\n \n );\n}\n\n// ---------------------------------------------------------------- Homepage\napp.get(\"/\", async (c) => {\n const user = await getCurrentUser(c);\n return c.html(\n \n

\n Welcome to sambkw\n

\n A sample website with a complete email + password authentication\n system built on Val Town — SQLite storage, PBKDF2 password hashing,\n and signed session cookies.\n

\n {user ? (\n \n Go to your dashboard\n \n ) : (\n <>\n \n Create an account\n \n \n Log in\n \n \n )}\n

SQLite users

\n Accounts are stored in this val's scoped database.\n

Secure passwords

\n PBKDF2 with per-user salts — plaintext is never stored.\n

Signed sessions

\n HttpOnly cookies with HMAC signatures and expiry.\n

\n ,\n );\n});\n\n// ---------------------------------------------------------------- Signup\napp.get(\"/signup\", async (c) => {\n const user = await getCurrentUser(c);\n if (user) return c.redirect(\"/dashboard\", 303);\n return c.html(\n \n

Create your account

Join Sambkw.

\n ,\n );\n});\n\napp.post(\"/signup\", async (c) => {\n const body = await c.req.parseBody();\n const email = String(body.email ?? \"\").trim().toLowerCase();\n const password = String(body.password ?? \"\");\n if (!/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email)) {\n return c.html(\"Invalid email address.\", 400);\n }\n if (password.length < 8) {\n return c.html(\"Password must be at least 8 characters.\", 400);\n }\n if (await findUserByEmail(email)) {\n return c.html(\"An account with that email already exists.\", 409);\n }\n const hash = await hashPassword(password);\n const user = await createUser(email, hash);\n await startSession(c, user.id);\n return c.redirect(\"/dashboard\", 303);\n});\n\n// ---------------------------------------------------------------- Login\napp.get(\"/login\", async (c) => {\n const user = await getCurrentUser(c);\n if (user) return c.redirect(\"/dashboard\", 303);\n return c.html(\n \n

Welcome back

\n ,\n );\n});\n\napp.post(\"/login\", async (c) => {\n const body = await c.req.parseBody();\n const email = String(body.email ?? \"\").trim().toLowerCase();\n const password = String(body.password ?? \"\");\n const user = await findUserByEmail(email);\n const ok = user ? await verifyPassword(password, user.passwordHash) : false;\n if (!user || !ok) {\n // Same error for unknown email vs wrong password (no user enumeration).\n return c.html(\"Invalid email or password.\", 401);\n }\n await startSession(c, user.id);\n return c.redirect(\"/dashboard\", 303);\n});\n\n// ---------------------------------------------------------------- Logout\napp.post(\"/logout\", async (c) => {\n const raw = getCookie(c, SESSION_COOKIE);\n if (raw) {\n const token = await verify(raw, SESSION_SECRET);\n if (token) await deleteSession(token);\n }\n deleteCookie(c, SESSION_COOKIE, { path: \"/\" });\n return c.redirect(\"/\", 303);\n});\n\n// ---------------------------------------------------------------- Dashboard (protected)\napp.get(\"/dashboard\", async (c) => {\n const user = await getCurrentUser(c);\n if (!user) return c.redirect(\"/login\", 303);\n return c.html(\n \n

Your dashboard

\n You're logged in. This page is only visible to authenticated users.\n

\n Account\n

Email: {user.email}
User ID: {user.id}
Member since: {new Date(user.createdAt).toLocaleDateString()}

\n ,\n );\n});\n\napp.onError((err, c) => {\n console.error(\"Error:\", err);\n return c.html(\"Something went wrong on the server.\", 500);\n});\n\nexport default app.fetch;\n",3,["D",1788403126103],"branchVersion","label",[18],"pulls","branches",1,"forks","envVars",{"_185":179,"_187":26},"connections",{"_185":26,"_186":26},"count","unfilledCount","emptyCount",{"_35":223,"_13":215,"_65":208,"_45":-5,"_37":38,"_174":209,"_193":108,"_39":224,"_41":26,"_67":225,"_170":-5,"_69":24,"_175":-5,"_195":226,"_17":227},{"_35":216,"_13":217,"_65":218,"_45":208,"_37":38,"_174":172,"_193":108,"_39":219,"_41":26,"_67":211,"_170":220,"_69":24,"_175":-5,"_195":221,"_17":222},{"_35":205,"_13":206,"_65":207,"_45":208,"_37":38,"_174":209,"_193":108,"_39":210,"_41":26,"_67":211,"_170":212,"_69":24,"_175":-5,"_195":213,"_17":214},{"_35":198,"_13":199,"_65":200,"_45":-5,"_37":38,"_174":134,"_193":108,"_39":201,"_41":26,"_67":21,"_170":202,"_69":24,"_175":-5,"_195":203,"_17":204},{"_35":169,"_13":18,"_65":66,"_45":-5,"_37":38,"_174":90,"_193":108,"_39":194,"_41":172,"_67":68,"_170":171,"_69":24,"_175":14,"_195":196,"_17":197},"latest",["D",1788403126103],"children",[],[18],"8a0fcf62-8ea2-4856-b0e4-ccb63d1a7be1","README.md","acd433a2-a740-11f1-ad54-1607ee4eb77e",["D",1788403164429],"# sambkw\n\nA sample website with a complete, working **email + password authentication system** built on Val Town.\n\n## ✨ Try it\n\n[Visit the live site](url:index.tsx)\n\nCreate an account (or log in with the test user `sam@example.com` / `supersecret1`), and you'll land on a members-only dashboard.\n\n## How it works\n\n| Capability | Implementation |\n| --- | --- |\n| Server | [Hono](https://hono.dev) + JSX (`index.tsx`) |\n| Users & sessions | SQLite, scoped to this val (`lib/db.ts`) |\n| Password hashing | PBKDF2 (100k iterations, per-user 16-byte salt) via WebCrypto (`lib/security.ts`) |\n| Sessions | Random 256-bit token stored in the DB, delivered as an **HttpOnly, Secure, SameSite=Lax** cookie signed with HMAC-SHA256 |\n| Route protection | `/dashboard` requires a valid session; otherwise redirects to `/login` |\n\n### Routes\n- `GET /` — homepage\n- `GET/POST /signup` — create an account (auto-logs you in)\n- `GET/POST /login` — sign in\n- `POST /logout` — destroy the session\n- `GET /dashboard` — protected page for authenticated users\n\n## Security notes\n- Passwords are never stored in plaintext; each is hashed with a unique random salt.\n- Login returns the same error for an unknown email and a wrong password, preventing user enumeration.\n- Session cookies are signed so they can't be forged without `SESSION_SECRET`, and sessions can be revoked server-side on logout.\n\n### Environment variables\n- `SESSION_SECRET` — secret used to sign session cookies. Set it to a long random string before going to production. It's already configured on this val.\n\n## Files\n- `index.tsx` — HTTP entrypoint (routes + views)\n- `lib/security.ts` — password hashing and cookie signing\n- `lib/db.ts` — SQLite schema and queries\n",[],[199],"aa7922d5-c9d1-4c4a-905a-0a95a437421b","security.ts","72208490-a740-11f1-9639-1607ee4eb77e","33c1a848-fdd3-40ee-89f1-dbfc3d09a30d",2,["D",1788403065948],"script","/**\n * Security helpers: password hashing (PBKDF2 via WebCrypto) and\n * HMAC-signed session cookies.\n */\n\nconst encoder = new TextEncoder();\n\n/** Derive a session cookie signing key from a secret. */\nasync function cookieKey(secret: string): Promise {\n return await crypto.subtle.importKey(\n \"raw\",\n encoder.encode(secret),\n { name: \"HMAC\", hash: \"SHA-256\" },\n false,\n [\"sign\", \"verify\"],\n );\n}\n\n/** Hash a plaintext password. Store the returned string in the DB. */\nexport async function hashPassword(password: string): Promise {\n const salt = crypto.getRandomValues(new Uint8Array(16));\n const key = await crypto.subtle.importKey(\n \"raw\",\n encoder.encode(password),\n { name: \"PBKDF2\" },\n false,\n [\"deriveBits\"],\n );\n const bits = await crypto.subtle.deriveBits(\n {\n name: \"PBKDF2\",\n salt,\n iterations: 100_000,\n hash: \"SHA-256\",\n },\n key,\n 256,\n );\n const hash = new Uint8Array(bits);\n const saltB64 = btoa(String.fromCharCode(...salt));\n const hashB64 = btoa(String.fromCharCode(...hash));\n return `pbkdf2$${saltB64}$${hashB64}`;\n}\n\n/** Verify a plaintext password against a stored hash string. */\nexport async function verifyPassword(\n password: string,\n stored: string,\n): Promise {\n const [scheme, saltB64, hashB64] = stored.split(\"$\");\n if (scheme !== \"pbkdf2\") return false;\n const salt = Uint8Array.from(atob(saltB64), (c) => c.charCodeAt(0));\n const expected = Uint8Array.from(atob(hashB64), (c) => c.charCodeAt(0));\n const key = await crypto.subtle.importKey(\n \"raw\",\n encoder.encode(password),\n { name: \"PBKDF2\" },\n false,\n [\"deriveBits\"],\n );\n const bits = await crypto.subtle.deriveBits(\n { name: \"PBKDF2\", salt, iterations: 100_000, hash: \"SHA-256\" },\n key,\n 256,\n );\n const actual = new Uint8Array(bits);\n if (actual.length !== expected.length) return false;\n let diff = 0;\n for (let i = 0; i < actual.length; i++) diff |= actual[i] ^ expected[i];\n return diff === 0;\n}\n\n/**\n * Sign an opaque token with the secret. Returns \"payload.signature\".\n * `payload` is base64url of the plaintext value we want to carry.\n */\nexport async function sign(payload: string, secret: string): Promise {\n const key = await cookieKey(secret);\n const sig = new Uint8Array(\n await crypto.subtle.sign(\"HMAC\", key, encoder.encode(payload)),\n );\n const sigB64 = btoa(String.fromCharCode(...sig))\n .replace(/\\+/g, \"-\")\n .replace(/\\//g, \"_\")\n .replace(/=+$/, \"\");\n return `${payload}.${sigB64}`;\n}\n\n/** Verify a signed token; returns the original payload or null if invalid. */\nexport async function verify(\n token: string,\n secret: string,\n): Promise {\n const lastDot = token.lastIndexOf(\".\");\n if (lastDot === -1) return null;\n const payload = token.slice(0, lastDot);\n const sigB64 = token.slice(lastDot + 1);\n const sig = Uint8Array.from(\n atob(sigB64.replace(/-/g, \"+\").replace(/_/g, \"/\")),\n (c) => c.charCodeAt(0),\n );\n const key = await cookieKey(secret);\n // timing-safe verify\n try {\n const valid = await crypto.subtle.verify(\n \"HMAC\",\n key,\n sig,\n encoder.encode(payload),\n );\n return valid ? payload : null;\n } catch {\n return null;\n }\n}\n\nexport function base64urlEncode(bytes: Uint8Array): string {\n return btoa(String.fromCharCode(...bytes))\n .replace(/\\+/g, \"-\")\n .replace(/\\//g, \"_\")\n .replace(/=+$/, \"\");\n}\n\nexport function base64urlDecode(str: string): Uint8Array {\n return Uint8Array.from(atob(str.replace(/-/g, \"+\").replace(/_/g, \"/\")), (c) =>\n c.charCodeAt(0),\n );\n}\n",[],[215,206],"lib","93c7983a-fd89-49dd-852c-c7a263e8bc2e","db.ts","7522e8a4-a740-11f1-9639-1607ee4eb77e",["D",1788403071003],"/**\n * SQLite schema + queries for users and sessions.\n * Database is scoped to this val.\n */\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport interface User {\n id: number;\n email: string;\n passwordHash: string;\n createdAt: number;\n}\n\nexport interface Session {\n token: string;\n userId: number;\n createdAt: number;\n}\n\nexport async function initDb(): Promise {\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS users (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n email TEXT NOT NULL UNIQUE,\n passwordHash TEXT NOT NULL,\n createdAt INTEGER NOT NULL\n )`);\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS sessions (\n token TEXT PRIMARY KEY,\n userId INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,\n createdAt INTEGER NOT NULL\n )`);\n}\n\nexport async function createUser(\n email: string,\n passwordHash: string,\n): Promise {\n const res = await sqlite.execute({\n sql: \"INSERT INTO users (email, passwordHash, createdAt) VALUES (?, ?, ?)\",\n args: [email, passwordHash, Date.now()],\n });\n const id = Number(res.lastInsertRowid);\n return { id, email, passwordHash, createdAt: Date.now() };\n}\n\nexport async function findUserByEmail(email: string): Promise {\n const res = await sqlite.execute({\n sql: \"SELECT id, email, passwordHash, createdAt FROM users WHERE email = ?\",\n args: [email],\n });\n const row = res.rows[0] as Record | undefined;\n if (!row) return null;\n return {\n id: row.id as number,\n email: row.email as string,\n passwordHash: row.passwordHash as string,\n createdAt: row.createdAt as number,\n };\n}\n\nexport async function findUserById(id: number): Promise {\n const res = await sqlite.execute({\n sql: \"SELECT id, email, passwordHash, createdAt FROM users WHERE id = ?\",\n args: [id],\n });\n const row = res.rows[0] as Record | undefined;\n if (!row) return null;\n return {\n id: row.id as number,\n email: row.email as string,\n passwordHash: row.passwordHash as string,\n createdAt: row.createdAt as number,\n };\n}\n\nexport async function createSession(\n token: string,\n userId: number,\n): Promise {\n await sqlite.execute({\n sql: \"INSERT INTO sessions (token, userId, createdAt) VALUES (?, ?, ?)\",\n args: [token, userId, Date.now()],\n });\n}\n\nexport async function findSession(\n token: string,\n): Promise {\n const res = await sqlite.execute({\n sql: \"SELECT token, userId, createdAt FROM sessions WHERE token = ?\",\n args: [token],\n });\n const row = res.rows[0] as Record | undefined;\n if (!row) return null;\n return {\n token: row.token as string,\n userId: row.userId as number,\n createdAt: row.createdAt as number,\n };\n}\n\nexport async function deleteSession(token: string): Promise {\n await sqlite.execute({\n sql: \"DELETE FROM sessions WHERE token = ?\",\n args: [token],\n });\n}\n",[],[215,217],"cf26488e-ece1-419b-a180-8245494bfab9",["D",1788403065948],"directory",[189,190],[215],["D",1788403044901],["D",1789533091345],{"_11":12,"_147":72},{"_11":12,"_143":72,"_71":72,"_30":70,"_144":145,"_146":24},{"_41":134,"_13":16,"_35":38,"_135":96,"_136":-5,"_137":-5,"_138":-5,"_139":-5,"_140":-5,"_141":14,"_142":12},"ctx",{"_55":-5,"_166":266,"_267":268,"_269":270,"_271":24,"_272":24,"_273":24,"_274":108,"_275":-5,"_276":-7,"_277":-7,"_278":26,"_279":24,"_280":24,"_281":-5,"_282":24,"_283":24,"_284":24,"_285":-5},"ENV",{"_237":238,"_239":240,"_241":16,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · index.tsx