31:[] 2f:{"title":"Oauth 2.0 Client Examples","cells":[{"id":0,"value":"md`# Oauth 2.0 Client Examples\n\nThese are preconfigured clients that can authorize *this* notebook. You would need to create your own secrets and *client_id* and *redirect_uri*'s if you were to host your own, but here you can experience it working.\n\nWe only support the Oauth 2.0 _ Authorization Code_ grant flow. For high level documentation on Oauth 2.0, I recommend [Auth0](https://auth0.com/docs/protocols/protocol-oauth2)'s.\n\nEach Oauth client runs its own [proxy](https://observablehq.com/@tomlarkworthy/fetchp) which injects [secrets](https://observablehq.com/@endpointservices/secrets) during transit outside the browser environment.\n\nThe Oauth Client Example here are for-\n- [RelMeAuth](#relmeauth)\n- [Github](#github)\n- [Reddit](#reddit)\n- [Google](#google)\n- [Strava](#strava)\n\nWe do not suppor PCKE yet, but the [IndieAuth server](https://observablehq.com/@endpointservices/auth) does do a PKCE handshake including the b64S256 hash function when talking to an upstream indie auth endpoint.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"relmeauth = md`## Login to an RelMeAuth server\n\nLogin using a URL to a privacy preserving authorization server hosted [on Observable](https://observablehq.com/@endpointservices/relmeauth).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":741,"value":"html`login to RelMeAuth on @endpointservices`","pinned":false,"hidden":false,"mode":"ojs"},{"id":739,"value":"relmeauth_link","pinned":false,"hidden":false,"mode":"ojs"},{"id":737,"value":"relmeauth_state","pinned":false,"hidden":false,"mode":"ojs"},{"id":773,"value":"relmeauth_state.access_token","pinned":true,"hidden":false,"mode":"ojs"},{"id":734,"value":"import { authorize_link as relmeauth_link, state as relmeauth_state } with {\n RELMEAUTH_CLIENT_ID as CLIENT_ID,\n RELMEAUTH_AUTHORIZE_URL as AUTHORIZE_URL,\n RELMEAUTH_TOKEN_URL as TOKEN_URL,\n RELMEAUTH_TOKEN_PARAMS as TOKEN_PARAMS\n} from '@tomlarkworthy/oauth'","pinned":true,"hidden":false,"mode":"ojs"},{"id":711,"value":"RELMEAUTH_CLIENT_ID = \"https://observablehq.com/@tomlarkworthy/oauth-examples\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"RELMEAUTH_AUTHORIZE_URL = \"https://webcode.run/notebooks/@endpointservices/auth/deploys/authorization_endpoint/mods/X/secrets/endpointservices_secretadmin_service_account_key\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":715,"value":"RELMEAUTH_TOKEN_URL = \"https://webcode.run/notebooks/@endpointservices/auth/deploys/token_endpoint/mods/X/secrets/endpointservices_secretadmin_service_account_key,endpointservices_minter\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":717,"value":"RELMEAUTH_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":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"github = md`## Github example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"md`Github App are configured at [/settings/apps](https://github.com/settings/apps). Technical documentation is [here](https://docs.github.com/en/developers/apps/identifying-and-authorizing-users-for-github-apps).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"html`login to Github`","pinned":true,"hidden":false,"mode":"ojs"},{"id":300,"value":"github_state","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"import { authorize_link as github_link, state as github_state } with {\n GITHUB_CLIENT_ID as CLIENT_ID,\n GITHUB_CLIENT_SECRET_SECRET_NAME as CLIENT_SECRET_SECRET_NAME,\n GITHUB_CLIENT_SECRET_PARAMETER_NAME as CLIENT_SECRET_PARAMETER_NAME,\n GITHUB_AUTHORIZE_URL as AUTHORIZE_URL,\n GITHUB_TOKEN_URL as TOKEN_URL,\n GITHUB_TOKEN_PARAMS as TOKEN_PARAMS\n} from '@tomlarkworthy/oauth'","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"GITHUB_CLIENT_SECRET_SECRET_NAME = \"tomlarkworthy_github_client_secret\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"GITHUB_CLIENT_SECRET_PARAMETER_NAME = \"client_secret\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"GITHUB_CLIENT_ID = \"Iv1.058b3e2cc86bdb17\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"GITHUB_AUTHORIZE_URL = 'https://github.com/login/oauth/authorize'","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"GITHUB_TOKEN_URL = \"https://github.com/login/oauth/access_token\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"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":531,"value":"github_storage = md`## Github multi tenancy external storage example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"md`Here we investigate how to set up shared storage of the auth state. Note in this example the database is publically readable, so the *auth_tokens* are public! However, we do not ask for any scopes so they have limited power.\n\nIn a real situation you would need to secure these, for example, run the browsers in a privileged environment like [serverless cells](https://www.producthunt.com/posts/serverless-cells). The purpose of this is to document how to inject a custom storage backend for the Auth clients.\n\nWe also show how to do dynamic lookup of the tenant despite the redirect_uri being different to the source notebook. This indirection is, for instance, we you could keep the access_tokens hidden from the end user.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"html` Switch to tenant`","pinned":false,"hidden":false,"mode":"ojs"},{"id":652,"value":"html`login to Github as ${tenant}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"import { deploy } from '@endpointservices/serverless-cells'","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"GITHUB_REDIRECT_URI = deploy(\"github_storage_redirect\", async (req, res) => {\n // From the state parameter we can figure out the tenant that used it.\n const tenant = (await firebase\n .database()\n .ref(`@tomlarkworthy/oauth-examples/${req.query.state}`)\n .once('value')).val();\n res.redirect(\n `https://observablehq.com/@tomlarkworthy/oauth-examples?tenant=${tenant}&state=${req.query.state}&code=${req.query.code}#github_storage`\n );\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":574,"value":"github_storage_state","pinned":false,"hidden":false,"mode":"ojs"},{"id":550,"value":"tenant = new URLSearchParams(location.search).get(\"tenant\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":687,"value":"state_to_tenant = {\n if (github_storage_state.state && tenant)\n return firebase\n .database()\n .ref(`@tomlarkworthy/oauth-examples/${github_storage_state.state}`)\n .set(tenant);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":546,"value":"firebaseConfig = ({\n apiKey: \"AIzaSyBN4bxw6d0cM0CGPNzRrkRlBqwFQnPLdN4\",\n authDomain: \"larkworthy-dfb11.firebaseapp.com\",\n databaseURL:\n \"https://larkworthy-dfb11-default-rtdb.europe-west1.firebasedatabase.app\",\n projectId: \"larkworthy-dfb11\",\n appId: \"1:786910701676:web:8d7dd002acf3b78c74d049\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"import { firebase } with { firebaseConfig } from '@tomlarkworthy/firebase'","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"md`\n Security rules look like\n\n~~~js\n{\n \"rules\": {\n \"@tomlarkworthy\": {\n \"oauth-examples\": {\n \t\"$tenant\": {\n \".read\": true,\n \".write\": true\n }\n }\n }\n }\n}\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"ref = firebase.database().ref(`/@tomlarkworthy/oauth-examples/${tenant}`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"md`In a multitenancy situation we want the current user to be included in the redirect URL`","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"GITHUB_STORAGE_BACKEND = ({\n getItem: async key => (await ref.child(btoa(key)).once('value')).val(),\n setItem: async (key, value) => await ref.child(btoa(key)).set(value)\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":569,"value":"import {\n authorize_link as github_storage_link,\n state as github_storage_state\n} with {\n GITHUB_CLIENT_ID as CLIENT_ID,\n GITHUB_CLIENT_SECRET_SECRET_NAME as CLIENT_SECRET_SECRET_NAME,\n GITHUB_CLIENT_SECRET_PARAMETER_NAME as CLIENT_SECRET_PARAMETER_NAME,\n GITHUB_AUTHORIZE_URL as AUTHORIZE_URL,\n GITHUB_TOKEN_URL as TOKEN_URL,\n GITHUB_TOKEN_PARAMS as TOKEN_PARAMS,\n GITHUB_STORAGE_BACKEND as STORAGE_BACKEND,\n GITHUB_REDIRECT_URI as REDIRECT_URI\n} from '@tomlarkworthy/oauth'","pinned":true,"hidden":false,"mode":"ojs"},{"id":303,"value":"reddit = md`## Reddit example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"md`[Reddit Oauth 2.0 instructuctions](https://github.com/reddit-archive/reddit/wiki/OAuth2). Apps can be created at [/prefs/apps](https://www.reddit.com/prefs/apps).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"html`login to Reddit`","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"reddit_state","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"import { authorize_link as reddit_link, state as reddit_state } with {\n REDDIT_CLIENT_ID as CLIENT_ID,\n REDDIT_CLIENT_SECRET_SECRET_NAME as CLIENT_SECRET_SECRET_NAME,\n REDDIT_USE_BASIC_AUTH as USE_BASIC_AUTH,\n REDDIT_AUTHORIZE_URL as AUTHORIZE_URL,\n REDDIT_TOKEN_URL as TOKEN_URL,\n REDDIT_TOKEN_HEADERS as TOKEN_HEADERS,\n REDDIT_TOKEN_BODY as TOKEN_BODY,\n REDDIT_SCOPES as SCOPES\n} from '@tomlarkworthy/oauth'","pinned":true,"hidden":false,"mode":"ojs"},{"id":310,"value":"REDDIT_CLIENT_ID = 'HS-UEO2EWugyNg'","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"REDDIT_CLIENT_SECRET_SECRET_NAME = 'tomlarkworthy_reddit_client_secret'","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"REDDIT_USE_BASIC_AUTH = true","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"REDDIT_AUTHORIZE_URL = 'https://www.reddit.com/api/v1/authorize'","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"REDDIT_TOKEN_URL = 'https://www.reddit.com/api/v1/access_token'","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"REDDIT_TOKEN_BODY = args => {\n return `grant_type=authorization_code&code=${args.code}&redirect_uri=${args.REDIRECT_URI}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"REDDIT_TOKEN_HEADERS = ({\n 'content-type': 'application/x-www-form-urlencoded'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"REDDIT_SCOPES = ['read']","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"google = md`## Google`","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"md`Oauth 2.0 credentials can be minted in [Google Cloud Console](https://console.cloud.google.com/apis/credentials). Information on the web-server authentication flow is [here](https://developers.google.com/identity/protocols/oauth2/web-server).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":444,"value":"html`login to Google`","pinned":true,"hidden":false,"mode":"ojs"},{"id":445,"value":"google_state","pinned":true,"hidden":false,"mode":"ojs"},{"id":442,"value":"import { authorize_link as google_link, state as google_state } with {\n GOOGLE_CLIENT_ID as CLIENT_ID,\n GOOGLE_CLIENT_SECRET_SECRET_NAME as CLIENT_SECRET_SECRET_NAME,\n GOOGLE_CLIENT_SECRET_PARAMETER_NAME as CLIENT_SECRET_PARAMETER_NAME,\n GOOGLE_AUTHORIZE_URL as AUTHORIZE_URL,\n GOOGLE_TOKEN_URL as TOKEN_URL,\n GOOGLE_TOKEN_HEADERS as TOKEN_HEADERS,\n GOOGLE_TOKEN_BODY as TOKEN_BODY,\n GOOGLE_SCOPES as SCOPES\n} from '@tomlarkworthy/oauth'","pinned":true,"hidden":false,"mode":"ojs"},{"id":427,"value":"GOOGLE_CLIENT_ID = '1986724398-5adiabbdrs6lrdh54m25nv9l2afjvl2q.apps.googleusercontent.com'","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"GOOGLE_CLIENT_SECRET_SECRET_NAME = 'tomlarkworthy_google_client_secret'","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"GOOGLE_CLIENT_SECRET_PARAMETER_NAME = \"client_secret\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"GOOGLE_AUTHORIZE_URL = 'https://accounts.google.com/o/oauth2/v2/auth'","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"GOOGLE_TOKEN_URL = 'https://oauth2.googleapis.com/token'","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"GOOGLE_TOKEN_HEADERS = ({\n 'content-type': 'application/x-www-form-urlencoded'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"GOOGLE_TOKEN_BODY = args => {\n return (\n `code=${args.code}&client_id=${args.CLIENT_ID}&` +\n `redirect_uri=${args.REDIRECT_URI}&grant_type=authorization_code`\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"GOOGLE_SCOPES = [\n \"https://www.googleapis.com/auth/userinfo.profile\",\n \"https://www.googleapis.com/auth/userinfo.email\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":781,"value":"strava = md`## Strava`","pinned":false,"hidden":false,"mode":"ojs"},{"id":790,"value":"html`login to Strava`","pinned":true,"hidden":false,"mode":"ojs"},{"id":811,"value":"strava_state","pinned":true,"hidden":false,"mode":"ojs"},{"id":784,"value":"STRAVA_CLIENT_SECRET_SECRET_NAME = 'tomlarkworthy_strava_client_secret'","pinned":false,"hidden":false,"mode":"ojs"},{"id":807,"value":"STRAVA_CLIENT_SECRET_PARAMETER_NAME = 'client_secret'","pinned":false,"hidden":false,"mode":"ojs"},{"id":788,"value":"STRAVA_CLIENT_ID = \"69457\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":798,"value":"STRAVA_AUTHORIZE_URL = 'https://www.strava.com/oauth/authorize'","pinned":false,"hidden":false,"mode":"ojs"},{"id":800,"value":"STRAVA_TOKEN_URL = 'https://www.strava.com/oauth/token'","pinned":false,"hidden":false,"mode":"ojs"},{"id":796,"value":"STRAVA_SCOPES = [\"activity:read\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"STRAVA_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":true,"hidden":false,"mode":"ojs"},{"id":786,"value":"import { authorize_link as strava_link, state as strava_state } with {\n STRAVA_CLIENT_ID as CLIENT_ID,\n STRAVA_CLIENT_SECRET_SECRET_NAME as CLIENT_SECRET_SECRET_NAME,\n STRAVA_CLIENT_SECRET_PARAMETER_NAME as CLIENT_SECRET_PARAMETER_NAME,\n STRAVA_AUTHORIZE_URL as AUTHORIZE_URL,\n STRAVA_TOKEN_URL as TOKEN_URL,\n STRAVA_TOKEN_PARAMS as TOKEN_PARAMS,\n STRAVA_SCOPES as SCOPES\n} from '@tomlarkworthy/oauth'","pinned":true,"hidden":false,"mode":"ojs"},{"id":823,"value":"import { footer } from \"@endpointservices/endpoint-services-footer\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":825,"value":"footer","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}