FedCM Relying Party (RP) Demo

\n Please sign in on fedcm-idp.val.run if you haven't already, once you come back to this\n page, the FedCM UI should appear.\n

\n \n \n",[],[150,170],{"_102":180,"_95":181,"_151":182,"_153":152,"_154":136,"_155":135,"_157":158,"_104":183,"_99":184,"_161":185,"_163":186,"_164":22,"_165":-5,"_166":187,"_98":188},"e42b80be-60c2-11f0-aa9c-0224a6c84d84","main.js","a500c7ae-5e52-11f0-86cb-0224a6c84d84",["D",1752505061637],29,"script","const eventLogEl = document.getElementById(\"eventLog\");\nexport function logEvent(text) {\n const el = document.createElement(\"div\");\n el.textContent = text;\n eventLogEl.append(el);\n}\n\nasync function getCredential() {\n const url = new URL(location.href);\n const mediation = url.searchParams.get(\"mediation\") || \"optional\";\n let credential = null;\n try {\n logEvent(\"Requesting credentials with mediation=\" + mediation);\n credential = await navigator.credentials.get({\n identity: {\n context: \"use\",\n providers: [\n {\n configURL: \"https://fedcm-idp.val.run/config.json\",\n clientId: \"clientId\",\n },\n ],\n },\n mediation,\n });\n } catch (error) {\n logEvent(`An error occurred while obtaining FedCM credentials: ${error}`);\n }\n\n if (credential) {\n logEvent(\"logged in!\");\n }\n}\n\ngetCredential();",[],[150,181],[150],{"_102":191,"_95":192,"_151":193,"_153":-5,"_154":136,"_155":194,"_157":158,"_104":195,"_99":196,"_161":197,"_163":198,"_164":22,"_165":199,"_166":200,"_98":201},"4453d7f2-5e57-11f0-b3b6-0224a6c84d84","idp.tsx","53f19950-5e12-11f0-a167-0224a6c84d84",150,["D",1752238934990],70,"http","/** @jsxImportSource npm:hono@4.7/jsx */\nimport { Hono } from \"npm:hono@4.7\";\nimport { parsePostData } from \"./util.ts\";\nimport { getLoginCookie, setLoginCookie } from \"./loginCookie.ts\";\n\nconst app = new Hono();\n\napp.get(\"/.well-known/web-identity\", () => {\n return Response.json({\n provider_urls: [\"https://fedcm-idp.val.run/config.json\"],\n });\n});\n\napp.get(\"/config.json\", () => {\n return Response.json({\n accounts_endpoint: \"/accounts\",\n id_assertion_endpoint: \"/assertion\",\n login_url: \"/login\",\n });\n});\n\napp.get(\"/\", async (c) => {\n const loginCookie = getLoginCookie(c.req.raw.headers);\n let loginSection;\n if (loginCookie) {\n loginSection = (\n <>\n

Welcome {loginCookie.username}!

\n Head over to fedcm-rp.val.run\n {\" \"}\n to try logging in.\n

\n \n \n );\n } else {\n loginSection = (\n \n );\n }\n const response = await c.html(\n \n \n

FedCM Identity Provider (IdP) Demo

\n {loginSection}\n \n ,\n );\n response.headers.set(\"Set-Login\", loginCookie ? \"logged-in\" : \"logged-out\");\n\n return response;\n});\n\napp.post(\"/login\", async (c) => {\n const postData = await parsePostData(c.req.raw);\n\n const response = c.redirect(\"/\");\n\n setLoginCookie(response.headers, {\n username: postData.get(\"username\"),\n email: postData.get(\"email\"),\n });\n\n return response;\n});\n\napp.post(\"/logout\", async (c) => {\n const response = c.redirect(\"/\");\n\n setLoginCookie(response.headers, null);\n\n return response;\n});\n\napp.get(\"/accounts\", (c) => {\n if (c.req.raw.headers.get(\"sec-fetch-dest\") != \"webidentity\") {\n return new Response(\"sec-fetch-dest header must be webidentity\");\n }\n const accounts = [];\n const loginCookie = getLoginCookie(c.req.raw.headers);\n if (loginCookie) {\n accounts.push({\n id: loginCookie.username,\n given_name: \"\",\n name: loginCookie.username,\n email: loginCookie.email,\n picture: \"\",\n approved_clients: \"approved\",\n login_hints: [],\n });\n }\n return Response.json({ accounts });\n});\n\napp.post(\"/assertion\", (c) => {\n if (c.req.raw.headers.get(\"sec-fetch-dest\") != \"webidentity\") {\n return new Response(\"sec-fetch-dest header must be webidentity\");\n }\n\n const response = Response.json({ token: \"token\" });\n response.headers.set(\n \"Access-Control-Allow-Origin\",\n \"https://fedcm-rp.val.run\",\n );\n response.headers.set(\"Access-Control-Allow-Credentials\", \"true\");\n return response;\n});\n\nexport default app.fetch;","fedcm-idp",[],[192],{"_102":203,"_95":204,"_151":205,"_153":-5,"_154":136,"_155":206,"_157":158,"_104":207,"_99":208,"_161":185,"_163":209,"_164":22,"_165":-5,"_166":210,"_98":211},"fc49fc2a-5e51-11f0-b8b4-0224a6c84d84","loginCookie.ts","b0584476-5e50-11f0-a6a5-0224a6c84d84",113,["D",1752236666645],5,"import {\n deleteCookie,\n getCookies,\n setCookie,\n} from \"jsr:@std/http@1.0.19/cookie\";\n\nexport type LoginCookie = {\n username: string;\n email: string;\n};\n\nexport function getLoginCookie(headers: Headers): LoginCookie {\n const cookies = getCookies(headers);\n if (!cookies.login) return null;\n\n try {\n return JSON.parse(atob(cookies.login));\n } catch {\n return null;\n }\n}\n\nexport function setLoginCookie(headers: Headers, cookie: LoginCookie | null) {\n if (!cookie) {\n deleteCookie(headers, \"login\");\n } else {\n setCookie(headers, {\n name: \"login\",\n value: btoa(JSON.stringify(cookie)),\n });\n }\n}",[],[204],{"_102":213,"_95":214,"_151":215,"_153":-5,"_154":136,"_155":216,"_157":158,"_104":217,"_99":218,"_161":197,"_163":219,"_164":22,"_165":220,"_166":221,"_98":222},"99782828-5e52-11f0-8909-0224a6c84d84","rp.ts","a90afa30-5e12-11f0-8785-0224a6c84d84",122,["D",1752236930351],20,"import { serveFile } from \"https://esm.town/v/std/utils@105-main/index.ts\";\nimport { Hono } from \"npm:hono@4.8.4\";\n\nconst app = new Hono();\n\napp.get(\"/\", () => serveFile(\"/rp/index.html\", import.meta.url));\napp.get(\"/**/*\", c => serveFile(\"/rp\" + c.req.path, import.meta.url));\n\nexport default app.fetch;","fedcm-rp",[],[214],{"_102":224,"_95":225,"_151":226,"_153":-5,"_154":136,"_155":227,"_157":158,"_104":228,"_99":229,"_161":185,"_163":230,"_164":22,"_165":-5,"_166":231,"_98":232},"95476cda-5e4a-11f0-b76b-0224a6c84d84","util.ts","8b27d384-5e4a-11f0-a42f-0224a6c84d84",92,["D",1752233487349],2,"export async function parsePostData(request: Request) {\n return new URLSearchParams(await request.text());\n}",[],[225],"files",[148,168,179,190,202,212,223],"counts",{"_237":32,"_238":160,"_239":32,"_240":241},"pulls","branches","forks","envVars",{"_242":32,"_243":32},"count","emptyCount","contents",[246,249,252,255,258],{"_102":149,"_95":150,"_151":152,"_153":-5,"_154":136,"_155":156,"_157":158,"_104":247,"_99":160,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":248},["D",1752229469738],[150],{"_102":191,"_95":192,"_151":193,"_153":-5,"_154":136,"_155":194,"_157":158,"_104":250,"_99":196,"_161":197,"_163":198,"_164":22,"_165":199,"_98":251},["D",1752238934990],[192],{"_102":203,"_95":204,"_151":205,"_153":-5,"_154":136,"_155":206,"_157":158,"_104":253,"_99":208,"_161":185,"_163":209,"_164":22,"_165":-5,"_98":254},["D",1752236666645],[204],{"_102":213,"_95":214,"_151":215,"_153":-5,"_154":136,"_155":216,"_157":158,"_104":256,"_99":218,"_161":197,"_163":219,"_164":22,"_165":220,"_98":257},["D",1752236930351],[214],{"_102":224,"_95":225,"_151":226,"_153":-5,"_154":136,"_155":227,"_157":158,"_104":259,"_99":229,"_161":185,"_163":230,"_164":22,"_165":-5,"_98":260},["D",1752233487349],[225],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_93":94,"_95":96,"_97":-7,"_99":-7,"_100":269,"_244":274,"_285":-7,"_286":-5,"_287":-5,"_233":288,"_310":311,"_312":-5,"_313":-5},{"_102":103,"_95":96,"_104":270,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":-5,"_114":22,"_115":-5,"_116":32,"_16":117,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_23":271,"_130":272,"_133":273,"_145":22},["D",1752209258285],{"_93":94,"_128":129},{"_93":94,"_132":129},{"_99":135,"_95":43,"_102":136,"_137":103,"_138":-5,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":96,"_144":94},[275,277,279,281,283],{"_102":149,"_95":150,"_151":152,"_153":-5,"_154":136,"_155":156,"_157":158,"_104":247,"_99":160,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":276},[150],{"_102":191,"_95":192,"_151":193,"_153":-5,"_154":136,"_155":194,"_157":158,"_104":250,"_99":196,"_161":197,"_163":198,"_164":22,"_165":199,"_98":278},[192],{"_102":203,"_95":204,"_151":205,"_153":-5,"_154":136,"_155":206,"_157":158,"_104":253,"_99":208,"_161":185,"_163":209,"_164":22,"_165":-5,"_98":280},[204],{"_102":213,"_95":214,"_151":215,"_153":-5,"_154":136,"_155":216,"_157":158,"_104":256,"_99":218,"_161":197,"_163":219,"_164":22,"_165":220,"_98":282},[214],{"_102":224,"_95":225,"_151":226,"_153":-5,"_154":136,"_155":227,"_157":158,"_104":259,"_99":229,"_161":185,"_163":230,"_164":22,"_165":-5,"_98":284},[225],"readme","upstream","pull",[289,291,294,298,301,304,307],{"_102":149,"_95":150,"_151":152,"_153":-5,"_154":136,"_155":156,"_157":158,"_104":159,"_99":160,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":290,"_98":297},[291,294],{"_102":169,"_95":170,"_151":171,"_153":152,"_154":136,"_155":172,"_157":158,"_104":173,"_99":174,"_161":175,"_163":176,"_164":22,"_165":-5,"_166":292,"_98":293},[],[150,170],{"_102":180,"_95":181,"_151":182,"_153":152,"_154":136,"_155":135,"_157":158,"_104":183,"_99":184,"_161":185,"_163":186,"_164":22,"_165":-5,"_166":295,"_98":296},[],[150,181],[150],{"_102":191,"_95":192,"_151":193,"_153":-5,"_154":136,"_155":194,"_157":158,"_104":195,"_99":196,"_161":197,"_163":198,"_164":22,"_165":199,"_166":299,"_98":300},[],[192],{"_102":203,"_95":204,"_151":205,"_153":-5,"_154":136,"_155":206,"_157":158,"_104":207,"_99":208,"_161":185,"_163":209,"_164":22,"_165":-5,"_166":302,"_98":303},[],[204],{"_102":213,"_95":214,"_151":215,"_153":-5,"_154":136,"_155":216,"_157":158,"_104":217,"_99":218,"_161":197,"_163":219,"_164":22,"_165":220,"_166":305,"_98":306},[],[214],{"_102":224,"_95":225,"_151":226,"_153":-5,"_154":136,"_155":227,"_157":158,"_104":228,"_99":229,"_161":185,"_163":230,"_164":22,"_165":-5,"_166":308,"_98":309},[],[225],"previews",[298,304],"ahead","behind","actionData","errors"]

jespertheend

fedcm-demo