[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_206":207,"_208":209},"routes/_app.x.$handle.$name",{"_97":96,"_32":44,"_105":87,"_27":54,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":25,"_119":120,"_121":59,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":54,"_18":55,"_56":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":25},"version",111,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":20,"_34":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":20,"_34":35},"deleted",false,"deletedHere","path","README.md","latestPath","fileId","9cbce088-b441-11f0-80ca-0224a6c84d84","name","fileType","content","# Val Town OAuth Library\n\nA middleware library for adding OAuth authentication to Val Town vals using the Val Town OAuth provider.\n\n## Features\n\n- **Public Client Flow**: Uses OAuth 2.0 Authorization Code flow with PKCE for secure public client authentication\n- **Dynamic Client Registration**: Automatically registers OAuth clients on-demand\n- **State Encryption**: Encrypts OAuth state parameter with AES-GCM to prevent tampering\n- **Hono Middleware**: Drop-in middleware for Hono apps\n\n## Usage\n\n```tsx\n/** @jsxImportSource https://esm.sh/hono/jsx */\nimport { Hono } from \"https://esm.sh/hono\";\nimport oauth from \"https://esm.town/v/std/oauth/middleware\";\n\nconst app = new Hono();\n\napp.get(\"/\", (c) => {\n const userId = c.req.header(\"X-VT-User-Id\");\n return c.html(\n \n \n {userId \n ?

Logged in as {userId}

\n : Log in}\n \n \n );\n});\n\n// Wrap your app with the OAuth middleware\nexport default oauth(app.fetch);\n\n// Or customize the options:\n// export default oauth(app.fetch, {\n// clientName: \"My Custom App Name\",\n// scopes: [\"openid\", \"offline_access\", \"user_r\", \"project_r\"]\n// });\n```\n\n## Authentication Routes\n\nThe middleware automatically handles these routes:\n\n- **`/auth/login`** - Initiates the OAuth flow, redirects to Val Town authorization\n- **`/auth/callback`** - Handles the OAuth callback and exchanges code for tokens\n- **`/auth/logout`** - Logs out the user (not yet implemented)\n\n## User Headers\n\nOnce session management is implemented, authenticated requests will include:\n\n- `X-VT-User-Id` - The Val Town user ID\n- `X-VT-User-Email` - The user's email address\n- `X-VT-User-Name` - The user's display name\n\n## Environment Variables\n\nRequired:\n- `OAUTH_STATE_ENCRYPTION_KEY` - Secret key for encrypting OAuth state (must be set)\n\n## Architecture\n\n### oauth.ts\nCore utilities for OAuth operations:\n- PKCE (Proof Key for Code Exchange) generation\n- State encryption/decryption using AES-GCM\n- Dynamic client registration with Val Town OAuth server\n- State validation with 10-minute expiry\n\n### middleware.ts\nHono middleware that:\n- Intercepts auth-related routes (`/auth/*`)\n- Manages the OAuth authorization flow\n- Will handle session creation/validation (in progress)\n\n### example.tsx\nDemo application showing how to use the middleware\n\n## Security Features\n\n- **PKCE**: Protects against authorization code interception attacks\n- **Encrypted State**: Prevents CSRF and state tampering\n- **Short-lived State**: 10-minute expiry on state parameters\n- **Public Client**: No client secrets stored - uses PKCE instead\n\n## Current Limitations\n\n⚠️ **Session management is not yet implemented**. The callback currently returns JSON with tokens but doesn't:\n- Create a session\n- Set session cookies\n- Persist authentication across requests\n- Populate user headers\n\nSee the TODOs section below for planned improvements.\n\n---\n\n## TODOs\n\n### High Priority\n- [ ] **Implement session management** - Store and validate user sessions\n - Write session code in `session.ts`\n - Set user headers (`X-VT-User-Id`, `X-VT-User-Email`, `X-VT-User-Name`)\n - Ensure headers are trusted (delete any user-provided headers before setting them)\n - Consider using encrypted session cookies (using the same encryption key) vs database storage\n - Inspiration: https://www.val.town/x/stevekrouse/luciaMagicLinkStarter/code/backend/database/sessions.ts\n- [ ] **Implement `/auth/logout`** - Clear session and redirect\n\n### Configuration\n- [x] **Make scopes configurable** - Allow passing scopes via middleware options (defaults to `openid offline_access user_r`)\n- [ ] **Get/set encryption key dynamically** - Currently reads from env var (right now it seems to work if this isn't set! I wonder how?)\n- [x] **Make client name configurable** - Defaults to \"VALNAME by USERNAME\" dynamically, allows user customization\n\n### Optimizations\n- [ ] **Fix iframe support** - Remove `target=\"_top\"` workaround and improve error messages for iframe contexts","# Val Town OAuth Library\n\nA middleware library for adding OAuth authentication to Val Town vals using the\nVal Town OAuth provider.\n\n## Features\n\n- **Public Client Flow**: Uses OAuth 2.0 Authorization Code flow with PKCE for\n secure public client authentication\n- **Dynamic Client Registration**: Automatically registers OAuth clients\n on-demand\n- **State Encryption**: Encrypts OAuth state parameter with AES-GCM to prevent\n tampering\n- **Hono Middleware**: Drop-in middleware for Hono apps\n\n## Usage\n\n```tsx\n/** @jsxImportSource https://esm.sh/hono/jsx */\nimport { Hono } from \"https://esm.sh/hono\";\nimport oauth from \"https://esm.town/v/std/oauth/middleware\";\n\nconst app = new Hono();\n\napp.get(\"/\", (c) => {\n const userId = c.req.header(\"X-VT-User-Id\");\n return c.html(\n \n \n {userId\n ?

Logged in as {userId}

\n : Log in}\n \n ,\n );\n});\n\n// Wrap your app with the OAuth middleware\nexport default oauth(app.fetch);\n\n// Or customize the options:\n// export default oauth(app.fetch, {\n// clientName: \"My Custom App Name\",\n// scopes: [\"openid\", \"offline_access\", \"user_r\", \"project_r\"]\n// });\n```\n\n## Authentication Routes\n\nThe middleware automatically handles these routes:\n\n- **`/auth/login`** - Initiates the OAuth flow, redirects to Val Town\n authorization\n- **`/auth/callback`** - Handles the OAuth callback and exchanges code for\n tokens\n- **`/auth/logout`** - Logs out the user (not yet implemented)\n\n## User Headers\n\nOnce session management is implemented, authenticated requests will include:\n\n- `X-VT-User-Id` - The Val Town user ID\n- `X-VT-User-Email` - The user's email address\n- `X-VT-User-Name` - The user's display name\n\n## Environment Variables\n\nRequired:\n\n- `OAUTH_STATE_ENCRYPTION_KEY` - Secret key for encrypting OAuth state (must be\n set)\n\n## Architecture\n\n### oauth.ts\n\nCore utilities for OAuth operations:\n\n- PKCE (Proof Key for Code Exchange) generation\n- State encryption/decryption using AES-GCM\n- Dynamic client registration with Val Town OAuth server\n- State validation with 10-minute expiry\n\n### middleware.ts\n\nHono middleware that:\n\n- Intercepts auth-related routes (`/auth/*`)\n- Manages the OAuth authorization flow\n- Will handle session creation/validation (in progress)\n\n### example.tsx\n\nDemo application showing how to use the middleware\n\n## Security Features\n\n- **PKCE**: Protects against authorization code interception attacks\n- **Encrypted State**: Prevents CSRF and state tampering\n- **Short-lived State**: 10-minute expiry on state parameters\n- **Public Client**: No client secrets stored - uses PKCE instead\n\n## Current Limitations\n\n⚠️ **Session management is not yet implemented**. The callback currently returns\nJSON with tokens but doesn't:\n\n- Create a session\n- Set session cookies\n- Persist authentication across requests\n- Populate user headers\n\nSee the TODOs section below for planned improvements.\n\n---\n\n## TODOs\n\n### High Priority\n\n- [ ] **Implement session management** - Store and validate user sessions\n - Write session code in `session.ts`\n - Set user headers (`X-VT-User-Id`, `X-VT-User-Email`, `X-VT-User-Name`)\n - Ensure headers are trusted (delete any user-provided headers before setting\n them)\n - Consider using encrypted session cookies (using the same encryption key) vs\n database storage\n - Inspiration:\n https://www.val.town/x/stevekrouse/luciaMagicLinkStarter/code/backend/database/sessions.ts\n- [ ] **Implement `/auth/logout`** - Clear session and redirect\n\n### Configuration\n\n- [ ] **Get/set encryption key dynamically** - Currently reads from env var\n (right now it seems to work if this isn't set! I wonder how?)\n\n### Optimizations\n\n- [ ] **Fix iframe support** - Remove `target=\"_top\"` workaround and improve\n error messages for iframe contexts","createdAt",["D",1761768449991],"branchVersion","branchId","83eb3964-b42e-11f0-a32e-0224a6c84d84","id","83e9d146-b42e-11f0-a32e-0224a6c84d84","oauth",["D",1761677232251],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Login with Val Town OAuth Middleware","imageUrl","","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","91178458-b42e-11f0-b6f3-0224a6c84d84","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",5,"orgId","c606f87f-4d7e-48c8-9c39-ef5ab94aec49","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_97":96,"_104":100},"org",{"_97":96,"_98":-5,"_99":100,"_18":-5,"_101":102,"_103":25},"branch",{"_13":86,"_32":87,"_42":41,"_88":43,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":44,"_95":96},"isOwned",233,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","std","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJVaVhpQ1BId3dscVpBbkdZVWlMNjJtcjkxWS5wbmcifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_42":43,"_32":44,"_37":202,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":54,"_18":55,"_56":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":203,"_81":204,"_83":205,"_85":25},"tree",[181,182,183,184,185],"files",[181,182,183,184,185],"counts",{"_170":164,"_171":172,"_173":164,"_174":175,"_176":177},"contents",[126,127,128,129,130],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":167,"_32":28,"_30":31,"_134":-5,"_40":41,"_39":14,"_136":25,"_37":168,"_13":63,"_33":20,"_34":36,"_24":25,"_141":-5,"_27":169},{"_42":159,"_32":160,"_30":161,"_134":-5,"_40":41,"_39":162,"_136":25,"_37":163,"_13":164,"_33":20,"_34":165,"_24":25,"_141":-5,"_27":166},{"_42":150,"_32":151,"_30":57,"_134":-5,"_40":41,"_39":152,"_136":25,"_37":153,"_13":154,"_33":155,"_34":156,"_24":25,"_141":157,"_27":158},{"_42":143,"_32":144,"_30":145,"_134":-5,"_40":41,"_39":135,"_136":25,"_37":146,"_13":147,"_33":139,"_34":148,"_24":25,"_141":-5,"_27":149},{"_42":131,"_32":132,"_30":133,"_134":-5,"_40":41,"_39":135,"_136":25,"_37":137,"_13":138,"_33":139,"_34":140,"_24":25,"_141":-5,"_27":142},"dc7b925c-b502-11f0-9018-0224a6c84d84","oauth.ts","1744e9ae-b43d-11f0-999e-0224a6c84d84","parentId",110,"latest",["D",1761768434191],10,"script","import { blob } from \"https://esm.town/v/std/blob\";\n\nconst ENCRYPTION_KEY_MATERIAL = Deno.env.get(\"OAUTH_STATE_ENCRYPTION_KEY\"); // TODO: get/set this dynamically\nconst DEFAULT_CLIENT_NAME = \"Generic Val Town App\";\nconst OAUTH_ISSUER = \"https://val.town\";\n\n// Client cache: stores most recent client in memory\nlet cachedClient: any = null;\n\n// Extract redirect URI from request\nexport function getRedirectUri(req: Request): string {\n const origin = new URL(req.url).origin;\n return `${origin}/auth/callback`;\n}\n\n// Generate PKCE code verifier and challenge\nexport async function generatePKCE() {\n const array = new Uint8Array(32);\n crypto.getRandomValues(array);\n const codeVerifier = btoa(String.fromCharCode(...array))\n .replace(/\\+/g, \"-\")\n .replace(/\\//g, \"_\")\n .replace(/=/g, \"\");\n\n const encoder = new TextEncoder();\n const data = encoder.encode(codeVerifier);\n const hash = await crypto.subtle.digest(\"SHA-256\", data);\n const codeChallenge = btoa(String.fromCharCode(...new Uint8Array(hash)))\n .replace(/\\+/g, \"-\")\n .replace(/\\//g, \"_\")\n .replace(/=/g, \"\");\n\n return { codeVerifier, codeChallenge };\n}\n\n// Derive encryption key from key material\nexport async function getEncryptionKey(): Promise {\n const encoder = new TextEncoder();\n const keyMaterial = encoder.encode(ENCRYPTION_KEY_MATERIAL);\n const keyHash = await crypto.subtle.digest(\"SHA-256\", keyMaterial);\n\n return await crypto.subtle.importKey(\n \"raw\",\n keyHash,\n { name: \"AES-GCM\" },\n false,\n [\"encrypt\", \"decrypt\"],\n );\n}\n\n// Encrypt data into a URL-safe string\nexport async function encrypt(data: string): Promise {\n const key = await getEncryptionKey();\n const encoder = new TextEncoder();\n const iv = crypto.getRandomValues(new Uint8Array(12)); // 96-bit IV for GCM\n\n const encrypted = await crypto.subtle.encrypt(\n { name: \"AES-GCM\", iv },\n key,\n encoder.encode(data),\n );\n\n // Combine IV + encrypted data\n const combined = new Uint8Array(iv.length + encrypted.byteLength);\n combined.set(iv, 0);\n combined.set(new Uint8Array(encrypted), iv.length);\n\n // Base64url encode\n return btoa(String.fromCharCode(...combined))\n .replace(/\\+/g, \"-\")\n .replace(/\\//g, \"_\")\n .replace(/=/g, \"\");\n}\n\n// Decrypt URL-safe string back to data\nexport async function decrypt(encryptedData: string): Promise {\n try {\n const key = await getEncryptionKey();\n\n // Base64url decode\n const combined = Uint8Array.from(\n atob(encryptedData.replace(/-/g, \"+\").replace(/_/g, \"/\")),\n (c) => c.charCodeAt(0),\n );\n\n // Extract IV and encrypted data\n const iv = combined.slice(0, 12);\n const encrypted = combined.slice(12);\n\n const decrypted = await crypto.subtle.decrypt(\n { name: \"AES-GCM\", iv },\n key,\n encrypted,\n );\n\n const decoder = new TextDecoder();\n return decoder.decode(decrypted);\n } catch {\n throw new Error(\"Failed to decrypt state - invalid or tampered data\");\n }\n}\n\n// Encode state with embedded code_verifier, client_id, and timestamp\nexport async function encodeState(\n codeVerifier: string,\n clientId: string,\n): Promise {\n const payload = JSON.stringify({\n verifier: codeVerifier,\n clientId: clientId,\n timestamp: Date.now(),\n });\n return await encrypt(payload);\n}\n\n// Decode and validate state\nexport async function decodeState(\n state: string,\n): Promise<{ codeVerifier: string; clientId: string }> {\n const decrypted = await decrypt(state);\n const payload = JSON.parse(decrypted);\n\n // Validate timestamp (10 minute expiry)\n const age = Date.now() - payload.timestamp;\n if (age > 10 * 60 * 1000) {\n throw new Error(\"State expired - please restart the OAuth flow\");\n }\n\n return { codeVerifier: payload.verifier, clientId: payload.clientId };\n}\n\n// Get or create OAuth client with two-tier caching\nexport async function getOrCreateClient(\n redirectUri: string,\n clientName?: string,\n): Promise {\n // Check memory cache - if redirect URI matches, return immediately (no blob fetch needed)\n if (cachedClient?.redirect_uris?.[0] === redirectUri) {\n return cachedClient.client_id;\n }\n\n // Check blob storage\n const blobClient = await blob.getJSON(`oauth_client:${redirectUri}`);\n if (blobClient?.redirect_uris?.[0] === redirectUri) {\n cachedClient = blobClient;\n return blobClient.client_id;\n }\n\n // Register new client\n const newClient = await registerPublicClient(redirectUri, clientName);\n cachedClient = newClient;\n await blob.setJSON(`oauth_client:${redirectUri}`, newClient);\n return newClient.client_id;\n}\n\n// Register a new public OAuth client via Dynamic Client Registration\nexport async function registerPublicClient(\n redirectUri: string,\n clientName?: string,\n): Promise {\n const response = await fetch(`${OAUTH_ISSUER}/oauth/reg`, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n redirect_uris: [redirectUri],\n grant_types: [\"authorization_code\", \"refresh_token\"],\n response_types: [\"code\"],\n client_name: clientName ?? DEFAULT_CLIENT_NAME,\n token_endpoint_auth_method: \"none\", // Public client - no secret authentication\n }),\n });\n\n if (!response.ok) {\n const error = await response.text();\n throw new Error(`Client registration failed: ${error}`);\n }\n\n const clientData = await response.json();\n return clientData;\n}","label",[132],"dc7b8d70-b502-11f0-9018-0224a6c84d84","middleware.ts","83ef0a4e-b42e-11f0-a32e-0224a6c84d84",["D",1761768434191],57,"import {\n decodeState,\n encodeState,\n generatePKCE,\n getOrCreateClient,\n getRedirectUri,\n} from \"./oauth.ts\";\nimport { parseVal } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst OAUTH_ISSUER = \"https://val.town\";\nconst DEFAULT_SCOPES = \"openid offline_access user_r\";\n\n// Generate default client name from val metadata\nfunction getDefaultClientName(): string {\n try {\n const val = parseVal(import.meta.url);\n return `${val.name} by ${val.owner}`;\n } catch {\n return \"Generic Val Town App\";\n }\n}\n\ntype AppFetch = (req: Request) => Promise | Response;\nexport type Options = { \n scopes?: string[];\n clientName?: string;\n};\n\nexport default function oauthMiddleware(\n appFetch: AppFetch,\n opts: Options = {},\n): AppFetch {\n return (req: Request) => {\n const url = new URL(req.url);\n\n if (url.pathname === \"/auth/login\") return handleLogin(req, opts);\n if (url.pathname === \"/auth/callback\") return handleCallback(req);\n if (url.pathname === \"/auth/logout\") return handleLogout(req);\n\n // TODO: get and set from the session, ensure the headers are trusted, ie delete those headers before setting them\n // write the session code in session.ts\n // Maybe get inspired from https://www.val.town/x/stevekrouse/luciaMagicLinkStarter/code/backend/database/sessions.ts\n // Can we use our dynamically generated encryption key used elsewhere in this app to encrypt the user state in the session\n // and then decode that on the server to get the data and not store any sessions in a db?\n // const sess = await readSession(req);\n // if (sess) {\n // const h = new Headers(req.headers);\n // if (sess.sub) h.set(\"X-VT-User-Id\", String(sess.sub));\n // if (sess.email) h.set(\"X-VT-User-Email\", String(sess.email));\n // if (sess.name) h.set(\"X-VT-User-Name\", String(sess.name));\n // req = new Request(req, { headers: h });\n // }\n\n return appFetch(req);\n };\n}\n\n// Home page - initiate OAuth flow\nasync function handleLogin(req: Request, opts: Options) {\n try {\n const redirectUri = getRedirectUri(req);\n const clientName = opts.clientName ?? getDefaultClientName();\n const clientId = await getOrCreateClient(redirectUri, clientName);\n\n const { codeVerifier, codeChallenge } = await generatePKCE();\n\n const state = await encodeState(codeVerifier, clientId);\n\n const scopes = opts.scopes?.join(\" \") ?? DEFAULT_SCOPES;\n\n const authUrl = new URL(`${OAUTH_ISSUER}/oauth/auth`);\n authUrl.searchParams.set(\"client_id\", clientId);\n authUrl.searchParams.set(\"redirect_uri\", redirectUri);\n authUrl.searchParams.set(\"response_type\", \"code\");\n authUrl.searchParams.set(\"scope\", scopes);\n authUrl.searchParams.set(\"code_challenge\", codeChallenge);\n authUrl.searchParams.set(\"code_challenge_method\", \"S256\");\n authUrl.searchParams.set(\"state\", state);\n authUrl.searchParams.set(\"prompt\", \"login consent\");\n\n // redirect to authURL\n return new Response(null, {\n headers: {\n Location: authUrl.toString(),\n },\n status: 302,\n });\n } catch (error) {\n return new Response(\n `\n \n \n OAuth DCR Test - Error\n \n \n

Registration Error

Failed to register OAuth client: ${error.message}

Try again

\n \n \n `,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n }\n}\n\n// OAuth callback handler\nasync function handleCallback(req: Request) {\n const url = new URL(req.url);\n const code = url.searchParams.get(\"code\");\n const state = url.searchParams.get(\"state\");\n\n if (!code) return new Response(\"Missing code\", { status: 400 });\n if (!state) return new Response(\"Missing state\", { status: 400 });\n\n try {\n const redirectUri = getRedirectUri(req);\n const { codeVerifier, clientId } = await decodeState(state);\n\n const tokenResponse = await fetch(`${OAUTH_ISSUER}/oauth/token`, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/x-www-form-urlencoded\",\n },\n body: new URLSearchParams({\n grant_type: \"authorization_code\",\n code,\n redirect_uri: redirectUri,\n client_id: clientId,\n code_verifier: codeVerifier,\n // Note: NO client_secret for public clients\n }),\n });\n\n if (!tokenResponse.ok) {\n const error = await tokenResponse.text();\n return new Response(error, { status: 500 });\n }\n\n const tokens = await tokenResponse.json();\n\n const userInfoResponse = await fetch(`${OAUTH_ISSUER}/oauth/userinfo`, {\n headers: {\n Authorization: `Bearer ${tokens.access_token}`,\n },\n });\n\n const userInfo = userInfoResponse.ok ? await userInfoResponse.json() : null;\n\n const protectedResponse = await fetch(`${OAUTH_ISSUER}/oauth/protected`, {\n headers: {\n Authorization: `Bearer ${tokens.access_token}`,\n },\n });\n\n const protectedData = protectedResponse.ok\n ? await protectedResponse.json()\n : null;\n\n return Response.json({\n success: true,\n tokens,\n userInfo,\n protectedData,\n });\n } catch (error) {\n return Response.json({\n success: false,\n error: error.message,\n }, { status: 500 });\n }\n}",[144],"38caf86a-b45c-11f0-9621-0224a6c84d84","example.tsx",104,["D",1761696863100],20,"http","/** @jsxImportSource https://esm.sh/hono/jsx */\nimport { Hono } from \"https://esm.sh/hono\";\nimport oauth from \"./middleware.ts\";\n\nconst app = new Hono();\napp.get(\"/\", (c) => {\n const uid = c.req.header(\"X-VT-User-Id\");\n return c.render(\n \n \n

Val Town Auth Demo

\n {uid\n ? (\n

\n Logged in as {uid}. Profile\n

\n )\n : Log in}\n {/* TODO: target=\"_top\" because it doesn't work in an iframe yet, and has a bad error message there */}\n \n ,\n );\n});\n\napp.get(\"/me\", (c) => {\n const id = c.req.header(\"X-VT-User-Id\");\n if (!id) return c.redirect(\"/auth/login\");\n\n const email = c.req.header(\"X-VT-User-Email\") ?? \"\";\n const name = c.req.header(\"X-VT-User-Name\") ?? \"\";\n\n return c.render(\n \n \n

Your Profile

id: {id}
email: {email}
name: {name}

\n Log out\n

\n Home\n

\n \n ,\n );\n});\n\nexport default oauth(app.fetch);","std-oauth",[151],"3a02d16a-b4fe-11f0-815b-0224a6c84d84","TESTING.md","3a02d228-b4fe-11f0-815b-0224a6c84d84",105,["D",1761766443635],0,"# OAuth Flow Testing Guide\n\nThis guide explains how to test the @std/oauth library end-to-end using Playwright and Val Town's MCP server.\n\n## Prerequisites\n\n- Access to Val Town MCP server tools (`mcp__val-town__*` and `mcp__playwright__*`)\n- Test email address: `stevekrouse-6ca82204b4fa11f0ad790224a6c84d84@valtown.email`\n- The `@stevekrouse/login-to-val-town-shim` val must be set up to capture login emails\n\n## Testing Steps\n\n### Step 1: Log in to Val Town (if needed)\n\nIf you're not already logged in to Val Town in the browser:\n\n1. Navigate to the sign-in page:\n ```javascript\n mcp__playwright__browser_navigate({ url: \"https://www.val.town/auth/signin/\" })\n ```\n\n2. Enter the test email address in the email field and click \"Continue\"\n\n3. Retrieve the login link from SQLite:\n ```javascript\n mcp__val-town__sqlite_execute({\n sql: \"SELECT text, timestamp FROM login_to_val_town_shim_emails ORDER BY timestamp DESC LIMIT 1\"\n })\n ```\n\n4. Extract the login URL from the email text (look for the `https://clerk.val.town/v1/verify?...` URL)\n\n5. Navigate to the login URL in Playwright to complete sign-in\n\n### Step 2: Test the OAuth Flow\n\nOnce logged in to Val Town, test the OAuth flow:\n\n1. **Navigate to the OAuth example app:**\n ```javascript\n mcp__playwright__browser_navigate({ \n url: \"https://std--91178458b42e11f0b6f30224a6c84d84.web.val.run\" \n })\n ```\n \n **Expected result:** Page shows \"Val Town Auth Demo\" with a \"Log in\" link\n\n2. **Click the \"Log in\" link:**\n ```javascript\n mcp__playwright__browser_click({ element: \"Log in link\", ref: \"e3\" })\n ```\n \n **Expected result:** Redirects to Val Town OAuth authorization page showing:\n - \"Authorize Application\" heading\n - \"Generic Val Town App would like to access your Val Town account\"\n - List of requested permissions (basic profile, read vals, user_r scope)\n - \"Deny\" and \"Allow\" buttons\n\n3. **Click \"Allow\":**\n ```javascript\n mcp__playwright__browser_click({ element: \"Allow button\", ref: \"e19\" })\n ```\n \n **Expected result:** Redirects back to the callback URL with JSON response containing:\n ```json\n {\n \"success\": true,\n \"tokens\": {\n \"access_token\": \"...\",\n \"expires_in\": 86400,\n \"id_token\": \"...\",\n \"refresh_token\": \"...\",\n \"scope\": \"openid offline_access\",\n \"token_type\": \"Bearer\"\n },\n \"userInfo\": null,\n \"protectedData\": {\n \"accountId\": \"...\",\n \"clientId\": \"...\",\n ...\n }\n }\n ```\n\n## Current Implementation Status\n\n### ✅ Working\n- Dynamic client registration\n- PKCE flow (code challenge/verifier)\n- State encryption with 10-minute expiry\n- Authorization code exchange for tokens\n- Access token, ID token, and refresh token retrieval\n\n### ⚠️ Known Limitations\n- **No session management:** The callback returns JSON tokens instead of creating a session\n- **No user headers:** X-VT-User-Id, X-VT-User-Email, X-VT-User-Name are not set\n- **userInfo returns null:** The userinfo endpoint call may be failing\n- **No /auth/logout:** Logout endpoint is not implemented\n- **Hardcoded redirect URI:** The redirect URI is currently hardcoded in both oauth.ts and middleware.ts\n- **No client caching:** OAuth clients are registered on every login (should be cached in blob storage)\n\n## Debugging Queries\n\n### Check recent login emails:\n```sql\nSELECT text, timestamp, datetime(timestamp/1000, 'unixepoch') as datetime \nFROM login_to_val_town_shim_emails \nORDER BY timestamp DESC \nLIMIT 5\n```\n\n### Clear old login emails (optional):\n```sql\nDELETE FROM login_to_val_town_shim_emails \nWHERE timestamp < (SELECT MAX(timestamp) - 3600000 FROM login_to_val_town_shim_emails)\n```\n\n## Notes for Agents\n\n- The OAuth flow works but doesn't maintain sessions between requests\n- The example app currently just displays the raw JSON response\n- To test with a fresh authorization, revoke access in Val Town account settings first\n- The login-to-val-town-shim stores emails in SQLite for secure access (not publicly accessible via HTTP)",[160],"e5e68b76-b502-11f0-9f72-0224a6c84d84",["D",1761768449991],[28],"pulls","branches",1,"forks","envVars",{"_178":164,"_180":164},"connections",{"_178":164,"_179":164},"count","unfilledCount","emptyCount",{"_42":167,"_32":28,"_30":31,"_134":-5,"_40":41,"_39":14,"_136":25,"_37":199,"_13":63,"_33":20,"_34":36,"_24":25,"_141":-5,"_187":200,"_27":201},{"_42":159,"_32":160,"_30":161,"_134":-5,"_40":41,"_39":162,"_136":25,"_37":196,"_13":164,"_33":20,"_34":165,"_24":25,"_141":-5,"_187":197,"_27":198},{"_42":150,"_32":151,"_30":57,"_134":-5,"_40":41,"_39":152,"_136":25,"_37":193,"_13":154,"_33":155,"_34":156,"_24":25,"_141":157,"_187":194,"_27":195},{"_42":143,"_32":144,"_30":145,"_134":-5,"_40":41,"_39":135,"_136":25,"_37":190,"_13":147,"_33":139,"_34":148,"_24":25,"_141":-5,"_187":191,"_27":192},{"_42":131,"_32":132,"_30":133,"_134":-5,"_40":41,"_39":135,"_136":25,"_37":186,"_13":138,"_33":139,"_34":140,"_24":25,"_141":-5,"_187":188,"_27":189},["D",1761768434191],"children",[],[132],["D",1761768434191],[],[144],["D",1761696863100],[],[151],["D",1761766443635],[],[160],["D",1761768449991],[],[28],["D",1761677232251],{"_97":96,"_104":100},{"_97":96,"_98":-5,"_99":100,"_18":-5,"_101":102,"_103":25},{"_13":86,"_32":87,"_42":41,"_88":43,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":44,"_95":96},"ctx",{"_79":-5,"_123":239,"_240":241,"_242":243,"_244":25,"_245":25,"_246":25,"_247":59,"_248":-5,"_249":-7,"_250":-7,"_251":164,"_252":25,"_253":25,"_254":-5,"_255":25,"_256":25,"_257":25,"_258":-5},"ENV",{"_210":211,"_212":213,"_214":87,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","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"]

Diff · v111