30:T1e46,md`## Introduction This notebook is an *authentication server* [[okta](https://developer.okta.com/docs/concepts/auth-servers/), [auth0](https://auth0.com/blog/what-is-an-authentication-server/), [wikipedia](https://en.wikipedia.org/wiki/OAuth)]. It implements a generic [Oauth 2.0](https://oauth.net/2/) *authorization_endpoint* and *token_endpoint*. This is a technology that can enable a user to login to a service and execute private operations. **You need one of these to build secure services.** Leading commercial services include [Okta](https://www.okta.com/), [Auth0](https://auth0.com/), [Firebase Auth](https://firebase.google.com/docs/auth), [AWS Cognito](https://aws.amazon.com/identity/). Leading Open Source solutions include [Keycloak](https://www.keycloak.org/). The server's source code is hosted on [observablehq.com](https://observablehq.com/), but requests are executed on [webcode.run](https://webcode.run) -- a serverless environemnt for Observablehq. ${htl.html` `} You can use the identity URL of 'https://tomlarkworthy.endpointservices.net/' in the demo auth flow to see some of the federated auth features. *This* particular authorization server uses [IndieAuth](https://indieauth.spec.indieweb.org/)/[relMeAuth](http://microformats.org/wiki/RelMeAuth). This differs from most authentication servers as it uses a user supplied Identity URL to uniquely identify users. Identity URLs can be self-hosted by the user, and even programatically created in [Observablehq](https://observablehq.com/@endpointservices/identity) _"Sites that know a person’s PII (e.g., when people sign in using their email address) could record and reveal their [FLoC] cohort,"_ -- [WICG/FLoC](https://github.com/WICG/floc), more context from the [EFF](https://www.eff.org/deeplinks/2021/03/googles-floc-terrible-idea) URLs are much easier to dynamically create, so a privacy focused users can create a unique URLs for each service they use. You can create multiple usable identity URLs on [Observable](https://observablehq.com/@endpointservices/identity) for instance. Other advantages include being able to switch social login providers. Furthermore, *this* implementation is written in a web hosted literate programming notebook and read by a serverless environment. So you can fork this notebook and customize your own server (even at a code level!) without leaving the browser. You can see a preview what the login flow looks like by visiting the [AUTHORIZE_URL](${`${authorization_endpoint}?redirect_uri=https://observablehq.com/@endpointservices/auth&client_id=https://observablehq.com/@endpointservices/auth&state=${Math.random()}`}), _right now_. You don't *have* to have a homepage setup, you can use your Github [profile](https://github.com/tomlarkworthy) URL as an identity URL too. - Respects privacy - Gives control to the user - Decouple service access from 3rd party account lifecycle. By being implemented in an Observable notebook means it is trivial to host your own. You can fork this notebook and update the CAPITALIZED CONFIGURATION CONSTANTS. ### Why Indie Auth not OpenID-Connect? The IndieWeb wiki discusses this point [here](https://indieweb.org/How_is_IndieAuth_different_from_OpenID_Connect). Both these systems are additional specifications on top of Oauth 2.0. There are several reasons why IndieWeb is a better fit for the Observable crowd 1. Fully decentralized identities. Unlike OpenId-Connect the IndieWeb identities are portable between services. This aligns with Observable's collaborative mission. **This is very useful for Observable developers because notebook forks change the hosting origin**. Decentralized identities work with the Observable collaborative forking model! Furthermore, the identities will work outside of the Observable ecosystem too. 2. Public clients only. IndieAuth specifies [public Oauth 2.0 clients only](https://indieauth.spec.indieweb.org/#oauth-2-0-extension). Most Oauth 2.0 identity solutions require registration of trusted client domains and *redirect_uri* upfront before you can use the provider. Sometimes you need some kinda of *client_secret*. This does not work well with Observable where notebooks are hosted on different domains. IndieAuth eliminates all these steps and jsut mandates *client_id = redirect_uri* (yes, clients are URLs too). ### Example Login and Identities You can try out this server and as well as the [indielogin.com](https://indielogin.com) and [indieauth.com](https://indieauth.com) servers at [@endpointservices/weblogin](https://observablehq.com/@endpointservices/weblogin). The example client provides a tangible demo of a working service integration with this server. You can obtain test IndieAuth identities [here](https://observablehq.com/@endpointservices/identity) ### How RelMeAuth works RelMeAuth allows a person to express which 3rd party profiles are theirs across different social sites. This is achieved by linking to their 3rd party profiles from their homepage AND backlinking their homepage from their 3rd party profiles with *rel="me"* hyperlinks. ~~~html <-- A visible rel="me" link --> My Github profile <-- An invisible rel="me" link --> ~~~ Once the person has identified themselves across different social sites, the "login with Github/Facebook/Google" can be used to identify that person using their public homepage URL as the identity key (not email). So if an authorization has the right Oauth client configured, it may use the 3rd party identity infrastructure to authenticate that person but use their custom identity URL as the *user_id*. By using a homepage URL you give your users the ability to switch social providers and give them control on what information they share. This is all you need to build stateful applications. To summarize, RelMeAuth is the technology that allows a homepage URL to be used as a user identifier, and describes how to link that identifier to existing Oauth 2.0 identity providers. ### How IndieAuth works IndieAuth allow a person to bring their own *authorization_endpoint* (and *token_endpoint*). It scans the identity URL looking for links with *rel="authorization_endpoint"*. Here is an example that uses [micro.blog](https://micro.blog/account/menus/40423) as an identity provider. ~~~html ~~~ But users are free to use whatever for the *authorization_endpoint* as long as it follows the [IndieAuth spec](https://indieauth.spec.indieweb.org/). Some people have *brought their own SMS verification*. ### Firebase compatible The *token_endpoint* mints standard JWTs that are compatible with Firebase Auth. So this service can be used as a replacement for [Firebase Authentication](https://firebase.google.com/docs/auth) (see *[signInWithCustomToken()](https://firebase.google.com/docs/auth/admin/create-custom-tokens)*). Firebase Auth in its current form complicates European compliance by storing [confidential information in the US](https://firebase.google.com/support/privacy), but with this server, you choose which regions the databases reside. `31:T6ad,authorization_endpoint = deploy( "authorization_endpoint", async (req, res, ctx) => { try { const redirect_uri = checkIsURL(req.query.redirect_uri, "redirect_uri"); const state = checkNotEmptyString(req.query.state, "state"); const client_id = checkNotEmptyString(req.query.client_id, "client_id"); const scope = req.query.scope || ""; const me = req.query.me ? checkIsURL(req.query.me, "me") : undefined; if (me) { const service_access_token = await getAccessTokenFromServiceAccount( ctx.secrets[SERVICE_ACCOUNT_SECRET] ); await signinWithAccessToken(firebase, service_access_token); const user = ( await firebase .database() .ref(`@endpointservices/relmeauth/users/${FKEY.encode(me)}`) .once("value") ).val() || {}; const profiles = Object.keys(user.profiles || {}).map((encodedURL) => ({ href: FKEY.decode(encodedURL), provider: user.profiles[encodedURL].provider })); res.send( auth_html({ me, scope, redirect_uri, state, client_id, profiles, last_refresh: new Date(user.last_refresh).toString() }).outerHTML ); } else { res.send( signin_html({ me, redirect_uri, state, client_id, scope, auth_link: req.baseUrl }).outerHTML ); } } catch (err) { res.status(400).send(err.message); } }, { reusable: true, secrets: [SERVICE_ACCOUNT_SECRET] } )32:Tb8d,token_endpoint = deploy( "token_endpoint", async (req, res, ctx) => { try { if (!req.query.code && req.headers["authorization"]) { // https://www.w3.org/TR/indieauth/#access-token-verification try { const decoded = await verifyToken(req.headers["authorization"]); return res.json({ ...decoded, scope: decoded.scope || "" // IndieAuth spec insists scope is sent }); } catch (err) { try { const message = JSON.parse(err.message); res.status(message.error.code).json(message.error.message); } catch (err2) { res.status(500).json(err.message); } } } const code = checkNotEmptyString(req.query.code, "code"); const service_access_token = await getAccessTokenFromServiceAccount( ctx.secrets[SERVICE_ACCOUNT_SECRET] ); await signinWithAccessToken(firebase, service_access_token); const auth = ( await firebase .database() .ref(`@endpointservices/relmeauth/codes/${code}`) .once("value") ).val(); // One use codes firebase .database() .ref(`@endpointservices/relmeauth/codes/${code}`) .remove(); if (!auth) throw new Error("No code found"); const { client_id, me, secret, scope, t } = auth; if ( secret && secret !== checkNotEmptyString(req.query.secret, "secret") ) { throw new Error("Secret does not match"); } // 10 min window to exchange code if ( new Date() - new Date(t) > 10 * 60 * 1000 || new Date() - new Date(t) < 0 ) throw new Error("Invalid time range"); let additionalClaims = undefined; if (scope?.includes("observablehq.com")) { const profiles = ( await firebase .database() .ref( `@endpointservices/relmeauth/users/${FKEY.encode(me)}/profiles` ) .orderByChild("provider") .equalTo("observable") .once("value") ).val() || {}; additionalClaims = { "observablehq.com": Object.keys(profiles) .map((key) => FKEY.decode(key)) .map( (profile) => profile.match(/https:\/\/observablehq\.com\/@([^\/]+)/)[1] ) }; } const token = await createCustomToken( JSON.parse(ctx.secrets[TOKEN_SIGNER_SERVICE_ACCOUNT_SECRET]), /* uid */ me, /* additionalClaims */ additionalClaims, /* additionalFields */ { scope, me, client_id } ); res.json({ access_token: token }); } catch (err) { res.status(500).send(err.message); } }, { secrets: [SERVICE_ACCOUNT_SECRET, TOKEN_SIGNER_SERVICE_ACCOUNT_SECRET] } )33:Tfb9,// https://github.com/aaronpk/IndieAuth.com/blob/70f5d9300f2528d4ef30d6893d7dd4df16351b23/controllers/auth-web.rb#L327 // Results in // { // "links":[ // {"profile":"https://observablehq.com/@tomlarkworthy","provider":null,"verified":null} // {"profile":"https://github.com/tomlarkworthy","provider":"github","verified":null}, // {"profile":"https://twitter.com/tomlarkworthy","provider":"twitter","verified":null}, // {"profile":"https://www.linkedin.com/in/tom-larkworthy-74a3263/","provider":null,"verified":null} // ] // } // This looks at a page and figures out what it links to an whether it is supported or not //supported_providers_endpoint = html`supported_providers.json` supported_providers_endpoint = deploy( "supported_providers.json", async (req, res, ctx) => { const me = checkIsURL(req.query.me, "me"); const client_id = checkNotEmptyString(req.query.client_id, "client_id"); const userstate = checkNotEmptyString(req.query.state, "state"); checkNotEmptyString( ctx.secrets[SERVICE_ACCOUNT_SECRET], SERVICE_ACCOUNT_SECRET ); const service_access_token = await getAccessTokenFromServiceAccount( ctx.secrets[SERVICE_ACCOUNT_SECRET] ); const signin = signinWithAccessToken(firebase, service_access_token); // Fetch all links const meLinks = await rel_links(me); // Also expand 1 level of links //const moreLinks = await Promise.all( // meLinks.filter(link => link.href !== me).map(link => rel_links(link.href))) const self = { href: me, provider: PROVIDER_FOR_URL(me, "me") }; const allLinks = [self].concat(meLinks); //.concat(...moreLinks); // remove duplicates const links = Object.values( allLinks.reduce((acc, link) => { acc[link.href] = link; return acc; }, {}) ); await signin; const user = ( await firebase .database() .ref(`@endpointservices/relmeauth/users/${FKEY.encode(me)}`) .once("value") ).val() || {}; // Make note we are doing a refresh let lastWrite = firebase .database() .ref(`@endpointservices/relmeauth/users/${FKEY.encode(me)}/last_refresh`) .set({ ".sv": "timestamp" }); // Prune profile links from user profile that are not longer present links.forEach((link) => { const encodedURL = FKEY.encode(link.href); if (!(user.profiles || {})[encodedURL]) { console.log("encodedURL", encodedURL); lastWrite = firebase .database() .ref( `@endpointservices/relmeauth/users/${FKEY.encode( me )}/profiles/${encodedURL}` ) .remove(); } if (link.rel === "authorization_endpoint") { console.log("authorization_endpoint", encodedURL); links.shift(); // Remove self link lastWrite = firebase .database() .ref( `@endpointservices/relmeauth/users/${FKEY.encode( me )}/profiles/${FKEY.encode(me)}` ) .set({ provider: "indieauth", authorization_endpoint: link.href }); } }); await lastWrite; // ensure all our writes have flushed res.json({ links: links.map((link) => { const profile = link.href; const provider = PROVIDER_FOR_URL(link.href, link.rel); const verified = null || provider === "indieauth"; const auth_path_link = provider === "indieauth" ? auth_path(provider, me, me, client_id, userstate) : undefined; return { profile, provider, verified, ...(auth_path_link && { auth_path: auth_path_link }) }; }) }); }, { reusable: true, modifiers: ["terminal"], secrets: [SERVICE_ACCOUNT_SECRET] } )34:Tc3c,// https://github.com/aaronpk/IndieAuth.com/blob/70f5d9300f2528d4ef30d6893d7dd4df16351b23/controllers/auth-web.rb#L448 // /auth/verify_link.json?me=https%3A%2F%2Ftomlarkworthy.endpointservices.net%2F&profile=https%3A%2F%2Fgithub.com%2Ftomlarkworthy // {"me":"https://tomlarkworthy.endpointservices.net/","profile":"https://github.com/tomlarkworthy","provider":"github","verified":true,"error":false,"error_description":null,"auth_path":"/auth/start?me=https%3A%2F%2Ftomlarkworthy.endpointservices.net%2F&provider=github&profile=https%3A%2F%2Fgithub.com%2Ftomlarkworthy"} verify_link_endpoint = deploy( "verify_link.json", async (req, res, ctx) => { try { const me = checkIsURL(req.query.me, "me"); const profile = checkIsURL(req.query.profile, "profile"); const client_id = checkNotEmptyString(req.query.client_id, "client_id"); const userstate = checkNotEmptyString(req.query.state, "state"); const scope = req.query.scope || ""; let authorization_endpoint = undefined; let provider = PROVIDER_FOR_URL(req.query.profile); if (!provider) { // Maybe its indie auth const authorization_endpoints = await rel_links( profile, "authorization_endpoint" ); if (authorization_endpoints.length > 0) { provider = "indieauth"; authorization_endpoint = authorization_endpoints[0].href; } } checkNotEmptyString(provider, "provider"); const service_access_token = await getAccessTokenFromServiceAccount( ctx.secrets[SERVICE_ACCOUNT_SECRET] ); const signin = signinWithAccessToken(firebase, service_access_token); const verified = await verify_link(me, profile); await signin; if (!verified) throw new Error(`Should have already thrown`); // Record the successful verification in cache await firebase .database() .ref( `@endpointservices/relmeauth/users/${FKEY.encode( me )}/profiles/${FKEY.encode(profile)}` ) .set({ provider, ...(authorization_endpoint && { authorization_endpoint }) }); const auth = PROVIDERS[provider].auth; res.json({ me, profile, provider, verified, auth_path: verified && auth ? auth_path(provider, profile, me, client_id, userstate, scope) : false }); } catch (err) { // Remove from cache firebase .database() .ref( `@endpointservices/relmeauth/users/${FKEY.encode( req.query.me )}/profiles/${FKEY.encode(req.query.profile)}` ) .remove(); res.status(/*yuck*/ 200).json({ me: req.query.me, profile: req.query.profile, verified: false, error: true, error_description: err.message }); } }, { reusable: true, modifiers: ["terminal"], secrets: [SERVICE_ACCOUNT_SECRET] } ) //verify_link_endpoint = html`verify_link.json`35:T61a,async function rel_links (url, rel) { url = checkIsURL(url); if (!url.startsWith('https')) throw new Error("Only secure (https) rel links supported"); const provider = PROVIDER_FOR_URL(url, 'me') const response = await fetchp(url) if (response.status >= 400) throw new Error(`Status ${response.status} ${await response.text()}`); const html = await response.text() const links = []; var el = document.createElement( 'html' ); el.innerHTML = html; function process(link) { const rels = link.rel.split(" ") if (rels.includes('me') && link.href) { links.push({ rel: 'me', href: new URL(link.href, url).href }); } // Special scraping for observable, we will use website links if (provider === 'observable' && link.href && link?.parentNode?.classList.contains("profile-link")) { if (link.href.includes('authorization_endpoint')) { links.push({ rel: 'authorization_endpoint', href: new URL(link.href, url).href }); } else { links.push({ rel: 'me', href: new URL(link.href, url).href }); } } if (rels.includes('authorization_endpoint') && link.href) { links.push({ rel: 'authorization_endpoint', href: new URL(link.href, url).href }); } } for (let t of el.getElementsByTagName( 'a' )) { process(t) } for (let t of el.getElementsByTagName( 'link' )) { process(t) } return rel ? links.filter(link => link.rel === rel) : links }36:T42f,async function verify_link(me, link) { me = checkIsURL(me); link = checkIsURL(link); if (link.match(/twitter\.com/)) { throw new Error("Twitter login no longer works due to a change on their website"); } const [links_from_link, links_from_me] = await Promise.all([ rel_links(link, 'me'), rel_links(me, 'me')]); const me_contains_link = links_from_me.map(_ => _.href).includes(link); const link_contains_me = links_from_link.map(_ => _.href).includes(me); const linkProvider = PROVIDERS[PROVIDER_FOR_URL(link)]; const verified = (me === link) // E.g. indieauth, Oauth silo profile URL || me_contains_link && link_contains_me // RelMe || me_contains_link && linkProvider.oneway // One-way Silo auth like Github if (!verified) { throw new Error( `${me_contains_link ? `✅ ${me} links to ${link}`: `⚠️ ${me} doesn't link to ${link}`}\n\n` + `${link_contains_me ? `✅ ${link} links to ${me}`: `⚠️ ${link} doesn't link to ${me}`}`); } return verified; }37:Tb4e,auth_start = deploy( "auth_start", async (req, res, ctx) => { try { const provider = checkNotEmptyString(req.query.provider, "provider"); const me = checkIsURL(req.query.me); const profile = checkIsURL(req.query.profile); const redirect_uri = checkIsURL(req.query.redirect_uri, "redirect_uri"); const client_id = checkNotEmptyString(req.query.client_id, "client_id"); const userstate = checkNotEmptyString(req.query.state, "state"); const state = randomId(); const scope = req.query.scope; const service_access_token = await getAccessTokenFromServiceAccount( ctx.secrets[SERVICE_ACCOUNT_SECRET] ); await signinWithAccessToken(firebase, service_access_token); let auth_url, backend_client_id, backend_redirect_uri, authorization_endpoint; const code_verifier = await randomId(50); const code_challenge = await b64S256(code_verifier); if (provider === "github") { backend_client_id = GITHUB_CLIENT_ID; backend_redirect_uri = GITHUB_REDIRECT_URI.href; auth_url = `${GITHUB_AUTHORIZE_URL}?${encodeParams({ client_id: backend_client_id, redirect_uri: backend_redirect_uri, state: state })}`; } else if (provider === "indieauth") { authorization_endpoint = checkIsURL( ( await firebase .database() .ref( `@endpointservices/relmeauth/users/` + `${FKEY.encode(me)}/profiles/` + `${FKEY.encode(profile)}/` + `authorization_endpoint` ) .once("value") ).val() ); (backend_client_id = INDIEAUTH_REDIRECT_URI.href), (backend_redirect_uri = INDIEAUTH_REDIRECT_URI.href), (auth_url = `${authorization_endpoint}?${encodeParams({ me, client_id: backend_client_id, redirect_uri: backend_redirect_uri, scope, state: state, response_type: "code", code_challenge_method: "S256", code_challenge: code_challenge })}`); } else { throw new Error(`Unknown provider ${provider}`); } await firebase .database() .ref(`@endpointservices/relmeauth/session/${state}`) .set({ me, provider, profile, state, client_id, redirect_uri, userstate, backend_client_id, backend_redirect_uri, code_verifier, ...(scope && { scope }), ...(authorization_endpoint && { authorization_endpoint }) }); res.redirect(302, auth_url); } catch (err) { res.status(500).send(err.message); } }, { secrets: [SERVICE_ACCOUNT_SECRET] } )38:Tc25,GITHUB_REDIRECT_URI = deploy( "github_redirect", async (req, res, ctx) => { try { const state = checkNotEmptyString(req.query.state, "state"); const code = checkNotEmptyString(req.query.code, "code"); const service_access_token = await getAccessTokenFromServiceAccount( ctx.secrets[SERVICE_ACCOUNT_SECRET] ); await signinWithAccessToken(firebase, service_access_token); const session = await firebase .database() .ref(`@endpointservices/relmeauth/session/${state}`) .once("value"); if (session.val() === null) throw new Error(`No matching state found: ${state}`); const { me, provider, profile, redirect_uri, client_id, userstate, scope } = session.val(); const isVerififiedPromise = verify_link(me, profile); // Exchange code for token const exchangeURL = `${GITHUB_TOKEN_URL}?${encodeParams({ client_id: GITHUB_CLIENT_ID, client_secret: ctx.secrets[GITHUB_CLIENT_SECRET_SECRET_NAME], scope: scope, code: code })}`; const tokenResponse = await fetch(exchangeURL); if (tokenResponse.status !== 200) throw new Error( `Status: ${tokenResponse.status} ${await tokenResponse.text()}` ); const responseText = await tokenResponse.text(); // Form decode const token = new URLSearchParams(responseText).get("access_token"); // With a token we can lookup the user // Now get the user info const userResponse = await fetch("https://api.github.com/user", { headers: { Authorization: `token ${token}` } }); if (userResponse.status !== 200) throw new Error( `Status: ${userResponse.status} ${await userResponse.text()}` ); const githubProfile = await userResponse.json(); if (profile === githubProfile.html_url) { // Check redirect_uri matches // TODO we can fetch more authorized redirects but this is enough for now checkRedirect(redirect_uri, [client_id]); // Final check the profile is ok for the user ID if (!(await isVerififiedPromise)) throw new Error(`${profile} cannot be used to authenticate ${me}`); const code = randomId(32); await firebase .database() .ref(`@endpointservices/relmeauth/codes/${code}`) .set({ client_id, // Which client was used ...(scope && { scope }), me, // Which profile was verified t: { ".sv": "timestamp" } // Timestamp of when we authorized }); res.redirect(`${redirect_uri}?code=${code}&state=${userstate}`); } else { res .status(400) .send( `Logged in Github user ${githubProfile.html_url} does not match profile ${profile}` ); } } catch (err) { res.status(500).send(err.message); } }, { secrets: [GITHUB_CLIENT_SECRET_SECRET_NAME, SERVICE_ACCOUNT_SECRET] } )39:Ta35,INDIEAUTH_REDIRECT_URI = deploy("indieauth_redirect", async (req, res, ctx) => { try { const state = checkNotEmptyString(req.query.state, 'state'); const code = checkNotEmptyString(req.query.code, 'code'); const service_access_token = await getAccessTokenFromServiceAccount(ctx.secrets[SERVICE_ACCOUNT_SECRET]); await signinWithAccessToken(firebase, service_access_token); const session = await firebase.database().ref(`@endpointservices/relmeauth/session/${state}`).once('value'); if (session.val() === null) throw new Error(`No matching state found: ${state}`); const { me, provider, profile, redirect_uri, client_id, userstate, scope, backend_client_id, backend_redirect_uri, code_verifier, authorization_endpoint } = session.val(); // Exchange code for token // https://indieauth.spec.indieweb.org/#x5-3-1-request console.log("authorization_endpoint", authorization_endpoint) const codeResponse = await fetch(authorization_endpoint, { method: "POST", headers: { 'Content-type': 'application/x-www-form-urlencoded', // 'Accept': 'application/x-www-form-urlencoded' //IndieAuth.com did not like this }, body: `grant_type=authorization_code&` + `code=${code}&` + `client_id=${backend_client_id}&` + `redirect_uri=${backend_redirect_uri}&` + `code_verifier=${code_verifier}` }) if (codeResponse.status !== 200) throw new Error(`Status: ${codeResponse.status} ${await codeResponse.text()}`); const decodedResponse = decodeJsonOrForm(await codeResponse.text()); const authedMe = decodedResponse.me console.log(JSON.stringify(decodedResponse)) if (profile === authedMe) { // Check redirect_uri matches // TODO we can fetch more authorized redirects but this is enough for now checkRedirect(redirect_uri, [client_id]); const code = randomId(32); await firebase.database().ref(`@endpointservices/relmeauth/codes/${code}`).set({ client_id, // Which client was used ...(scope && {scope}), me: me, // Which profile was verified t: {".sv": "timestamp"} // Timestamp of when we authorized }); res.redirect(`${redirect_uri}?code=${code}&state=${userstate}`); } else { res.status(400).send(`Logged in user ${authedMe} does not match profile ${me}`); } } catch (err) { console.log("Err ", err.message) res.status(500).send(err.message); } }, { secrets: [SERVICE_ACCOUNT_SECRET] })3a:T6fe,signin_html = ({ redirect_uri = success_endpoint.href, client_id = '', state = '', auth_link, scope = '', } = {}) => { return html` ${header_html()}

Sign in with your website

This is a web sign-in prompt. To use it, you'll need to:

Add links on your website to your various social profiles (Twitter, Github, etc) with the attribute rel="me"
Ensure these profiles link back to your website
Alternatively, you can set up your domain to support the IndieAuth protocol

Read the full setup instructions

` }3b:T607c,auth_html = ({ me, app_logo, app_name, redirect_uri, client_id, state, scope = "email pic", profiles, last_refresh = "unknown", gpg_challenges = [{ profile: "?", challanges: html`

TODO gpg_challenges

` }] } = {}) => { const display_url = (url) => url if (!app_name) app_name = client_id let display_name; if (client_id && display_url(client_id) === display_url(app_name)) { display_name = html`${app_name}` } else if(client_id) { display_name = html`${app_name} (${display_url(client_id)})` } else { display_name = app_name } return html` ${header_html()}

${scope ? html`

${app_logo ? html`

` : null}

Allow ${app_name} access to ${ display_url(me)}?

` : html`

${app_logo ? html`

` : null}

Sign in to ${display_name}

Authenticate using one of the methods below to sign in as ${me}

Finding rel="me" links on ${me}

${profile['href']}
Verifying...

${!client_id ? html` `: html` ${ redirect_uri ? html`

You will be redirected to ${redirect_uri} to finish logging in to the site.

`: null } `}

${ (gpg_challenges || []).map(challenge => html` `)} ` }3c:T821,// https://github.com/aaronpk/IndieAuth.com/blob/d642e1e0453c00a009f6b47d8d071fdc043bf418/views/success.erb success_html = ({ domain = "domain" } = {}) => html` ${header_html()}

You Successfully Authenticated!

Congrats! You've successfully authenticated as ${domain}

What's Next?

Create a sign-in form to use IndieAuth.com to sign people in on your website.

Add more authentication providers

Try adding an email address or PGP key to your website to avoid using a third-party OAuth provider when signing in.

Install an IndieAuth server such as Acquiescence (Ruby) or SelfAuth (PHP), or build your own!

Join the Community

Attend an IndieWebCamp event
Join the chat and add yourself to irc-people

`3d:[{"id":"b46628ea94e6a5f2c3149f8df555fafad8987e53a3e11c50dbd3dba8b639088331ab83cdc63ae2bcbbb988638259b8cf952ff00212faa16c34a1fb471c438f34","href":"https://static.observableusercontent.com/files/b46628ea94e6a5f2c3149f8df555fafad8987e53a3e11c50dbd3dba8b639088331ab83cdc63ae2bcbbb988638259b8cf952ff00212faa16c34a1fb471c438f34","name":"AuthServerBanner.png","type":"image/png","lastModified":1618768044047.004,"size":100725},{"id":"c7243676b934e5cf12e7c54b80a7d9d7bf31c90a202edb62c30bf74507106c1f9cb1ba138c1f0c17494c674966ac5f3a7de30a4c1317059c93414153281466cb","href":"https://static.observableusercontent.com/files/c7243676b934e5cf12e7c54b80a7d9d7bf31c90a202edb62c30bf74507106c1f9cb1ba138c1f0c17494c674966ac5f3a7de30a4c1317059c93414153281466cb","name":"AuthServerBanner@1.png","type":"image/png","lastModified":1618782933197.957,"size":112208}] 2e:{"title":"Federated IndieAuth Server","cells":[{"id":1510,"value":"bannerImage(await FileAttachment(\"AuthServerBanner@1.png\").url(), \"Federated IndieAuth Server\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1503,"value":"getContext().serverless ? undefined : toc()","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1922,"value":"observable_features = md`### Observablehq Features\n\nWe can detect what observable profile the user owns as part of the RelMeAuth scan. The user's profile(s) are added as additionalClaims in the JWT/token, enabling portable personal data access across notebook subdomains, with Oauth consent dialog to ensure the user can choose which domains have access to their data.\n\n~~~js\nOAUTH SCOPE: observablehq.com\n\nadditionalClaims: {\n observablehq.com: [tomlarkworthy, endpointservices]\n}\n~~~\n\nThis will work out of the box with Firebase Rules as [custom claims](https://firebase.google.com/docs/auth/admin/custom-claims). \n\nWe also look for URLs with authorization_endpoint in their name as nominated indie_auth providers.\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1925,"value":"md`### More info\n\nThe proposed spec of [IndieAuth](https://observablehq.com/@endpointservices/auth) and [relMeAuth](http://microformats.org/wiki/RelMeAuth). You can create your own Authorization server for use anywhere in the internet by forking this notebook and updating the Oauth configs. This one run by [@endpointservices](https://observablehq.com/@endpointservices) for federated use across the Observable platform.\n\n### About\n\nLift and shift + fork of [Github/indieauth.com](https://github.com/aaronpk/IndieAuth.com), also Licensed under Apache 2. We are deeply thankful for the support of Aaron Parecki on this project and the others [IndieWedb dev chat](https://chat.indieweb.org/dev/) \n\n### Reporting Issues\n\nThere is a Github repo for issues [here](https://github.com/endpointservices/auth/issues)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1446,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1045,"value":"md`## Configuration\n\nFork this notebook or import this notebook and override the following variables to create your own authorization server.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1102,"value":"md`#### SERVICE_ACCOUNT_SECRETS\nThe names of [secrets](https://observablehq.com/@endpointservices/secrets) each containing a GCP [JSON service account key](https://cloud.google.com/iam/docs/creating-managing-service-account-keys).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1690,"value":"md`##### SERVICE_ACCOUNT_SECRET\nUsed to access the backend Firebase persistence layer (must be a member of the project containing the Firebase database).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":727,"value":"SERVICE_ACCOUNT_SECRET = 'endpointservices_secretadmin_service_account_key'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1685,"value":"md`##### TOKEN_SIGNER_SERVICE_ACCOUNT_SECRET\n\nUsed to sign keys (can be for a different project)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1676,"value":"TOKEN_SIGNER_SERVICE_ACCOUNT_SECRET = \"endpointservices_minter\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1177,"value":"md`#### FIREBASE_CONFIG\n\nFirebase Realtime Database is used to cache user profiles and Oauth 2.0 state machines.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"FIREBASE_CONFIG = ({\n name: \"authinfra\",\n databaseURL: \"https://endpointservice-eu.europe-west1.firebasedatabase.app/\",\n apiKey: \"AIzaSyD882c8YEgeYpNkX01fhpUDfioWl_ETQyQ\",\n authDomain: \"endpointservice.firebaseapp.com\",\n projectId: \"endpointservice\",\n appId: \"1:1986724398:web:9b8bc33895b45dd2e095bf\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1718,"value":"md`The token Firebase is used to verify tokens and must be in same project as TOKEN_SIGNER_SERVICE_ACCOUNT`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1701,"value":"TOKEN_FIREBASE_CONFIG = ({\n name: \"targetfirebase\",\n apiKey: \"AIzaSyBquSsEgQnG_rHyasUA95xHN5INnvnh3gc\",\n authDomain: \"endpointserviceusers.firebaseapp.com\",\n projectId: \"endpointserviceusers\",\n appId: \"1:283622646315:web:baa488124636283783006e\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1815,"value":"md`#### Security Rules\n\n[Security rules](https://firebase.google.com/docs/database/security) hosted by the Firebase Realtime Database should include the following to secure the backend database (FIREBASE_CONFIG). The rules ensure only the service account can access it. The rules are generated by querying service account's *whoami* endpoint, so the instructions will update when you configure the service account.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1487,"value":"{\n if (!getContext().serverless) {\n const UID = (await (await fetch(whoami.href)).json()).uid;\n\n return md`\n~~~js\n{\n \"rules\":{\n \"@endpointservices\":{\n \"relmeauth\":{\n \"session\":{\n \"$state\":{\n \".write\":\"auth.uid == '${UID}'\",\n \".read\":\"auth.uid == '${UID}'\"\n }\n },\n \"codes\":{\n \"$code\":{\n \".write\":\"auth.uid == '${UID}'\",\n \".read\":\"auth.uid == '${UID}'\"\n }\n },\n \"users\":{\n \"$me\":{\n \".write\":\"auth.uid == '${UID}'\",\n \".read\":\"auth.uid == '${UID}'\"\n }\n }\n }\n }\n }\n}\n~~~\n`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1218,"value":"md`#### ASSETS_BASE_URL\n\nRoot of static assets such as images.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"ASSETS_BASE_URL = \"https://storage.googleapis.com/indieauth_com/public\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1773,"value":"md`#### Providers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1777,"value":"PROVIDERS = ({\n github: {\n regex: /https?:\\/\\/(?:www\\.)?github\\.com\\/([^\\/]+)/,\n auth: true, \n oneway: true\n },\n twitter: {\n regex: /https?:\\/\\/(?:www\\.)?twitter\\.com\\/([^\\/]+)/,\n auth: false\n },\n observable: {\n regex: /https:\\/\\/observablehq\\.com\\/([^\\/]+)/,\n auth: false\n },\n indieauth: {\n auth: true\n },\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1742,"value":"PROVIDER_FOR_URL = (url, rel = 'me') => {\n // https://github.com/aaronpk/IndieAuth.com/blob/5d4ae533a72781d6a1a1c3cd8a288928edf2ae9c/models/provider.rb#L25\n if (rel === 'me') {\n return Object.keys(PROVIDERS).find(\n provider => PROVIDERS[provider].regex && url.match(PROVIDERS[provider].regex)\n );\n } else if (rel === 'authorization_endpoint'){\n return 'indieauth' \n }\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1195,"value":"md`#### GITHUB_XXX\n\nConfiguration of the backend's Github Oauth Client. Server allows users to authenticated with Github, then substitutes a Github issued token for a custom one. Settings we figured out using [Oauth 2.0 Examples](https://observablehq.com/@tomlarkworthy/oauth-examples)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"GITHUB_CLIENT_SECRET_SECRET_NAME = \"endpointservices_github_client_secret\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"GITHUB_TOKEN_URL = \"https://github.com/login/oauth/access_token\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"GITHUB_CLIENT_ID = \"Iv1.058b3e2cc86bdb17\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"GITHUB_AUTHORIZE_URL = 'https://github.com/login/oauth/authorize'","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"GITHUB_TOKEN_PARAMS = args => ({\n client_id: args.CLIENT_ID,\n redirect_uri: args.REDIRECT_URI,\n scope: args.SCOPES.join(\" \"),\n code: args.code,\n state: args.state\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1110,"value":"md`\n\n---\n## Server Endpoints\n\nThe core of the implementation is a set of HTTP endpoints\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"md`\n### Oauth 2.0 Authorization Endpoint\n\nYou redirect the user to the authorization endpoint, with a client_id, redirect_uri and a state parameter. After the user has authorized the application, they will be returned to the redirect_uri along with a *code* and the original state value.\n\nUnusually, IndieAuth also allows the code to be exchanged at the *authorization_endpoint* in addition to the typical *token_endpoint*.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":712,"value":"md`\n### Oauth 2.0 Token Endpoint\n\nThe token has two major roles \n\n1. where a *code* can be exchanged for an *access_token*\n2. where an *access_token* can be validated and decoded\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1061,"value":"verifyToken = async (authorization) => {\n const token = extractBearerToken(authorization)\n return verifyCustomToken(tokenFirebase, token);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1696,"value":"import {firebase as tokenFirebase} with {TOKEN_FIREBASE_CONFIG as firebaseConfig} from '@tomlarkworthy/firebase'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1065,"value":"function extractBearerToken(headerValue) {\n // https://tools.ietf.org/html/rfc6750#section-2.1\n let match = undefined \n if (match = /^Bearer\\s(.*)$/.exec(headerValue)) {\n return match[1]\n }\n throw new Error(\"No bearer token found\")\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1119,"value":"md`### Scan Identity URL\n\nScans a URL looking for rel=\"me\" links and tries to classify each as a supported provider or not. It does not inspect those links, so it cannot check for backlinks.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1130,"value":"md`### Verify link\n\nGiven an identity URL (me) and a profile link (profile) checks whether the profile is a legitimate identity provider for me by considering backlinks. If so, and the provider is supported, it will return a link to to start the auth flow.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"async function links_to(page, url) {\n return (await rel_links(page, 'me')).some(link => link.href === (new URL(url)).toString())\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1144,"value":"md`### Auth Flow Start Endpoint\n\nStart of an Oauth 2.0 flow. Given the parameters, this endpoint will cache the client settings and redirect to a more specific identity provider.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1151,"value":"md`### Provider Specific Endpoints`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"auth_path = (provider, profile, me, client_id, state, scope) => {\n // https://github.com/aaronpk/IndieAuth.com/blob/5d4ae533a72781d6a1a1c3cd8a288928edf2ae9c/models/provider.rb#L38\n return `${auth_start.href}?me=${encodeURIComponent(me)}&provider=${encodeURIComponent(provider)}&profile=${encodeURIComponent(profile)}&client_id=${client_id}&state=${state}&scope=${scope}`\n }\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1636,"value":"md`#### Github Redirect URI`","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1638,"value":"md`#### IndieAuth Redirect URI`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1293,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1450,"value":"md`### Whoami: Service Account Endpoint\n\nFirebase rules need to grant write access to the service account. This endpoint can be used to get its *uid* of the DATABASE_SERVICE_ACCOUNT and confirm it is wired up properly.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1455,"value":"whoami = deploy(\"whoami\", async (req, res, ctx) => {\n try {\n const service_access_token = await getAccessTokenFromServiceAccount(\n ctx.secrets[SERVICE_ACCOUNT_SECRET]\n );\n await signinWithAccessToken(firebase, service_access_token);\n res.json({\n uid: firebase.auth().currentUser.uid\n })\n } catch (err) {\n res.status(500).send(err.message) \n }\n}, {\n secrets: [SERVICE_ACCOUNT_SECRET]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1124,"value":"md`## Validators\n\nHelpers on cleaning inputs. A *check* will normalize and throw if invalid.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"function checkIsURL(arg, name) {\n try {\n return new URL(arg).toString()\n } catch (err) {\n throw new Error(`${name || 'arg'} is not a URL`)\n } \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"function checkNotEmptyString(arg, name) {\n if (!arg || arg === '') throw new Error(`${name || 'arg'} is empty`)\n return arg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"checkRedirect = (redirect_uri, redirect_uris) => {\n if (!redirect_uris.some(candidate => {\n if (redirect_uri === candidate) return true; // Exact match, ofc\n if (candidate.endsWith(\"**\") && redirect_uri.startsWith(candidate.substring(0, candidate.length - 2))) return true;\n return false;\n })) throw new Error(`No matching redirect_uri for ${redirect_uri}`)\n return true;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"//https://stackoverflow.com/questions/8135132/how-to-encode-url-parameters\nencodeParams = p =>\n Object.entries(p)\n .map(kv => kv.map(encodeURIComponent).join(\"=\"))\n .join(\"&\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1189,"value":"md`## Frontend (HTML & JS)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":826,"value":"header_html = () => html`\n\nWeb Sign-In\n\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":811,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":838,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":817,"value":"success_endpoint = deploy(\"success_endpoint\", (req, res) => res.send(success_html().outerHTML))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1344,"value":"md`## Utils`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1536,"value":"md`#### b64S256 (Base64url Encoding without Padding)\n\nFor PKCE code verifier challenges you need this encoding function.\n\nhttps://tools.ietf.org/html/rfc7636#appendix-A\nAlso see https://tonyxu-io.github.io/pkce-generator/\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1347,"value":"async function b64S256(str) {\n const encoder = new TextEncoder();\n const data = encoder.encode(str);\n const hashBuffer = await crypto.subtle.digest(\"SHA-256\", data);\n const b64 = btoa(String.fromCharCode.apply(null, new Uint8Array(hashBuffer))).split('=')[0];\n return b64.replaceAll('+', '-').replaceAll('/', '_')\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1540,"value":"md`#### decodeJsonOrForm\n\nTries to parse a string as JSON and falls back to URL encoded form data if that fails.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1405,"value":"function decodeJsonOrForm(text) {\n console.log(text)\n try {\n return JSON.parse(text)\n } catch(err) {\n return Object.fromEntries(new URLSearchParams(text))\n }\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1541,"value":"md`## Imports\n\nFor security and stability reasons all imports are pinned.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"import {\n firebase,\n FKEY\n} with { FIREBASE_CONFIG as firebaseConfig } from \"@tomlarkworthy/firebase\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1578,"value":"import {\n createCustomToken,\n verifyCustomToken,\n signinWithAccessToken,\n getAccessTokenFromServiceAccount\n} from \"@tomlarkworthy/firebase-admin\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"import { fetchp } from \"@tomlarkworthy/fetchp\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"// We can't use webcode ATM, the firebase instances interfere\n// The following code sometimes stalls/\n/*\nfirebase\n .database()\n .ref(\"services/http/debug/5gMtAMF7AbvqsGjoP23JkQUQG3yi8kvz\")\n .once(\"value\")\n .then((s) => s.val())\n*/\nimport { deploy, getContext } from \"@endpointservices/webcode\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"import {html} from '@observablehq/htl@1147'","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"import { randomId } from '@tomlarkworthy/secure-random-id@65'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1495,"value":"import {toc} from \"@bryangingechen/toc@91\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1514,"value":"import {bannerImage} from \"@observablehq/banner@463\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1950,"value":"import { footer } from \"@endpointservices/footer-with-backups\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1958,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3d","stdlib":"1","titling":"auto"}