Stytch Val.town AS Demo

\n \n \n } />\n } />\n } />\n \n \n

\n \n \n );\n}",[],[155,174,180],[155,174],{"_102":191,"_95":192,"_156":193,"_158":157,"_159":137,"_160":161,"_162":163,"_104":194,"_99":32,"_165":195,"_167":196,"_168":22,"_169":-5,"_170":197,"_98":198},"e9458a6c-a542-11f0-ac3d-0224a6c84d84","favicon.svg","0199ca5d-2070-70e2-b8a2-a48e2ff3246f",["D",1760036724788],"file","\n",[],[155,192],{"_102":200,"_95":201,"_156":202,"_158":157,"_159":137,"_160":161,"_162":163,"_104":203,"_99":32,"_165":195,"_167":204,"_168":22,"_169":-5,"_170":205,"_98":206},"e9458bac-a542-11f0-ac3d-0224a6c84d84","index.html","0199ca5d-2070-70e2-b8a2-a9db3071ce52",["D",1760036724788],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[155,201],{"_102":208,"_95":209,"_156":210,"_158":157,"_159":137,"_160":161,"_162":163,"_104":211,"_99":32,"_165":185,"_167":212,"_168":22,"_169":-5,"_170":213,"_98":214},"e9458cce-a542-11f0-ac3d-0224a6c84d84","index.tsx","0199ca5d-2070-70e2-b8a2-afd798a42284",["D",1760036724788],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[155,209],{"_102":216,"_95":217,"_156":218,"_158":157,"_159":137,"_160":219,"_162":163,"_104":220,"_99":221,"_165":195,"_167":222,"_168":22,"_169":-5,"_170":223,"_98":224},"91110e38-a552-11f0-819a-0224a6c84d84","style.css","0199ca5d-2070-70e2-b8a2-b05d6226b600",67,["D",1760043448808],3,"body {\n margin: 0;\n min-height: 100vh;\n color: rgb(29, 29, 29);\n background-color: rgb(251, 250, 249);\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n#root {\n margin: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n min-height: 100vh;\n\n font-family: \"IBM Plex Sans\", monospace;\n line-height: 1.5;\n\n text-rendering: optimizeLegibility;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\nmain {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n min-height: 40vh;\n max-width: 60vw;\n margin-top: 10vh;\n}\n\nfooter {\n min-height: 10vh;\n}",[],[155,217],[155],{"_102":227,"_95":228,"_156":229,"_158":-5,"_159":137,"_160":161,"_162":163,"_104":230,"_99":32,"_165":195,"_167":231,"_168":22,"_169":-5,"_170":232,"_98":233},"e945912e-a542-11f0-ac3d-0224a6c84d84","README.md","0199ca5d-2070-70e2-b8a2-b911843d401e",["D",1760036724788],"# React Hono Starter\n\nThis app is a starter template for client-side React and server-side Hono.\n\n## Getting started\n\nGet a copy of this starter template by clicking the **Remix** button in the\ntop-right.\n\n## How it works\n\n- The **entrypoint** is [`index.ts`](index.ts). That's the backend HTTP server,\n which also serves the all the frontend assets.\n\n- The **client-side entrypoint** is\n [`/frontend/index.html`](/frontend/index.html)\n - which in turn imports [`/frontend/index.tsx`](/frontend/index.tsx)\n - which in turn imports the React app from\n [`/frontend/components/App.tsx`](/frontend/components/App.tsx).\n\nSo if you wanted to get a sense of how this app comes together, we suggest\nreading the files in this order:\n\n[`index.ts`](index.ts) -> [`/frontend/index.html`](/frontend/index.html) ->\n[`/frontend/index.tsx`](/frontend/index.tsx) ->\n[`/frontend/components/App.tsx`](/frontend/components/App.tsx)\n\n## Further resources\n\n- [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a\n bigger example project, with a SQLite database table, queries, client-side\n CSS, a favicon, and shared code that runs on both client and server.",[],[228],{"_102":235,"_95":236,"_156":237,"_158":-5,"_159":137,"_160":238,"_162":163,"_104":239,"_99":240,"_165":241,"_167":242,"_168":22,"_169":96,"_170":243,"_98":244},"fde108de-a551-11f0-8f93-0224a6c84d84","index.ts","0199ca5d-2070-70e2-b8a2-bedc3faca2e0",63,["D",1760043201871],15,"http","import { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { HTTPException } from \"npm:hono/http-exception\";\nimport { Consumer } from \"npm:@hono/stytch-auth\";\nimport { McpServer } from \"npm:@modelcontextprotocol/sdk/server/mcp.js\";\nimport { StreamableHTTPTransport } from \"npm:@hono/mcp\";\n\nconst app = new Hono<{ Bindings: { STYTCH_DOMAIN: string } }>();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/login\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/oauth/authorize\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// For those using the 6/18 spec\napp.get(\"/.well-known/oauth-protected-resource/:transport?\", async (c) => {\n const url = new URL(c.req.url);\n return c.json({\n resource: url.origin,\n authorization_servers: [Deno.env.get(\"STYTCH_DOMAIN\")],\n scopes_supported: [\"openid\", \"email\"],\n });\n});\n\nconst bearerAuthMiddleware = Consumer.authenticateOAuthToken({\n onError: (c, err) => {\n console.error(err);\n // Construct the WWW-Authenticate header\n const url = new URL(c.req.url);\n const wwwAuthValue = `Bearer error=\"Unauthorized\", ` +\n `error_description=\"Unauthorized\",` +\n `resource_metadata=\"${url.origin}/.well-known/oauth-protected-resource\"`;\n\n const errorResponse = new Response(\"Unauthorized\", {\n status: 401,\n headers: { \"WWW-Authenticate\": wwwAuthValue },\n });\n throw new HTTPException(401, { res: errorResponse });\n },\n});\n\napp.use(\"/mcp\", bearerAuthMiddleware);\napp.all(\"/mcp\", async (c) => {\n // The server can access the OAuth data validated by the bearerAuthMiddleware\n const { claims, token: accessToken } = Consumer.getOAuthData(c);\n\n const server = new McpServer({ name: \"Demo\", version: \"1.0.0\" });\n server.tool(\"whoami\", {}, async () => ({\n content: [{\n type: \"text\",\n text: \"You are \" + JSON.stringify(claims, null, 2),\n }],\n }));\n\n const transport = new StreamableHTTPTransport();\n await server.connect(transport);\n return transport.handleRequest(c);\n});\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;",[],[236],"files",[153,172,178,190,199,207,215,226,234],"counts",{"_249":32,"_250":161,"_251":32,"_252":253},"pulls","branches","forks","envVars",{"_254":255,"_256":32},"count",4,"emptyCount","contents",[259,262,265],{"_102":154,"_95":155,"_156":157,"_158":-5,"_159":137,"_160":161,"_162":163,"_104":260,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_98":261},["D",1760036724788],[155],{"_102":227,"_95":228,"_156":229,"_158":-5,"_159":137,"_160":161,"_162":163,"_104":263,"_99":32,"_165":195,"_167":231,"_168":22,"_169":-5,"_98":264},["D",1760036724788],[228],{"_102":235,"_95":236,"_156":237,"_158":-5,"_159":137,"_160":238,"_162":163,"_104":266,"_99":240,"_165":241,"_167":242,"_168":22,"_169":96,"_98":267},["D",1760043201871],[236],"upstreamProject",{"_102":145,"_95":270,"_110":271,"_112":-5,"_108":109,"_23":272},"reactHonoStarter","Starter template with client-side React & Hono server",{"_93":273,"_129":274},"std","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJVaVhpQ1BId3dscVpBbkdZVWlMNjJtcjkxWS5wbmcifQ","upstreamBranch",{"_102":140,"_104":277,"_278":279,"_95":43,"_138":145,"_99":142,"_139":-5,"_141":-5,"_280":281,"_106":-5,"_150":22,"_108":109,"_149":273,"_16":147,"_148":270},["D",1740674013689],"updatedAt",["D",1755284984205],"lockfileKey","1755284987385-esm.town_v_std_reactHonoStarter@72-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.environment-variables",{"_93":94,"_95":96,"_100":288,"_252":293},{"_102":103,"_95":96,"_104":289,"_106":-5,"_107":22,"_108":109,"_110":111,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":290,"_131":291,"_134":292,"_150":22},["D",1760036724788],{"_93":94,"_129":130},{"_93":94,"_133":130},{"_99":136,"_95":43,"_102":137,"_138":103,"_139":140,"_141":142,"_143":109,"_144":145,"_146":147,"_148":96,"_149":94},[294,299,302,305],{"_295":296,"_104":297,"_278":-5,"_110":72,"_298":22},"key","STYTCH_PROJECT_SECRET",["D",1760042839240],"isEmpty",{"_295":300,"_104":301,"_278":-5,"_110":72,"_298":22},"STYTCH_PROJECT_ID",["D",1760042789120],{"_295":303,"_104":304,"_278":-5,"_110":72,"_298":22},"STYTCH_DOMAIN",["D",1760042774654],{"_295":60,"_104":306,"_278":307,"_110":72,"_298":22},["D",1760037111336],["D",1760037134049],"actionData","errors"]

Key	Description
STYTCH_PROJECT_SECRET
STYTCH_PROJECT_ID
STYTCH_DOMAIN
NODE_ENV

max_stytch

stytch-as-demo

Environment variables