${ md` Login is a *critical* component of offering stateful personalised experiences on the web. A login step allows a user to prove their identity to a backend service. With that knowledge, a backend services can provide conditional access to resources, such as a personal storage space that is isolated from other users. Many auth providers are configured to permit login to a single domain, but this does not work well with the Observable workflow where we would like users to be able to fork notebooks into their own subdomain for personal customization. They will need to be able to login to their forked notebook, though even though it is now hosted on their personal subdomain. ~~~js import {viewof user} from '@endpointservices/login' ... viewof user // Resolves only when logged in. ~~~ Because Endpoint Services does not have fine grained access control, we only allow login of of the owner of a subdomain to forked Notebooks. This avoids the risk of construction of malicious forks. If you do wish to share an improvement to an endpoint service notebook, either suggest changes to the @endpointservices notebook, or encourage others to fork your work into their workspace. We use the tricks described in [John Carrol's excellent guide to federating Firebase auth](https://dev.to/johncarroll/how-to-share-firebase-authentication-across-subdomains-1ka8) to enable you to login to Endpoint services from your own notebooks. We deviate slightly from his implementation by use Origin header to avoid CSRF attacks instead of his "csst" token. The technique for login federation is interesting in its own right. All production code is in this notebook using [serverless cells](https://observablehq.com/@tomlarkworthy/serverless-cells). So you can see how this one works to make your own. `}`32:T484,federatedLoginState = { // firebase.auth().currentUser is always null on first page reload, will be notified // by first state change if (notify === 0) return new Promise(() => {}); // If we already have custom auth token we are already logged in as a federated user /* No if user signouts out on subdomain we might still have custom creds in notebook try { firebase.auth().currentUser && await checkToken(await firebase.auth().currentUser.getIdToken()) } catch (err) { if (err.message === "Not approved signin provider: custom") return "LOGGED_IN" }*/ if (this == "LOGGED_IN" && firebase.auth().currentUser) return "LOGGED_IN"; // Maybe we can become one? const check = await fetch(baseURL + "/check", { method: 'POST', credentials: 'include' }); if (check.status === 200) { const token = await check.text(); await firebase.auth().signInWithCustomToken(token); mutable notify++; return "LOGGED_IN" } else if (check.status === 401) { return "LOGGED_OUT" } else if (check.status === 403) { return "UNCERTIFIED" } else { throw new Error("Unexpected: " + check.status) } }33:[] 2e:{"title":"Federated Login (⚠️ not in use)","cells":[{"id":0,"value":"html`

${md`# Federated Login (⚠️ not in use)\n\nThe controls below create a federated login session that will allow you to login to Endpoint services from your own personal domains.\n\nWorks by creating an encrypted _SameSite=None_ cookie that is sent to shared URL regardless of the origin you are browsing from.\n\n(Please note UI is very slow ATM)\n(Works with Chrome, Firefox but not Safari)\n\n`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":759,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":536,"value":"mutable notify = { // Triggers a reevaluation of the auth state\n return 0\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"lib = {\n firebase.auth().onAuthStateChanged(function(user) {mutable notify++});\n return ({\n signout: async () => {\n // Remove cookie first\n await fetch(baseURL + \"/signout\", {\n method: 'POST',\n credentials: 'include'\n })\n // Remove firebase 2nd (also notifies listeners)\n await firebase.auth().signOut();\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"html`

${\nmd`### Endpoint\n\nWe serve a single 'default' serverless cells as the API endpoint connected to an Express router so can use multiple routes.\n`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":770,"value":"baseURL = \"https://endpointservice.web.app/notebooks/@endpointservices/login/secrets/endpointservices_secretadmin_service_account_key\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"deploy(\"default\", handleWithExpress(api), {\n // Admin account can mint custom login tokens and encrypt cookies\n secrets: ['endpointservices_secretadmin_service_account_key'],\n modifiers: [\"terminal\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"api = {\n const api = Router();\n api.use((req, res, next) => {\n const cookieHandler = cookieParser(req.context.secrets['endpointservices_secretadmin_service_account_key'])\n cookieHandler(req, res, next)\n });\n api.post('/signin', signinHandler);\n api.post('/check', checkHandler);\n api.post('/signout', signoutHandler);\n return api\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"html`

${\nmd`## /signin\n\nExchanges a Firebase auth ID token for a encrypted cookie containing the user's _uid_.\n\nCan only be called from Endpoint Service notebooks. If the token is suitable, the server sets a cookie that will be submitted to other login endpoints regardless what origin the call is made from.\n`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"// Ensure token is ok for exchange for federation. Checks it is not a custom domain itself and it was recently issued.\nasync function checkToken(idToken) {\n const jwt = await verifyIdToken(firebase, idToken);\n const secondsSinceIssued = (Date.now() - new Date(jwt.iat * 1000)) / 1000;\n if (secondsSinceIssued > 60 * 60)\n throw new Error(\"Iat too old\");\n if (!firebaseConfig.uiConfig.signInOptions.includes(jwt.firebase.sign_in_provider)) \n throw new Error(\"Not approved signin provider: \" + jwt.firebase.sign_in_provider);\n return jwt;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"signinHandler = async (req, res) => {\n res.header('Access-Control-Allow-Origin', 'https://endpointservices.static.observableusercontent.com')\n res.header('Access-Control-Allow-Credentials', 'true')\n \n try {\n const jwt = await checkToken(req.body);\n res.cookie('endpointservicesuser',\n jwt.uid /* Firebase id */, {\n maxAge: 30 * 24 * 60 * 60 * 1000, // 30 day expiry\n httpOnly: true, // Not availible in JS env\n secure: true, // Https only\n signed: true, // Encrypted\n path: '/notebooks/@endpointservices/login', // Prevent access from other notebooks\n sameSite: 'None'\n });\n res.status(200).end();\n } catch (err) {\n const msg = err.message;\n console.error(msg);\n res.status(403).send(msg);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":230,"value":"html`

${\nmd`## /check\n\nUse /check to retrieve a custom auth token for cross domain use.\n\nIf a signed cookie is present federated credentials will be sent, otherwise the user should use /signin first.\n`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"checkHandler = async (req, res) => {\n res.header('Access-Control-Allow-Origin', req.headers.origin)\n res.header('Access-Control-Allow-Credentials', 'true')\n if (req.signedCookies && req.signedCookies.endpointservicesuser) {\n const uid = req.signedCookies.endpointservicesuser;\n const sa = JSON.parse(req.context.secrets['endpointservices_secretadmin_service_account_key']);\n const access_token = await getAccessTokenFromServiceAccount(sa);\n await signinWithAccessToken(firebase, access_token)\n \n if (req.headers.origin === \"https://endpointservices.static.observableusercontent.com\" || await isOwner(uid, subdomain(req.headers.origin))) {\n console.log(`Minting ${uid} from ${subdomain(req.headers.origin)}`)\n res.send(await createCustomToken(sa, uid));\n } else {\n // Signin token present but user is calling from an origin that is not allowed federation\n res.status(403).end()\n }\n } else {\n res.status(401).end() // No signin token present\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":809,"value":"html`

${\nmd`## /signout\nClears cookie\n`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":815,"value":"signoutHandler = async (req, res) => {\n res.header('Access-Control-Allow-Origin', req.headers.origin)\n res.header('Access-Control-Allow-Credentials', 'true')\n \n try {\n res.clearCookie('endpointservicesuser', {\n httpOnly: true, // Not availible in JS env\n secure: true, // Https only\n signed: true, // Encrypted\n path: '/notebooks/@endpointservices/login', // Prevent access from other notebooks\n sameSite: 'None'\n });\n res.status(200).end();\n } catch (err) {\n const msg = err.message;\n console.error(msg);\n res.status(500).send(msg);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":881,"value":"html`

${\nmd`\n---\n## Imports\n`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":" cookieParser = require('cookie-parser-browserify@1.4.8')","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"bulma","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"import {createCustomToken, verifyIdToken, getAccessTokenFromServiceAccount, signinWithAccessToken} from '@tomlarkworthy/firebase-admin'","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"import {viewof user as firebaseUser, firebaseConfig, firebase, listen, subdomain, isOwner} from '@endpointservices/utils'","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"import {Router, handleWithExpress, deploy} from '@tomlarkworthy/api-hosting-with-express'","pinned":false,"hidden":false,"mode":"ojs"},{"id":564,"value":"import {html} from '@observablehq/htl'","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"import {bulma} from '@tomlarkworthy/bulma'","pinned":false,"hidden":false,"mode":"ojs"},{"id":950,"value":"import { footer } from \"@endpointservices/footer-with-backups\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":954,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}