Log in with Val Town

\n Opening a secure Val Town login window...\n

\n \n \n \n );\n}\n\nfunction CallbackSuccessDocument({ messageType }: CallbackSuccessPageProps) {\n return (\n \n \n \n \n Login complete\n \n \n \n

Login complete

\n You can close this window.\n

\n \n \n \n );\n}\n",[18,79],"b094d09f-b8c5-4edb-acf7-e18263b849e0",["D",1781441668159],"import {\n decodeState,\n encodeState,\n generatePKCE,\n getDefaultClientName,\n getOrCreateClient,\n getRedirectUri,\n} from \"../oauth.ts\";\nimport {\n createSessionData,\n decryptSession,\n encryptSession,\n SessionData,\n} from \"../session.ts\";\nimport { callbackSuccessPage, framedLoginPage } from \"./pages.tsx\";\nimport {\n parseVal,\n readFile,\n} from \"https://esm.town/v/std/utils/index.ts\";\nimport ValTown from \"npm:@valtown/sdk@3.10.0\";\n\nconst OAUTH_ISSUER = \"https://val.town\";\nconst DEFAULT_SCOPES = \"openid offline_access profile user_r\";\nconst SESSION_COOKIE_NAME = \"vt_session\";\nconst SESSION_COOKIE_MAX_AGE_SECONDS = 30 * 24 * 60 * 60;\nconst AUTH_SUCCESS_MESSAGE_TYPE = \"std_oauth_success\";\n\ntype AuthFileRoute = {\n path: string;\n contentType: string;\n};\n\nconst AUTH_FILE_ROUTES = new Map([\n [\n \"/auth/client/framed-login.js\",\n {\n path: \"/middleware/client/framed-login.js\",\n contentType: \"text/javascript; charset=utf-8\",\n },\n ],\n [\n \"/auth/client/callback-success.js\",\n {\n path: \"/middleware/client/callback-success.js\",\n contentType: \"text/javascript; charset=utf-8\",\n },\n ],\n [\n \"/auth/client/oauth.css\",\n {\n path: \"/middleware/client/oauth.css\",\n contentType: \"text/css; charset=utf-8\",\n },\n ],\n]);\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(\n req: Request,\n): 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(appFetch: AppFetch): AppFetch;\nexport function oauthMiddleware(opts: Options, appFetch: AppFetch): AppFetch;\nexport function oauthMiddleware(\n optsOrAppFetch: Options | AppFetch,\n appFetch?: AppFetch,\n): AppFetch {\n if (typeof optsOrAppFetch === \"function\") {\n return createMiddleware(optsOrAppFetch, {});\n } else {\n return createMiddleware(appFetch, optsOrAppFetch);\n }\n}\n\n// Internal middleware creation function\nfunction createMiddleware(appFetch: AppFetch, opts: Options): AppFetch {\n return async (req: Request) => {\n const url = new URL(req.url);\n const authFileRoute = AUTH_FILE_ROUTES.get(url.pathname);\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 if (url.pathname === \"/auth/logo\") return handleLogo(url);\n if (authFileRoute) return handleAuthFile(authFileRoute);\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, 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 if (req.headers.get(\"sec-fetch-dest\") !== \"iframe\") {\n return new Response(null, {\n status: 302,\n headers: { Location: authUrl.toString() },\n });\n }\n\n return framedLoginPage({\n authUrl: authUrl.toString(),\n messageType: AUTH_SUCCESS_MESSAGE_TYPE,\n });\n } catch (error) {\n console.error(\"OAuth error:\", error);\n const errorMsg = error instanceof Error\n ? error.message\n : error?.toString() || \"Unknown error\";\n return new Response(\n `OAuth login failed: ${errorMsg}`,\n { status: 500, headers: { \"Content-Type\": \"text/plain\" } },\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, 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 const client = new ValTown({ bearerToken: tokens.access_token });\n\n // Fetch profile and org memberships in parallel\n const orgHandle = parseVal().username;\n const [me, userOrgs] = await Promise.all([\n client.me.profile.retrieve(),\n Array.fromAsync(client.orgs.list({})),\n ]);\n const isOrgMember = me.username === orgHandle ||\n userOrgs.some((o) => o.username === orgHandle);\n\n const sessionData = createSessionData(\n me,\n {\n accessToken: tokens.access_token,\n refreshToken: tokens.refresh_token,\n idToken: tokens.id_token,\n isOrgMember,\n },\n );\n\n // Encrypt session for cookie\n const encryptedSession = await encryptSession(sessionData, redirectUri);\n\n const headers = new Headers();\n headers.set(\"Set-Cookie\", sessionCookie(encryptedSession));\n return callbackSuccessPage({ messageType: AUTH_SUCCESS_MESSAGE_TYPE }, headers);\n } catch (error) {\n console.error(\"OAuth callback error:\", error);\n const errorMsg = error instanceof Error\n ? error.message\n : error?.toString() || \"Unknown error\";\n return new Response(`Authentication failed: ${errorMsg}`, {\n status: 500,\n });\n }\n}\n\n// Logout handler\nasync function handleLogout(req: Request) {\n if (req.method !== \"POST\") {\n return new Response(\n \"Method not allowed. Use POST to log out.\",\n { status: 405 },\n );\n }\n\n // Clear session cookie by setting Max-Age=0\n const headers = new Headers();\n headers.set(\"Location\", \"/\");\n headers.set(\"Set-Cookie\", sessionCookie(\"\", 0));\n\n return new Response(null, {\n status: 302,\n headers,\n });\n}\n\nfunction sessionCookie(\n value: string,\n maxAgeSeconds = SESSION_COOKIE_MAX_AGE_SECONDS,\n): string {\n return `${SESSION_COOKIE_NAME}=${value}; Path=/; HttpOnly; Secure; SameSite=None; Max-Age=${maxAgeSeconds}`;\n}\n\nasync function handleAuthFile(route: AuthFileRoute): Promise {\n const file = await readFile(route.path, import.meta.url);\n\n return new Response(file, {\n headers: {\n \"Content-Type\": route.contentType,\n \"Cache-Control\": \"no-store\",\n },\n });\n}\n\n// Logo handler - serves Val Town logo as SVG\n// Use ?theme=light for white logo (on dark backgrounds)\nasync function handleLogo(url: URL): Promise {\n const path = url.searchParams.get(\"theme\") === \"light\"\n ? \"/middleware/assets/val-town-logo-light.svg\"\n : \"/middleware/assets/val-town-logo.svg\";\n const svg = await readFile(path, import.meta.url);\n\n return new Response(svg, {\n headers: {\n \"Content-Type\": \"image/svg+xml\",\n \"Cache-Control\": \"public, max-age=31536000, immutable\",\n },\n });\n}\n",[18,93],"591e8252-263f-46c7-bd06-22a183d16e2d",["D",1781441668159],[18,100],"7c69cd38-9409-4af1-a4ce-9b8c8409e2d5",["D",1781441668159],[18,107],"pulls","branches",1,"forks","envVars",{"_102":26,"_216":26},"connections",{"_102":26,"_215":26},"unfilledCount","emptyCount",{"_33":182,"_13":18,"_77":108,"_43":-5,"_35":36,"_183":40,"_184":24,"_37":351,"_39":26,"_80":101,"_186":-5,"_82":30,"_187":-5,"_242":352,"_17":353},{"_33":204,"_13":107,"_77":106,"_43":108,"_35":36,"_183":40,"_184":24,"_37":348,"_39":26,"_80":101,"_186":-5,"_82":30,"_187":-5,"_242":349,"_17":350},{"_33":341,"_13":342,"_77":343,"_43":106,"_35":36,"_183":40,"_184":24,"_37":344,"_39":26,"_80":21,"_186":345,"_82":30,"_187":-5,"_242":346,"_17":347},{"_33":334,"_13":335,"_77":336,"_43":106,"_35":36,"_183":40,"_184":24,"_37":337,"_39":26,"_80":21,"_186":338,"_82":30,"_187":-5,"_242":339,"_17":340},{"_33":201,"_13":100,"_77":99,"_43":108,"_35":36,"_183":40,"_184":24,"_37":331,"_39":26,"_80":101,"_186":-5,"_82":30,"_187":-5,"_242":332,"_17":333},{"_33":324,"_13":325,"_77":326,"_43":99,"_35":36,"_183":40,"_184":24,"_37":327,"_39":26,"_80":81,"_186":328,"_82":30,"_187":-5,"_242":329,"_17":330},{"_33":317,"_13":318,"_77":319,"_43":99,"_35":36,"_183":40,"_184":24,"_37":320,"_39":26,"_80":81,"_186":321,"_82":30,"_187":-5,"_242":322,"_17":323},{"_33":310,"_13":311,"_77":312,"_43":99,"_35":36,"_183":40,"_184":24,"_37":313,"_39":26,"_80":21,"_186":314,"_82":30,"_187":-5,"_242":315,"_17":316},{"_33":197,"_13":93,"_77":92,"_43":108,"_35":36,"_183":40,"_184":24,"_37":307,"_39":26,"_80":81,"_186":199,"_82":30,"_187":-5,"_242":308,"_17":309},{"_33":193,"_13":79,"_77":78,"_43":108,"_35":36,"_183":40,"_184":24,"_37":304,"_39":26,"_80":81,"_186":195,"_82":30,"_187":-5,"_242":305,"_17":306},{"_33":295,"_13":296,"_77":297,"_43":-5,"_35":36,"_183":298,"_184":24,"_37":299,"_39":300,"_80":21,"_186":301,"_82":30,"_187":-5,"_242":302,"_17":303},{"_33":286,"_13":287,"_77":288,"_43":-5,"_35":36,"_183":289,"_184":24,"_37":290,"_39":291,"_80":81,"_186":292,"_82":30,"_187":-5,"_242":293,"_17":294},{"_33":278,"_13":279,"_77":121,"_43":-5,"_35":36,"_183":40,"_184":24,"_37":280,"_39":281,"_80":249,"_186":282,"_82":30,"_187":283,"_242":284,"_17":285},{"_33":270,"_13":271,"_77":272,"_43":-5,"_35":36,"_183":256,"_184":24,"_37":273,"_39":26,"_80":249,"_186":274,"_82":30,"_187":275,"_242":276,"_17":277},{"_33":262,"_13":263,"_77":264,"_43":-5,"_35":36,"_183":40,"_184":24,"_37":265,"_39":266,"_80":81,"_186":267,"_82":30,"_187":-5,"_242":268,"_17":269},{"_33":253,"_13":254,"_77":255,"_43":-5,"_35":36,"_183":256,"_184":24,"_37":257,"_39":258,"_80":81,"_186":259,"_82":30,"_187":-5,"_242":260,"_17":261},{"_33":245,"_13":246,"_77":247,"_43":-5,"_35":36,"_183":40,"_184":24,"_37":248,"_39":126,"_80":249,"_186":250,"_82":30,"_187":-5,"_242":251,"_17":252},{"_33":235,"_13":236,"_77":237,"_43":-5,"_35":36,"_183":238,"_184":24,"_37":239,"_39":240,"_80":81,"_186":241,"_82":30,"_187":-5,"_242":243,"_17":244},"97ca4d3a-2b16-11f1-9245-42dde27851f2","session.ts","602fa54e-b507-11f0-b16d-0224a6c84d84",180,["D",1774751146084],3,"// Session management using encrypted cookies\nimport { decrypt, encrypt } from \"./crypto.ts\";\nimport type ValTown from \"npm:@valtown/sdk@3.10.0\";\n\nexport interface SessionData {\n user: ValTown.Me.Profile.ProfileRetrieveResponse;\n accessToken: string;\n refreshToken?: string;\n idToken?: string;\n expiresAt: number; // Unix timestamp in milliseconds\n /** Whether the user is a member of this val's org, checked at login time */\n isOrgMember?: boolean;\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 user: ValTown.Me.Profile.ProfileRetrieveResponse,\n options: {\n accessToken: string;\n refreshToken?: string;\n idToken?: string;\n isOrgMember?: boolean;\n },\n): SessionData {\n return {\n user,\n accessToken: options.accessToken,\n refreshToken: options.refreshToken,\n idToken: options.idToken,\n isOrgMember: options.isOrgMember,\n expiresAt: Date.now() + SESSION_DURATION_MS,\n };\n}\n","children",[],[236],"3e78034a-d20a-4282-a3d5-dbc5f267ee21","org.example.tsx","97c9def4-2b16-11f1-9245-42dde27851f2",["D",1781441668159],"http","/** @jsxImportSource https://esm.sh/hono/jsx */\nimport { Hono } from \"https://esm.sh/hono\";\nimport { getOAuthUserData, oauthMiddleware } from \"./middleware.ts\";\n\nconst app = new Hono();\n\napp.get(\"/\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n\n return c.html(\n \n \n

Org-Only App Demo

\n {!session\n ? (\n \n $\"Val$ \n Log in with Val Town\n \n )\n : !session.isOrgMember\n ? (\n <>\n

\n Logged in as{\" \"}\n {session.user.username}, but you are not a\n member of this org.\n

\n ,\n );\n});\n\napp.onError((err) => Promise.reject(err));\nexport default oauthMiddleware(app.fetch);",[],[246],"fb693636-2ba1-11f1-b44d-42dde27851f2","oauth.ts","1744e9ae-b43d-11f0-999e-0224a6c84d84",190,["D",1774811013258],23,"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://val.town\";\n\ninterface OAuthClientData {\n client_id: string;\n redirect_uris: string[];\n [key: string]: unknown;\n}\n\n// Client cache: stores most recent client in memory\nlet cachedClient: OAuthClientData | null = null;\n\nexport function getDefaultClientName(): string {\n try {\n const val = parseVal();\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}",[],[254],"5e2cd316-dc91-4908-ba48-0752f604adf7","middleware.ts","83ef0a4e-b42e-11f0-a32e-0224a6c84d84",["D",1781441668159],92,"export * from \"./middleware/index.ts\";\n",[],[263],"fb68bb34-2ba1-11f1-b44d-42dde27851f2","generate-random-signing-key.ts","fb68bc06-2ba1-11f1-b44d-42dde27851f2",["D",1774811013258],"import { randomBytes } from \"node:crypto\";\nexport default () => Response.json(randomBytes(32).toString(\"base64\"));","generate-random-signing-key",[],[271],"bd1569ab-1a04-4b07-a9a9-02df03bddfc6","example.tsx",["D",1781441668159],62,"/** @jsxImportSource https://esm.sh/hono/jsx */\nimport { Hono } from \"https://esm.sh/hono\";\nimport { getOAuthUserData, oauthMiddleware } 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

OAuth Demo

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

\n Logged in as {user.username}\n

\n ,\n );\n});\n\napp.onError((err) => Promise.reject(err));\nexport default oauthMiddleware(app.fetch);","std-oauth",[],[279],"01f05f24-078b-11f1-86e0-42dde27851f2","crypto.ts","0560d0e4-b50b-11f0-aab9-0224a6c84d84",178,["D",1770842903945],2,"// 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) return cachedEncryptionKey;\n\n // Check environment variable (fastest - no I/O)\n const envKey = Deno.env.get(\"OAUTH_STATE_ENCRYPTION_KEY\");\n if (envKey) {\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) as string | null;\n if (storedKey) {\n cachedEncryptionKey = storedKey;\n return storedKey;\n }\n } catch (_error) {\n // Blob doesn't exist or is in old format, will create new one below\n }\n // Generate new random key (32 bytes = 256 bits)\n const randomBytes = new Uint8Array(32);\n crypto.getRandomValues(randomBytes);\n const newKey = btoa(String.fromCharCode(...randomBytes));\n // Store in blob for persistence\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(\n redirectUri: string,\n): 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(\n data: string,\n redirectUri: string,\n): 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}",[],[287],"5cfcd520-2f52-11f1-88a5-42dde27851f2","README.md","9cbce088-b441-11f0-80ca-0224a6c84d84",232,["D",1775216621894],41,"# std/oauth – Login with Val Town OAuth Middleware\n\nAdd user auth to your Val Town app in seconds.\n\nAllow Val Town user to log into your app with one click. You can authorize users\nbased on their membership in your org account or by their username or Val Town\nuser ID.\n\nAdding Val Town OAuth is as easy as (asking your agent to) import & wrap your\napp with `oauthMiddleware`. Then your app is augmented with `/auth/login`,\n`/auth/logout` routes, you can link to where appropriate.\n\n## Features\n\n- **Zero config** — works out of the box, no API keys or environment variables\n needed\n- **Stateless sessions** — encrypted cookies, no database required\n- **OAuth 2.0 + PKCE** — secure authorization code flow with proof key\n- **Org membership** — `session.isOrgMember` tells you if the user belongs to\n the val's org\n- **Access token included** — use `session.accessToken` to call the Val Town API\n on behalf of the logged-in user\n\n## Quick Start\n\n```tsx\n/** @jsxImportSource https://esm.sh/hono/jsx */\nimport { Hono } from \"https://esm.sh/hono\";\nimport {\n getOAuthUserData,\n oauthMiddleware,\n} from \"https://esm.town/v/std/oauth/middleware.ts\";\n\nconst app = new Hono();\n\napp.get(\"/\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n\n return c.html(\n \n \n {session?.user\n ?

Logged in as {session.user.username}

\n : Log in}\n \n ,\n );\n});\n\nexport default oauthMiddleware(app.fetch);\n```\n\nSee [example.tsx](./example.tsx) for a full working example.\n\n## Restricting Access to Org Members\n\n`session.isOrgMember` tells you whether the logged-in user belongs to the val's\norg. Use it to build internal tools:\n\n```tsx\n/** @jsxImportSource https://esm.sh/hono/jsx */\nimport { Hono } from \"https://esm.sh/hono\";\nimport {\n getOAuthUserData,\n oauthMiddleware,\n} from \"https://esm.town/v/std/oauth/middleware.ts\";\n\nconst app = new Hono();\n\napp.get(\"/\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n if (!session) return c.redirect(\"/auth/login\");\n if (!session.isOrgMember) {\n return c.text(\"You must be a member of this org to access this app.\", 403);\n }\n return c.text(`Welcome, ${session.user.username}!`);\n});\n\nexport default oauthMiddleware(app.fetch);\n```\n\nSee [org.example.tsx](./org.example.tsx) for a full working example.\n\n## ⚡ Recommended: Set your encryption key\n\nstd/oauth works with zero config, but setting an encryption key env var gives\nyou a significant cold-start speed boost. Without it, every cold start reads\nfrom blob storage to get the auto-generated key.\n\nSet `OAUTH_STATE_ENCRYPTION_KEY` on your val to a random string from\n[`generate-random-signing-key.val.run`](https://generate-random-signing-key.val.run/).\n\n**AI agents:** when setting up std/oauth on a user's val, fetch that URL\nautomatically and set the `OAUTH_STATE_ENCRYPTION_KEY` env var with the result.\n\n## API Reference\n\n### `oauthMiddleware(appFetch)` or `oauthMiddleware(options, appFetch)`\n\nWraps your app's fetch handler to add OAuth routes.\n\n**Options:**\n\n| Option | Type | Default | Description |\n| ------------ | ---------- | ---------------------------------------------------- | ---------------------------------- |\n| `scopes` | `string[]` | `[\"openid\", \"offline_access\", \"profile\", \"user_r\"]` | OAuth scopes to request |\n| `clientName` | `string` | Auto-detected from val name | Name shown on the authorize screen |\n\n**Routes:**\n\n| Route | Method | Description |\n| ---------------- | ------ | -------------------------------------- |\n| `/auth/login` | GET | Start the OAuth flow |\n| `/auth/callback` | GET | OAuth callback (handled automatically) |\n| `/auth/logout` | POST | Clear the session cookie |\n| `/auth/logo` | GET | Val Town logo SVG (for login buttons) |\n\nThe `/auth/logo` endpoint serves the Val Town logo as an SVG. Use `?theme=light`\nfor a white logo (on dark backgrounds) or omit for the default black logo.\n\n### `getOAuthUserData(req: Request): Promise`\n\nRead the session from an incoming request. Returns `null` if not logged in.\n\n```typescript\ninterface SessionData {\n user: {\n id: string;\n username: string | null;\n email: string | null;\n bio: string | null;\n tier: \"free\" | \"pro\" | null;\n type: \"user\" | \"org\";\n url: string;\n links: {\n self: string;\n profileImageUrl: string | null;\n };\n };\n accessToken: string; // Val Town API token (act on behalf of the user)\n refreshToken?: string;\n idToken?: string;\n expiresAt: number; // Unix timestamp (ms)\n isOrgMember?: boolean; // true if user belongs to this val's org\n}\n```\n\n## Environment Variables\n\n| Variable | Required | Description |\n| ---------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `OAUTH_STATE_ENCRYPTION_KEY` | No | Encryption key for sessions. Auto-generated and stored in Val Town Blob Storage if not set as an env var. We recommend setting manually (`https://generate-random-signing-key.val.run/`) for better cold-start performance. (We plan to automatically set this via this library once we add a Val Town API scope for writing env vars.) |\n\n## How It Works\n\n```mermaid\nsequenceDiagram\n participant User\n participant App as Your Val\n participant VT as Val Town OAuth\n\n User->>App: Click \"Log in\" → GET /auth/login\n App->>VT: Redirect to /oauth/auth (PKCE)\n User->>VT: Authorize\n VT->>App: GET /auth/callback?code=…\n App->>VT: Exchange code for tokens\n App->>VT: Fetch profile + org membership\n App->>User: Set encrypted session cookie, redirect to /\n Note over User,App: Subsequent requests read the cookie\n User->>App: GET / (with cookie)\n App->>App: Decrypt → SessionData\n```\n\nSessions last 30 days and are stored entirely in the cookie (no server-side\nstorage).\n\n## Security\n\nThis code falls under Val Town's\n[Vulnerability Disclosure Policy](https://docs.val.town/contact-us/security/).\nWe are actively soliciting bug reports and will pay bounties depending on the\nseverity of the issue found.\n\nIf you discover a vulnerability, please report it privately by emailing\n[security@val.town](mailto:security@val.town). Do not publish or reveal the\nissue until it has been resolved.",[],[296],["D",1781441668159],[],[18,79],["D",1781441668159],[],[18,93],"e29e53c9-688b-4491-a10a-a49a84c2600e","oauth.css","2db70214-67f0-11f1-9d75-1607ee4eb77e",["D",1781441668159],".oauth-page {\n min-height: 100vh;\n margin: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #f8fafc;\n color: #0f172a;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n}\n\n.oauth-panel {\n width: min(100%, 24rem);\n box-sizing: border-box;\n padding: 2rem;\n text-align: center;\n}\n\n.oauth-heading {\n margin: 0 0 1rem;\n font-size: 2rem;\n line-height: 1.15;\n font-weight: 800;\n letter-spacing: 0;\n}\n\n.oauth-message {\n margin: 0;\n color: #475569;\n line-height: 1.5;\n}\n\n.oauth-action {\n display: inline-block;\n margin-top: 1.5rem;\n border-radius: 0.5rem;\n background: #0ea5e9;\n color: white;\n padding: 0.75rem 1rem;\n font-weight: 700;\n text-decoration: none;\n}\n",[],[18,100,311],"c0993b1a-9c93-40d3-acab-4c49b5584e7e","framed-login.js","2db6fb70-67f0-11f1-9d75-1607ee4eb77e",["D",1781441668159],"const root = document.documentElement;\nconst login = document.getElementById(\"login\");\nconst message = document.getElementById(\"message\");\nconst authUrl = root.dataset.authUrl || login?.getAttribute(\"href\");\nconst messageType = root.dataset.messageType;\n\nfunction openLogin(event) {\n event?.preventDefault();\n const popup = window.open(authUrl, \"valTownOAuth\", \"width=600,height=700\");\n if (!popup) {\n message.textContent =\n \"Your browser blocked the popup. Use the link to continue.\";\n return;\n }\n popup.focus?.();\n}\n\nfunction setup() {\n if (!login || !message || !authUrl || !messageType) return;\n window.addEventListener(\"message\", (event) => {\n if (event.origin !== window.location.origin) return;\n if (!event.data || event.data.type !== messageType) return;\n window.location.replace(\"/\");\n });\n\n login.addEventListener(\"click\", openLogin);\n openLogin();\n}\n\nsetup();",[],[18,100,318],"01d53f6a-05b3-4074-99a3-cbd2e18a2129","callback-success.js","2db6f508-67f0-11f1-9d75-1607ee4eb77e",["D",1781441668159],"const messageType = document.documentElement.dataset.messageType;\nconst message = document.getElementById(\"message\");\n\nif (window.opener && !window.opener.closed && messageType) {\n window.opener.postMessage({ type: messageType }, window.location.origin);\n window.close();\n if (message) message.textContent = \"Login complete. You can close this window.\";\n} else {\n window.location.replace(\"/\");\n}\n",[],[18,100,325],["D",1781441668159],[222,223,224],[18,100],"f748ff8c-06c6-4028-a321-124f6c13d7c4","val-town-logo.svg","2db6eb58-67f0-11f1-9d75-1607ee4eb77e",["D",1781441668159],"\n",[],[18,107,335],"690d7c8d-13c2-48ea-b7f1-3cfbf3724d0c","val-town-logo-light.svg","2db6d708-67f0-11f1-9d75-1607ee4eb77e",["D",1781441668159],"\n",[],[18,107,342],["D",1781441668159],[219,220],[18,107],["D",1781441668159],[218,221,225,226],[18],["D",1761677232251],{"_11":12,"_160":156},{"_11":12,"_155":-5,"_85":156,"_31":-5,"_157":158,"_159":30},{"_39":40,"_13":16,"_33":36,"_147":110,"_148":-5,"_149":-5,"_150":-5,"_151":-5,"_152":-5,"_153":14,"_154":12},"ctx",{"_53":-5,"_179":391,"_392":393,"_394":395,"_396":30,"_397":30,"_398":30,"_399":24,"_400":-5,"_401":-7,"_402":-7,"_403":26,"_404":30,"_405":30,"_406":-5,"_407":30,"_408":30,"_409":30,"_410":-5},"ENV",{"_362":363,"_364":365,"_366":16,"_367":368,"_369":370,"_371":372,"_373":374,"_375":376,"_377":378,"_379":380,"_381":382,"_383":384,"_385":386,"_387":388,"_389":390},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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 · middleware