[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_105":106,"_107":108},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","stevekrouse","name","oauth-demos","path","code-tour.tsx","project",{"_22":45,"_11":12,"_33":46,"_47":-5,"_48":42,"_49":50,"_51":50,"_52":53,"_54":-5,"_55":56,"_57":58,"_59":32,"_60":-5,"_61":-5,"_62":36,"_63":64,"_65":66,"_67":68,"_69":70,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":42},"file",{"_22":23,"_11":14,"_24":25,"_26":-5,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":-5,"_13":44},"permalink","https://www.val.town/x/stevekrouse/oauth-demos/code/code-tour.tsx","extension","id","4143b0a1-caf5-4344-a5f0-27e28c56b1c8","fileId","eaf0f77a-a578-11f1-8fe4-1607ee4eb77e","parentId","branchId","335dc83e-9b3b-4975-8589-410ed38c6433","branchVersion",141,"latest",true,"createdAt",["D",1788207429832],"version",1,"fileType","script","content","// Code tour — each chapter shows a simplified snippet with per-line explanations.\n// Highlighting is done server-side with Shiki (one call per chapter, whole snippet\n// at a time) so multi-line constructs tokenize correctly, unlike per-line Prism.\n\ntype Line = { code: string; why: string; comment?: boolean };\ntype Step = { title: string; act: string; why: string; lines: Line[] };\n\nconst ACT1 = \"Part 1 · Get a client identity\";\nconst ACT2 = \"Part 2 · Trade the code for tokens\";\nconst ACT3 = \"Part 3 · Put the connection to work\";\n\nconst steps: Step[] = [\n { title: \"1. Describe providers\", act: ACT1, why: \"Every connection uses the same MCP and OAuth machinery; only protocol endpoints and capabilities vary.\", lines: [\n { code: \"type Provider = {\", why: \"Define the small configuration shape shared by every provider.\" },\n { code: \" endpoint: string;\", why: \"The provider’s authenticated remote MCP endpoint.\" },\n { code: \" auth: string; token: string; register: string;\", why: \"OAuth authorization, token, and DCR endpoints.\" },\n { code: \" cimd: boolean;\", why: \"Whether the authorization server accepts a metadata-document URL as client_id.\" },\n { code: \"};\", why: \"No provider-specific callback, tool adapter, or token-exchange code is needed.\" },\n ]},\n { title: \"2. Discover more providers\", act: ACT1, why: \"The directory can turn standards metadata into a working connection without adding another config object.\", lines: [\n { code: \"const metadataUrl = entry.cimdUrl ?? entry.dcrUrl;\", why: \"Start from the evidence URL already collected by the directory.\" },\n { code: \"const metadata = await fetch(metadataUrl).then(r => r.json());\", why: \"Read the authorization-server metadata document.\" },\n { code: \"return {\", why: \"Construct the same Provider shape from chapter 1.\" },\n { code: \" auth: metadata.authorization_endpoint,\", why: \"Discover where the browser should authorize.\" },\n { code: \" token: metadata.token_endpoint,\", why: \"Discover where the code is exchanged.\" },\n { code: \" register: metadata.registration_endpoint,\", why: \"Discover DCR support directly from metadata (chapter 4 uses it).\" },\n { code: \"};\", why: \"After this, the rest of the flow is provider-independent.\" },\n ]},\n { title: \"3. Generate PKCE\", act: ACT1, why: \"PKCE binds the browser authorization response to the client that initiated it.\", lines: [\n { code: \"const verifier = b64url(randomBytes(48));\", why: \"Create a high-entropy base64url secret that never leaves the server before the callback.\" },\n { code: \"const challenge = await sha256(verifier);\", why: \"Send only base64url(SHA-256(verifier)) — the hash, never the secret.\" },\n { code: \"const state = crypto.randomUUID();\", why: \"Give this browser flow an unpredictable lookup key.\" },\n { code: \"await save({ state, verifier, provider });\", why: \"Persist the verifier and provider until the callback returns.\" },\n ]},\n { title: \"4. Register with DCR\", act: ACT1, why: \"DCR creates a client at runtime, eliminating the developer-portal setup step.\", lines: [\n { code: \"const client = await fetch(provider.register, {\", why: \"POST to the registration endpoint advertised in chapter 2.\" },\n { code: \" method: \\\"POST\\\",\", why: \"Registration is a state-changing protocol operation.\" },\n { code: \" body: JSON.stringify({\", why: \"Send standard OAuth client metadata.\" },\n { code: \" redirect_uris: [callbackUrl],\", why: \"The provider may redirect only to this callback.\" },\n { code: \" token_endpoint_auth_method: \\\"none\\\",\", why: \"This public client relies on PKCE (chapter 3) rather than a durable client secret.\" },\n { code: \" }),\", why: \"The same document works across compliant providers.\" },\n { code: \"}).then(r => r.json());\", why: \"The response supplies the newly created client_id.\" },\n ]},\n { title: \"5. Identify with CIMD\", act: ACT1, why: \"CIMD removes even the registration POST from chapter 4: the client_id is a URL containing the client metadata.\", lines: [\n { code: \"app.get(\\\"/oauth/client-metadata.json\\\", c => c.json({\", why: \"Host a public metadata document at a stable HTTPS URL.\" },\n { code: \" client_id: origin + \\\"/oauth/client-metadata.json\\\",\", why: \"The document identifies itself.\" },\n { code: \" redirect_uris: [origin + \\\"/oauth/callback\\\"],\", why: \"The authorization server validates callbacks against this document.\" },\n { code: \"}));\", why: \"Providers fetch this document whenever they need current metadata.\" },\n { code: \"const clientId = origin + \\\"/oauth/client-metadata.json\\\";\", why: \"Use that URL directly as client_id — no registration request.\" },\n ]},\n { title: \"6. Authorize\", act: ACT2, why: \"DCR and CIMD converge here; only the source of client_id differs (chapters 4 and 5).\", lines: [\n { code: \"const url = new URL(provider.auth);\", why: \"Start with the discovered authorization endpoint.\" },\n { code: \"url.searchParams.set(\\\"client_id\\\", clientId);\", why: \"Either the DCR-issued ID or the CIMD metadata URL.\" },\n { code: \"url.searchParams.set(\\\"redirect_uri\\\", callbackUrl);\", why: \"Tell the provider where to return the code.\" },\n { code: \"url.searchParams.set(\\\"code_challenge\\\", challenge);\", why: \"Bind this request to the secret PKCE verifier from chapter 3.\" },\n { code: \"url.searchParams.set(\\\"state\\\", state);\", why: \"Bind the callback to the stored flow record.\" },\n { code: \"return redirect(url);\", why: \"The user now grants access on the provider’s site.\" },\n ]},\n { title: \"7. Exchange the code\", act: ACT2, why: \"The callback is identical for DCR and CIMD.\", lines: [\n { code: \"const flow = await load(request.query(\\\"state\\\"));\", why: \"Recover the verifier, client ID, and provider safely.\" },\n { code: \"const token = await fetch(provider.token, {\", why: \"POST the short-lived authorization code to the token endpoint.\" },\n { code: \" body: form({ code, client_id: flow.clientId,\", why: \"Identify the same client used during authorization.\" },\n { code: \" code_verifier: flow.verifier }),\", why: \"Prove this is the client that created the PKCE challenge.\" },\n { code: \"}).then(r => r.json());\", why: \"Receive the access token.\" },\n { code: \"await storeEncrypted(token.access_token);\", why: \"Encrypt the token before storing it in project-scoped SQLite.\" },\n ]},\n { title: \"8. Prove the connection\", act: ACT2, why: \"A successful token exchange is not enough; the app immediately uses the token against every provider’s MCP server.\", lines: [\n { code: \"await mcp(\\\"initialize\\\");\", why: \"Negotiate the MCP protocol version and session.\" },\n { code: \"const tools = await mcp(\\\"tools/list\\\");\", why: \"Fetch authenticated capabilities from the real account.\" },\n { code: \"store(tools);\", why: \"Remember what the connected MCP server actually advertised.\" },\n { code: \"// Val Town follows this same path\", comment: true, why: \"Not a line of code — the same initialize → tools/list path serves every provider, with no hand-written Val Town REST adapter.\" },\n ]},\n { title: \"9. Give tools to the model\", act: ACT3, why: \"Every connected MCP server becomes one namespaced tool collection for the chat model.\", lines: [\n { code: \"for (const service of connectedServices) {\", why: \"Process only services authorized in this browser session.\" },\n { code: \" const tools = await service.listTools();\", why: \"Discover current tool schemas dynamically.\" },\n { code: \" for (const tool of tools) {\", why: \"Convert each MCP tool to an OpenAI function tool.\" },\n { code: \" modelTools.push(namespace(service, tool));\", why: \"Namespacing prevents collisions, such as several search tools.\" },\n { code: \" }\", why: \"No service-specific tool-call implementation is required.\" },\n { code: \"}\", why: \"The model can now choose tools across every connection.\" },\n ]},\n { title: \"10. Render safely\", act: ACT3, why: \"The model returns Markdown, but arbitrary model HTML must not reach the page unsanitized.\", lines: [\n { code: \"const markdown = await askConnectedServices(message);\", why: \"The server returns a concise Markdown answer with source links.\" },\n { code: \"const html = marked.parse(markdown);\", why: \"Turn Markdown into readable lists and links.\" },\n { code: \"answer.innerHTML = DOMPurify.sanitize(html);\", why: \"Remove unsafe markup before inserting it into the DOM.\" },\n ]},\n];\n\n// --- Server-side highlighting (Shiki) -------------------------------------\n\nimport { createHighlighter } from \"npm:shiki@3\";\nimport typescript from \"npm:shiki@3/langs/typescript.mjs\";\nimport vesper from \"npm:shiki@3/themes/vesper.mjs\";\n\nconst highlighter = await createHighlighter({ themes: [vesper], langs: [typescript] });\n\nconst esc = (s: string) => s.replaceAll(\"&\", \"&\").replaceAll(\"<\", \"<\").replaceAll(\">\", \">\").replaceAll('\"', \""\");\n\n// Highlight each chapter's snippet as one block, then split back into lines so\n// every line can still be clicked individually.\nfunction highlightLines(step: Step): string[] {\n const source = step.lines.map((l) => l.code).join(\"\\n\");\n const { tokens } = highlighter.codeToTokens(source, { lang: \"typescript\", theme: \"vesper\" });\n return tokens.map((line) =>\n line.map((t) => {\n const style = t.fontStyle === 1 ? \"color:\" + t.color + \";font-style:italic\"\n : t.fontStyle === 2 ? \"color:\" + t.color + \";text-decoration:underline\"\n : t.fontStyle === 4 ? \"color:\" + t.color + \";font-weight:700\"\n : \"color:\" + t.color;\n return `${esc(t.content)}`;\n }).join(\"\")\n );\n}\n\nlet cached: string[] | null = null;\nfunction stepLineHtml() {\n if (!cached) cached = steps.map(highlightLines);\n return cached;\n}\n\n// --- Page -------------------------------------------------------------------\n\nexport function codeTourPage() {\n const highlighted = stepLineHtml();\n const acts = [...new Set(steps.map((s) => s.act))];\n const nav = acts.map((act) =>\n `

${esc(act)}

` +\n steps.map((s, i) => ({ s, i })).filter(({ s }) => s.act === act)\n .map(({ i }) => ``)\n .join(\"\")\n ).join(\"\");\n\n const panels = steps.map((s, i) => {\n const lines = s.lines.map((l, n) => {\n const num = `${n + 1}`;\n const body = `${highlighted[i][n]}`;\n return l.comment\n ? `

${num}${body}

`\n : ``;\n }).join(\"\");\n return `

` +\n `

Step ${i + 1} of ${steps.length} · ${esc(s.act)}

` +\n `

${esc(s.title)}

${esc(s.why)}

` +\n `

${lines}

` +\n `` +\n `

`;\n }).join(\"\");\n\n return `How this Val works

← Back to the app

How every line works

A guided tour of the essential code, simplified to expose the protocol rather than the page styling. Choose a chapter, then click any line for its explanation. Use ← → for chapters and ↑ ↓ to walk the lines.

${panels}

`;\n}","deleted",false,"label",[14],"7825587f-b4d7-43b6-a446-ce740ea520e5",["D",1784744701880],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Connect to all the apps with OAuth DCR + CIMD","imageUrl","userId","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","a74a3cae-85fa-11f1-942c-1607ee4eb77e","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","7825587fb4d743b6a446ce740ea520e5","tursoHostname","7825587fb4d743b6a446ce740ea520e5-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789560070146],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_104":100},"org",{"_9":10,"_98":-5,"_99":100,"_55":56,"_101":102,"_103":42},"branch",{"_35":88,"_11":89,"_22":28,"_90":45,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":12,"_97":10},"isOwned",178,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","ctx",{"_81":-5,"_138":139,"_140":141,"_142":143,"_144":42,"_145":42,"_146":42,"_147":32,"_148":-5,"_149":-7,"_150":-7,"_151":152,"_153":42,"_154":42,"_155":-5,"_156":42,"_157":42,"_158":42,"_159":-5},"ENV",{"_109":110,"_111":112,"_113":89,"_114":115,"_116":117,"_118":119,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135,"_136":137},"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","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount",0,"flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]