31:T7f7,# Login with comment - V2 The simplest way to securely discover the currently logged-in Observablehq user. The flow generates a token you can externally verify for use in backend services. This gives you a way of authenticating within a notebook without involving a 3rd party identity provider To authenticate, the user writes a code in a publicly visible comment, and thus we can link the session with an Observable identity.

The returned payload is a Firebase Auth user, signed-in using a [custom token](https://firebase.google.com/docs/auth/admin/create-custom-tokens). Thus, the login persists across browser sessions. The host Firebase project is *"endpointserviceusers"*. If you only need to know the logged-in user id you can verify these tokens without special access to *"endpointserviceusers"* using verifyIdToken from [@tomlarkworthy/firebase-admin](/@tomlarkworthy/firebase-admin). If you want to use the token to access **your own backend** Firebase functionality, you should pass in a custom _prepareBackendURL_ and _verifyBackendURL_. An example is done [here](https://observablehq.com/@endpointservices/endpoint-login-with-comment-v2). Overall this is like an OAuth client. Import with ~~~js import {viewof user} from '@endpointservices/login-with-comment-v2' ~~~ Instantiate the login prompt with ~~~js viewof user ~~~ a minimal working example in a 3rd party notebook is [here](https://observablehq.com/@tdlgkjfhdljovtttqrzu/login-with-comment-example). 32:T1803,createLogin = ({ firebaseApp, // Firebase project app that owns the users prepareBackendURL = "https://webcode.run/observablehq.com/@endpointservices/login-with-comment;prepare", verifyBackendURL = "https://webcode.run/observablehq.com/@endpointservices/login-with-comment;verify" } = {}) => { const auth = getAuth(firebaseApp); // When no-one is logged in we want don't want the cell to resolve, so we return a promise // We want that promise to be resolved next time we get a value let firstResolve; const updateResult = () => { const newValue = auth.currentUser; if (firstResolve) { firstResolve(newValue); } if (!newValue) { if (!firstResolve) userUi.value = new Promise((resolve) => (firstResolve = resolve)); else userUi.value = undefined; } else { userUi.value = newValue; } userUi.dispatchEvent( new CustomEvent("input", { bubbles: true, detail: { user: userUi.value || null } }) ); }; const userUi = html`${viewroutine(async function* () { let response; let err = ""; const actionWas = (action) => response && response.actions.includes(action); // On a new page refresh the currentUser is unknown and we have to listen to the auth state change to discover // the initial state. This article explains it well // https://medium.com/firebase-developers/why-is-my-currentuser-null-in-firebase-auth-4701791f74f0 if (!mutable authStateKnown) { let ready = null; const isReady = new Promise((resolve) => (ready = resolve)); onAuthStateChanged(auth, ready); await isReady; mutable authStateKnown = true; } await new Promise((r) => r()); // micro tick so userUi initializes while (true) { try { // update overall view state updateResult(); if (!auth.currentUser) { const loginUi = screen({ auth, actions: ["login"] }); // We need to see if someone logs in via a side channel const unsubscribe = onAuthStateChanged(auth, (user) => { if (user) loginUi.dispatchEvent(new Event("input", { bubbles: true })); }); response = yield* ask(loginUi); unsubscribe(); } else { const logoutUi = screen({ auth, actions: ["logout"] }); // We need to see if someone logout ivia a side channel const unsubscribe = onAuthStateChanged(auth, (user) => { if (!user) logoutUi.dispatchEvent(new Event("input", { bubbles: true })); }); response = yield* ask(logoutUi); unsubscribe(); } if (actionWas("logout")) { console.log("Logging out"); yield screen({ auth, info: md`Logging out...` }); await signOut(auth); } if (actionWas("login")) { console.log("login"); const privateCode = randomId(64); const publicCode = await hash(privateCode); yield screen({ auth, info: md`Preparing...` }); await prepare(publicCode, prepareBackendURL); let relmeauth = false; while (!auth.currentUser) { while (!actionWas("verify")) { console.log("prompt verify"); response = yield* ask( screen({ auth, info: md`1. ${err}Add a comment containing **${publicCode}** to this notebook using the cell burger menu to the left. 2. Click login to complete login.

\n⚠️ Logging in discloses your [Observable](https://observablehq.com/) username to the notebook author. ${actionWas("copy") ? "\ncopied to clipboard" : ""}`, actions: ["copy", "verify"], toggles: [ { code: "profile_relmeauth", label: html`[optional] scan for teams?`, value: relmeauth, caption: html`

how does scanning work?

${md`From your Observablehq profile URL we look for weblinks to team profile URLs, and if those profile URLs also weblink to your profile URL we consider you to have admin access for that team (see [relmeauth](https://observablehq.com/@endpointservices/auth#observable_features))`}

${style()}${['...', inner()]}

`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1245,"value":"screen ","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"container(() => htl.html`

\n \n ${button({\n action: \"login\",\n label: \"Comment signin\",\n icon: chatIcon\n })}${button({\n action: \"copy\",\n label: \"Copy\",\n icon: copyIcon\n })}\n \n \n

write a comment containing code 'dasdasdasdas' in a comment
\n ⚠️ comment not found (try again?)

\n`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":820,"value":"content = ({\n labels: {\n copy: \"Copy to clipboard\",\n login: \"Login with comment\",\n logout: (auth) =>\n `Logout ${auth.currentUser.uid.replace(\"observablehq|\", \"\")}`,\n verify: \"Login\"\n },\n icons: {\n copy: copyIcon,\n login: chatIcon\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1185,"value":"expandContent = (auth, val) => (typeof val === \"function\" ? val(auth) : val)","pinned":true,"hidden":false,"mode":"ojs"},{"id":814,"value":"viewof testScreen = screen({\n info: \"Please copy code\",\n actions: [\"login\", \"verify\"],\n toggles: [\n {\n code: \"profile_relmeauth\",\n label: html`[optional] scan for teams?`,\n value: true,\n caption: html`

how does scanning work?

\n ${md`From your Observablehq profile URL we look for weblinks to team profile URLs, and if those profile URLs also weblink to your profile URL we consider you to have admin access for that team. (related [relmeauth](https://observablehq.com/@endpointservices/auth#observable_features))`}\n

`\n }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":850,"value":"testScreen","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"screen = ({ auth, info, actions = [], toggles = [] } = {}) =>\n container(\n () => view`

\n \n ${[\n \"actions\",\n actions.map((action) =>\n button({\n action,\n label: expandContent(auth, content.labels[action]),\n icon: content.icons[action]\n })\n )\n ]}\n \n${info ? html`

${info}

` : \"\"}\n${[\n \"...\",\n Object.fromEntries(\n toggles.map((toggle) => {\n return [\n toggle.code,\n view`

${[\n \"...\",\n stopPropagation(\n Inputs.toggle({ label: toggle.label, value: toggle.value })\n )\n ]}

${toggle.caption}