[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_232":233,"_234":235},"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",150,"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\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- **Encrypted Session Cookies**: Stateless session management using encrypted\n cookies\n- **CSRF Protection**: Origin header validation for non-GET requests\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, exchanges code for tokens,\n and creates session\n- **`/auth/logout`** - Logs out the user and clears the session cookie\n\n## User Headers\n\nOnce authenticated, all requests include these trusted headers:\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\nThese headers are set by the middleware after validating the session cookie.\nAny user-provided `X-VT-*` headers are removed to ensure they're trusted.\n\n## Environment Variables\n\nOptional:\n\n- `OAUTH_STATE_ENCRYPTION_KEY` - Secret key for encrypting OAuth state and\n sessions\n - If not set, a random key will be auto-generated and stored in blob storage\n - **Performance tip**: Set this to a random value (e.g.,\n `openssl rand -base64 32`) to dramatically speed up your val by avoiding\n blob storage lookups on every request\n - The key is cached in memory after first use for optimal performance\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### session.ts\n\nSession management utilities:\n\n- Encrypted session cookie creation and validation\n- 30-day session duration\n- Stateless design - no database required\n- Stores OAuth tokens (access_token, refresh_token, id_token) and user info\n\n### middleware.ts\n\nHono middleware that:\n\n- Intercepts auth-related routes (`/auth/*`)\n- Manages the OAuth authorization flow\n- Creates and validates encrypted session cookies\n- Sets trusted user headers\n- Provides CSRF protection for non-GET requests\n\n### example.tsx\n\nDemo application showing how to use the middleware\n\n## Session Management\n\nSessions are stored as encrypted cookies with the following characteristics:\n\n- **Storage**: Encrypted cookie (stateless, no database)\n- **Duration**: 30 days (fixed, no rotation)\n- **Cookie Settings**: HttpOnly, Secure, SameSite=Lax\n- **Contents**: User ID, email, name, and OAuth tokens (access, refresh, ID)\n- **Encryption**: AES-GCM using the same key as OAuth state encryption\n\n### Accessing OAuth Tokens\n\nWhile user headers provide basic identity information, the full OAuth tokens\n(including access tokens for API calls) are stored securely in the encrypted\nsession cookie. To access tokens in your application:\n\n```tsx\n// The middleware sets these headers for you\nconst userId = c.req.header(\"X-VT-User-Id\");\nconst userEmail = c.req.header(\"X-VT-User-Email\");\nconst userName = c.req.header(\"X-VT-User-Name\");\n\n// For accessing OAuth tokens, you'll need to implement a helper\n// that reads and decrypts the session cookie (similar to how the\n// middleware does it internally)\n```\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- **Encrypted Sessions**: Cookie contents are encrypted and tamper-proof\n- **Trusted Headers**: User-provided `X-VT-*` headers are removed\n- **CSRF Protection**: Origin header validation for POST/PUT/DELETE requests\n- **Secure Cookies**: HttpOnly, Secure, SameSite=Lax flags\n\n## Known Limitations\n\n- **userInfo endpoint**: Currently may return null or incomplete data\n - This is a known issue with the Val Town OAuth server\n - User ID may show as \"unknown\" until this is resolved\n- **No session rotation**: Sessions are valid for 30 days without rotation\n- **No server-side revocation**: Sessions can't be revoked server-side\n (stateless design)\n\n---\n\n## TODOs\n\n- [ ] Debug why userInfo returns `null` or incomplete data\n- [ ] Consider moving cache information from blob storage to sqlite for\n performance\n- [ ] Add optional session rotation support\n- [ ] Add helper function to extract full session data (including tokens) from\n cookies\n","# Val Town OAuth Library\n\nOAuth authentication middleware for Val Town vals.\n\n## Features\n\n- OAuth 2.0 Authorization Code flow with PKCE\n- Dynamic client registration\n- Encrypted session cookies (stateless)\n- No database required\n\n## Usage\n\n```tsx\n/** @jsxImportSource https://esm.sh/hono/jsx */\nimport { Hono } from \"https://esm.sh/hono\";\nimport { oauthMiddleware, getOAuthUserData } from \"https://esm.town/v/std/oauth/middleware\";\n\nconst app = new Hono();\n\napp.get(\"/\", async (c) => {\n const user = await getOAuthUserData(c.req.raw);\n \n return c.html(\n \n \n {user ? (\n

Logged in as {user.username}

\n ) : (\n Log in\n )}\n \n \n );\n});\n\nexport default oauthMiddleware(app.fetch);\n```\n\n## API\n\n### `oauthMiddleware(appFetch, options?)`\n\nWraps your application to handle OAuth routes.\n\n**Options:**\n- `scopes?: string[]` - OAuth scopes (default: `[\"openid\", \"offline_access\", \"profile\"]`)\n- `clientName?: string` - OAuth client name\n\n**Auto-handled routes:**\n- `/auth/login` - Start OAuth flow\n- `/auth/callback` - OAuth callback\n- `/auth/logout` - Clear session\n\n### `getOAuthUserData(req: Request)`\n\nExtract user data from session cookie.\n\n**Returns:** `SessionData | null`\n\n```typescript\ninterface SessionData {\n userId: string;\n username: string;\n accessToken: string;\n refreshToken?: string;\n idToken?: string;\n expiresAt: number;\n}\n```\n\n## Environment Variables\n\n- `OAUTH_STATE_ENCRYPTION_KEY` (optional) - Encryption key for state and sessions\n - Auto-generated if not set\n - Set manually (e.g., `openssl rand -base64 32`) for better performance\n\n## How It Works\n\n1. User clicks `/auth/login`\n2. Redirects to Val Town OAuth\n3. User authorizes\n4. Callback receives code, exchanges for tokens\n5. User data extracted from ID token\n6. Session encrypted and stored in cookie\n7. Use `getOAuthUserData(req)` to access user data\n\nSessions last 30 days and are stored as encrypted cookies (no server-side storage).\n","createdAt",["D",1761772253630],"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":228,"_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":229,"_81":230,"_83":231,"_85":25},"tree",[199,200,201,202,203,204,205],"files",[199,200,201,202,203,204,205],"counts",{"_189":175,"_190":140,"_191":175,"_192":193,"_194":195},"contents",[126,127,128,129,130,131,132],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":185,"_32":28,"_30":31,"_136":-5,"_40":41,"_39":14,"_138":25,"_37":186,"_13":187,"_33":20,"_34":36,"_24":25,"_143":-5,"_27":188},{"_42":178,"_32":179,"_30":180,"_136":-5,"_40":41,"_39":181,"_138":25,"_37":182,"_13":140,"_33":20,"_34":183,"_24":25,"_143":-5,"_27":184},{"_42":170,"_32":171,"_30":172,"_136":-5,"_40":41,"_39":173,"_138":25,"_37":174,"_13":175,"_33":141,"_34":176,"_24":25,"_143":-5,"_27":177},{"_42":161,"_32":162,"_30":57,"_136":-5,"_40":41,"_39":163,"_138":25,"_37":164,"_13":165,"_33":166,"_34":167,"_24":25,"_143":168,"_27":169},{"_42":153,"_32":154,"_30":155,"_136":-5,"_40":41,"_39":156,"_138":25,"_37":157,"_13":158,"_33":141,"_34":159,"_24":25,"_143":-5,"_27":160},{"_42":145,"_32":146,"_30":147,"_136":-5,"_40":41,"_39":148,"_138":25,"_37":149,"_13":150,"_33":141,"_34":151,"_24":25,"_143":-5,"_27":152},{"_42":133,"_32":134,"_30":135,"_136":-5,"_40":41,"_39":137,"_138":25,"_37":139,"_13":140,"_33":141,"_34":142,"_24":25,"_143":-5,"_27":144},"1ad4b918-b50b-11f0-866a-0224a6c84d84","session.ts","602fa54e-b507-11f0-b16d-0224a6c84d84","parentId",142,"latest",["D",1761771974777],1,"script","// Session management using encrypted cookies\nimport { encrypt, decrypt } from \"./crypto.ts\";\n\nexport interface SessionData {\n userId: string; // Val Town user ID\n username: string; // Val Town username\n accessToken: string;\n refreshToken?: string;\n idToken?: string;\n expiresAt: number; // Unix timestamp in milliseconds\n}\n\nconst SESSION_DURATION_MS = 30 * 24 * 60 * 60 * 1000; // 30 days\n\n/**\n * Encrypt session data into a cookie-safe string\n */\nexport async function encryptSession(\n data: SessionData,\n redirectUri: string,\n): Promise {\n const payload = JSON.stringify(data);\n return await encrypt(payload, redirectUri);\n}\n\n/**\n * Decrypt and validate a session cookie\n * Returns null if invalid or expired\n */\nexport async function decryptSession(\n encryptedSession: string,\n redirectUri: string,\n): Promise {\n try {\n const decrypted = await decrypt(encryptedSession, redirectUri);\n const session = JSON.parse(decrypted) as SessionData;\n\n // Validate expiry\n if (Date.now() >= session.expiresAt) {\n return null;\n }\n\n return session;\n } catch {\n return null;\n }\n}\n\n/**\n * Create a new session with default 30-day expiry\n */\nexport function createSessionData(\n userId: string,\n username: string,\n accessToken: string,\n options: {\n refreshToken?: string;\n idToken?: string;\n } = {},\n): SessionData {\n return {\n userId,\n username,\n accessToken,\n refreshToken: options.refreshToken,\n idToken: options.idToken,\n expiresAt: Date.now() + SESSION_DURATION_MS,\n };\n}\n","label",[134],"436881de-b50b-11f0-89bb-0224a6c84d84","oauth.ts","1744e9ae-b43d-11f0-999e-0224a6c84d84",145,["D",1761772042847],21,"import { parseVal } from \"https://esm.town/v/std/utils/index.ts\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { decrypt, encrypt } from \"./crypto.ts\";\n\nconst OAUTH_ISSUER = \"https://www.val.town\";\n\n// Client cache: stores most recent client in memory\nlet cachedClient: any = null;\n\nexport function getDefaultClientName(): string {\n try {\n const val = parseVal(import.meta.url);\n return `${val.name} by ${val.username}`;\n } catch {\n return \"Generic Val Town App\";\n }\n}\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// Encode state with embedded code_verifier, client_id, and timestamp\nexport async function encodeState(\n codeVerifier: string,\n clientId: string,\n redirectUri: string,\n): Promise {\n const payload = JSON.stringify({\n verifier: codeVerifier,\n clientId: clientId,\n timestamp: Date.now(),\n });\n return await encrypt(payload, redirectUri);\n}\n\n// Decode and validate state\nexport async function decodeState(\n state: string,\n redirectUri: string,\n): Promise<{ codeVerifier: string; clientId: string }> {\n const decrypted = await decrypt(state, redirectUri);\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 = getDefaultClientName(),\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,\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}",[146],"aae77f68-b50b-11f0-8eaf-0224a6c84d84","middleware.ts","83ef0a4e-b42e-11f0-a32e-0224a6c84d84",149,["D",1761772216492],70,"import {\n decodeState,\n encodeState,\n generatePKCE,\n getDefaultClientName,\n getOrCreateClient,\n getRedirectUri,\n} from \"./oauth.ts\";\nimport { createSessionData, decryptSession, encryptSession, SessionData } from \"./session.ts\";\n\nconst OAUTH_ISSUER = \"https://val.town\";\nconst DEFAULT_SCOPES = \"openid offline_access profile\";\nconst SESSION_COOKIE_NAME = \"vt_session\";\n\ntype AppFetch = (req: Request) => Promise | Response;\nexport type Options = {\n scopes?: string[];\n clientName?: string;\n};\n\n// Helper function to extract cookie from request\nfunction getCookie(req: Request, name: string): string | undefined {\n const cookieHeader = req.headers.get(\"Cookie\");\n if (!cookieHeader) return undefined;\n \n const cookies = cookieHeader.split(\";\").map(c => c.trim());\n for (const cookie of cookies) {\n const [cookieName, ...cookieValue] = cookie.split(\"=\");\n if (cookieName === name) {\n return cookieValue.join(\"=\");\n }\n }\n return undefined;\n}\n\n/**\n * Extract OAuth user data from the encrypted session cookie\n * @param req - The Request object\n * @returns SessionData or null if not authenticated\n */\nexport async function getOAuthUserData(req: Request): Promise {\n const sessionCookie = getCookie(req, SESSION_COOKIE_NAME);\n if (!sessionCookie) return null;\n \n try {\n const origin = new URL(req.url).origin;\n const redirectUri = `${origin}/auth/callback`;\n return await decryptSession(sessionCookie, redirectUri);\n } catch (error) {\n console.error(\"Failed to decrypt session:\", error);\n return null;\n }\n}\n\nexport function oauthMiddleware(\n appFetch: AppFetch,\n opts: Options = {},\n): AppFetch {\n return async (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 return appFetch(req);\n };\n}\n\n// Default export for backwards compatibility\nexport default oauthMiddleware;\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, redirectUri);\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 console.error(\"OAuth error:\", error);\n const errorMsg = error?.message || error?.toString() || \"Unknown error\";\n const errorStack = error?.stack || \"\";\n return new Response(\n `\n \n \n OAuth Error\n \n \n

Registration Error

Failed to register OAuth client: ${errorMsg}

${errorStack}

Try again

\n \n \n `,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n }\n}\n\n// Decode JWT without verification (for ID token)\nfunction decodeJWT(token: string): any {\n const parts = token.split('.');\n if (parts.length !== 3) throw new Error('Invalid JWT');\n \n const payload = parts[1];\n const decoded = atob(payload.replace(/-/g, '+').replace(/_/g, '/'));\n return JSON.parse(decoded);\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, redirectUri);\n\n // Exchange authorization code for tokens\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 }),\n });\n\n if (!tokenResponse.ok) {\n const error = await tokenResponse.text();\n return new Response(`Token exchange failed: ${error}`, { status: 500 });\n }\n\n const tokens = await tokenResponse.json();\n\n // Decode ID token to get user info\n const idTokenData = tokens.id_token ? decodeJWT(tokens.id_token) : null;\n \n // Try userinfo endpoint as fallback\n let userData = null;\n try {\n const userInfoResponse = await fetch(`${OAUTH_ISSUER}/oauth/userinfo`, {\n headers: {\n Authorization: `Bearer ${tokens.access_token}`,\n },\n });\n if (userInfoResponse.ok) {\n userData = await userInfoResponse.json();\n }\n } catch (e) {\n console.error(\"Failed to fetch userinfo:\", e);\n }\n\n // Get user ID and username from ID token or userinfo\n const userId = (userData?.sub || idTokenData?.sub || \"unknown\");\n const username = (userData?.preferred_username || userData?.name || idTokenData?.preferred_username || userId);\n\n // Create session data\n const sessionData = createSessionData(\n userId,\n username,\n tokens.access_token,\n {\n refreshToken: tokens.refresh_token,\n idToken: tokens.id_token,\n }\n );\n\n // Encrypt session for cookie\n const encryptedSession = await encryptSession(sessionData, redirectUri);\n\n // Set secure session cookie and redirect to home\n const headers = new Headers();\n headers.set(\"Location\", \"/\");\n headers.set(\n \"Set-Cookie\",\n `${SESSION_COOKIE_NAME}=${encryptedSession}; Path=/; HttpOnly; Secure; SameSite=Lax; Max-Age=${30 * 24 * 60 * 60}`\n );\n\n return new Response(null, {\n status: 302,\n headers,\n });\n } catch (error) {\n console.error(\"OAuth callback error:\", error);\n return new Response(`Authentication failed: ${error.message}`, { status: 500 });\n }\n}\n\n// Logout handler\nasync function handleLogout(req: Request) {\n // Clear session cookie by setting Max-Age=0\n const headers = new Headers();\n headers.set(\"Location\", \"/\");\n headers.set(\n \"Set-Cookie\",\n `${SESSION_COOKIE_NAME}=; Path=/; HttpOnly; Secure; SameSite=Lax; Max-Age=0`\n );\n\n return new Response(null, {\n status: 302,\n headers,\n });\n}\n",[154],"3b8a3638-b50b-11f0-852a-0224a6c84d84","example.tsx",144,["D",1761772029655],26,"http","/** @jsxImportSource https://esm.sh/hono/jsx */\nimport { Hono } from \"https://esm.sh/hono\";\nimport { oauthMiddleware, getOAuthUserData } from \"./middleware.ts\";\n\nconst app = new Hono();\n\napp.get(\"/\", async (c) => {\n const user = await getOAuthUserData(c.req.raw);\n \n return c.html(\n \n \n

Val Town OAuth Demo

\n {user ? (\n <>\n

Logged in as: {user.username}

User ID: {user.userId}

Log out

\n \n ) : (\n <>\n

Not logged in

\n \n )}\n \n \n );\n});\n\nexport default oauthMiddleware(app.fetch);\n","std-oauth",[162],"0560d026-b50b-11f0-aab9-0224a6c84d84","crypto.ts","0560d0e4-b50b-11f0-aab9-0224a6c84d84",139,["D",1761771938780],0,"// Shared encryption utilities for OAuth state and session management\nimport { blob } from \"https://esm.town/v/std/blob\";\n\n// Encryption key cache: stores encryption key material in memory\nlet cachedEncryptionKey: string | null = null;\n\n// Get or create encryption key material with three-tier caching\nexport async function getOrCreateEncryptionKeyMaterial(\n redirectUri: string,\n): Promise {\n // Check memory cache\n if (cachedEncryptionKey) {\n console.log(\"Using cached encryption key from memory\");\n return cachedEncryptionKey;\n }\n\n // Check environment variable (fastest - no I/O)\n const envKey = Deno.env.get(\"OAUTH_STATE_ENCRYPTION_KEY\");\n if (envKey) {\n console.log(\"Using encryption key from environment variable\");\n cachedEncryptionKey = envKey;\n return envKey;\n }\n\n // Check blob storage (scoped to redirect URI)\n const blobKey = `oauth_encryption_key:${redirectUri}`;\n try {\n const storedKey = await blob.getJSON(blobKey);\n if (storedKey) {\n console.log(\"Using encryption key from blob storage\");\n cachedEncryptionKey = storedKey;\n return storedKey;\n }\n } catch (error) {\n console.log(\"Blob not found or invalid format, will generate new key\");\n // Blob doesn't exist or is in old format, will create new one below\n }\n\n // Generate new random key (32 bytes = 256 bits)\n console.log(\"Generating new encryption key\");\n const randomBytes = new Uint8Array(32);\n crypto.getRandomValues(randomBytes);\n const newKey = btoa(String.fromCharCode(...randomBytes));\n\n // Store in blob for persistence\n console.log(\"Storing new encryption key in blob storage\");\n await blob.setJSON(blobKey, newKey);\n cachedEncryptionKey = newKey;\n\n return newKey;\n}\n\n// Derive encryption key from key material\nexport async function getEncryptionKey(redirectUri: string): Promise {\n const keyMaterialString = await getOrCreateEncryptionKeyMaterial(redirectUri);\n const encoder = new TextEncoder();\n const keyMaterial = encoder.encode(keyMaterialString);\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, redirectUri: string): Promise {\n const key = await getEncryptionKey(redirectUri);\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(\n encryptedData: string,\n redirectUri: string,\n): Promise {\n try {\n const key = await getEncryptionKey(redirectUri);\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 data - invalid or tampered\");\n }\n}\n",[171],"02e552ae-b506-11f0-a179-0224a6c84d84","TESTING.md","3a02d228-b4fe-11f0-815b-0224a6c84d84",128,["D",1761769787127],"# OAuth Flow Testing Guide\n\nThis guide explains how to test the @std/oauth library end-to-end using\nPlaywright and Val Town's MCP server.\n\n## Prerequisites\n\n- Access to Val Town MCP server tools (`mcp__val-town__*` and\n `mcp__playwright__*`)\n- Test email address:\n `stevekrouse-6ca82204b4fa11f0ad790224a6c84d84@valtown.email`\n- The `@stevekrouse/login-to-val-town-shim` val must be set up to capture login\n 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({\n url: \"https://www.val.town/auth/signin/\",\n });\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:\n \"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\n `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\n 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\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\n- **No session management:** The callback returns JSON tokens instead of\n 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\n## Debugging Queries\n\n### Check recent login emails:\n\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\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\n first\n- The login-to-val-town-shim stores emails in SQLite for secure access (not\n publicly accessible via HTTP)",[179],"c10a4758-b50b-11f0-9eae-0224a6c84d84",["D",1761772253630],15,[28],"pulls","branches","forks","envVars",{"_196":175,"_198":175},"connections",{"_196":175,"_197":175},"count","unfilledCount","emptyCount",{"_42":185,"_32":28,"_30":31,"_136":-5,"_40":41,"_39":14,"_138":25,"_37":225,"_13":187,"_33":20,"_34":36,"_24":25,"_143":-5,"_207":226,"_27":227},{"_42":178,"_32":179,"_30":180,"_136":-5,"_40":41,"_39":181,"_138":25,"_37":222,"_13":140,"_33":20,"_34":183,"_24":25,"_143":-5,"_207":223,"_27":224},{"_42":170,"_32":171,"_30":172,"_136":-5,"_40":41,"_39":173,"_138":25,"_37":219,"_13":175,"_33":141,"_34":176,"_24":25,"_143":-5,"_207":220,"_27":221},{"_42":161,"_32":162,"_30":57,"_136":-5,"_40":41,"_39":163,"_138":25,"_37":216,"_13":165,"_33":166,"_34":167,"_24":25,"_143":168,"_207":217,"_27":218},{"_42":153,"_32":154,"_30":155,"_136":-5,"_40":41,"_39":156,"_138":25,"_37":213,"_13":158,"_33":141,"_34":159,"_24":25,"_143":-5,"_207":214,"_27":215},{"_42":145,"_32":146,"_30":147,"_136":-5,"_40":41,"_39":148,"_138":25,"_37":210,"_13":150,"_33":141,"_34":151,"_24":25,"_143":-5,"_207":211,"_27":212},{"_42":133,"_32":134,"_30":135,"_136":-5,"_40":41,"_39":137,"_138":25,"_37":206,"_13":140,"_33":141,"_34":142,"_24":25,"_143":-5,"_207":208,"_27":209},["D",1761771974777],"children",[],[134],["D",1761772042847],[],[146],["D",1761772216492],[],[154],["D",1761772029655],[],[162],["D",1761771938780],[],[171],["D",1761769787127],[],[179],["D",1761772253630],[],[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":265,"_266":267,"_268":269,"_270":25,"_271":25,"_272":25,"_273":59,"_274":-5,"_275":-7,"_276":-7,"_277":175,"_278":25,"_279":25,"_280":-5,"_281":25,"_282":25,"_283":25,"_284":-5},"ENV",{"_236":237,"_238":239,"_240":87,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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 · v150