29:null 2a:["$","title",null,{"children":"Authentication Simulator | Mike Bostock | Observable"}] 2f:[] 2d:{"id":"2be39975b0149835","slug":"authentication-simulator","title":"Authentication Simulator","thumbnail":"fb17ece16668e3e253a5b120e33271ef51bda3395c7aa5c2510a0b5d243140e2","access_level":"public","create_time":"$D2018-04-26T22:33:07.205Z","update_time":"$D2018-04-30T19:40:09.732Z","view_time":null,"first_public_time":"$D2018-04-30T19:40:16.568Z","has_unpublished_edits":null,"fork":false,"stars":23,"starred":false,"owner":{"type":"team","id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":"pro_2026"},"version":91,"publish_version":91,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":15,"collection":null,"type":"notebook","body":{"title":"Authentication Simulator","cells":[{"id":0,"value":"md`# Authentication Simulator\n\nThis notebook demonstrates how you might implement a login flow (as with OAuth) where if the reader is already signed in, they see a greeting, but if they’re not, they see a button to sign in.\n\nClick the Sign In button to simulate signing in:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"viewof user = {\n try {\n const {login} = await authenticate();\n const hello = md`Hello, **${login}**! You’re authenticated. Hooray! 🎉`;\n hello.value = {login};\n return hello;\n } catch (error) {\n const form = html`

\n`], {type: \"text/html\"}));\n invalidation.then(() => URL.revokeObjectURL(url));\n return function() {\n return new Promise((resolve, reject) => {\n const popup = window.open(url, \"_blank\");\n popup.addEventListener(\"submit\", event => {\n event.preventDefault();\n popup.close();\n const login = event.target.login.value.trim();\n if (!login) return reject(new Error(\"empty\"));\n resolve({login});\n });\n popup.addEventListener(\"unload\", () => {\n if (popup.closed) reject(new Error(\"closed\"));\n });\n });\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"

Simulated Login Form