2b:null 2c:["$","title",null,{"children":"Firebase and Firebase UI | Edward Misback | Observable"}] 31:T5d7,firebase = { window.firebases = window.firebases || {}; if (!window.firebase) { // Has to be window.firebase for Firebase UI to find it // Require Firebase SDK once window.firebase = await require.alias({ "@firebase/app": `https://www.gstatic.com/firebasejs/${FIREBASE_VERION}/firebase-app.js`, "@firebase/auth": `https://www.gstatic.com/firebasejs/${FIREBASE_VERION}/firebase-auth.js`, "@firebase/database": `https://www.gstatic.com/firebasejs/${FIREBASE_VERION}/firebase-database.js`, "@firebase/firestore": `https://www.gstatic.com/firebasejs/${FIREBASE_VERION}/firebase-firestore.js`, "@firebase/functions": `https://www.gstatic.com/firebasejs/${FIREBASE_VERION}/firebase-functions.js`, "@firebase/storage": `https://www.gstatic.com/firebasejs/${FIREBASE_VERION}/firebase-storage.js`, "@firebase/messaging": `https://www.gstatic.com/firebasejs/${FIREBASE_VERION}/firebase-messaging.js` })( "@firebase/app", "@firebase/auth", "@firebase/database", "@firebase/firestore", "@firebase/functions", "@firebase/storage", "@firebase/messaging" ); } // Init an app for each appId if (!window.firebases[firebaseConfig.appId]) { window.firebases[firebaseConfig.appId] = window.firebase.initializeApp( firebaseConfig, firebaseConfig.appId ); window.firebases[firebaseConfig.appId].auth().useDeviceLanguage(); } return window.firebases[firebaseConfig.appId]; }32:T8d2,async function* listen( ref, { includeRef = false, includeId = false, defaultValue = undefined // If doc is empty what should be the return value } = {} ) { // Forked some code from https://github.com/observablehq/stdlib/blob/master/src/generators/observe.js let resolve = undefined; let reject = undefined; let error = undefined; let dispose = undefined; let done = false; const queue = []; if (ref.onSnapshot) { // Firestore dispose = ref.onSnapshot( snapshot => { const value = snapshot.data ? // Doc listen includeRef || includeId ? { ...snapshot.data(), ...(includeRef && { _ref: snapshot.ref.path }), ...(includeId && { _id: snapshot.id }) } : snapshot.data() || defaultValue : // Collection listen snapshot.docs.map(doc => ({ ...doc.data(), ...(includeRef && { _ref: doc.ref.path }), ...(includeId && { _id: doc.id }) })); queue.push(value); if (resolve) resolve(queue.shift()), (resolve = null); }, err => { error = err; queue.length = 0; done = true; console.log("rejecting with err", err); if (reject) reject(err), (reject = null); } ); } else if (ref.on) { // Firebase RT database const handler = snap => { const value = Object.keys(snap.val() || {}).map(key => ({ ...snap.val()[key], ...(includeRef && { _ref: snap.child(key).ref() }), ...(includeId && { _id: key }) })); queue.push(value); if (resolve) resolve(queue.shift()), (resolve = null); }; ref.on('value', handler, err => { error = err; queue.length = 0; done = true; console.log("rejecting with err", err); if (reject) reject(err), (reject = null); }); dispose = () => ref.off('value', handler); } while (!done) { if (error) { throw error; } else if (queue.length) { yield Promise.resolve(queue.shift()); } else { yield new Promise((res, rej) => { resolve = res; reject = rej; }); } } dispose(); }33:T6e7,viewof user = { // Protection against click jacking const url = html``.href; if ( !url.startsWith("https://observablehq.com") && !url.startsWith("https://next.observablehq.com") ) { throw new Error("Login form is not allowed to be embedded"); } const authContainerId = `firebaseui-auth-container-${Math.random() .toString(36) .substring(7)}`; const form = html`

`; let delayInitialValue = new Promise(async resolveInitialValue => { // Options that are fixed to make it work with Observable firebaseConfig.uiConfig = firebaseConfig.uiConfig || {}; firebaseConfig.uiConfig.signInFlow = "popup"; firebaseConfig.uiConfig.callbacks = { signInSuccessWithAuthResult: (authResult, redirectUrl) => false }; firebase.auth().onAuthStateChanged(function(user) { if (user != null) { form.value = user; resolveInitialValue(user); form.dispatchEvent(new CustomEvent("input")); } }); // Initialize the FirebaseUI Widget using Firebase after the div is visible function pollForUIContainer() { if (!document.getElementById(authContainerId)) { // console.log(`cant find ${authContainerId}`) setTimeout(pollForUIContainer, 50); } else { console.log(`starting for ${authContainerId}`); const ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth()); ui.start(`#${authContainerId}`, firebaseConfig.uiConfig); } } pollForUIContainer(); }); form.value = delayInitialValue; return form; }34:T632,md` To import it: ~~~js import {viewof user} with {firebaseConfig as firebaseConfig} from "@tomlarkworthy/firebaseui" ~~~ To customize it: ~~~js firebaseConfig = ({ // See https://console.firebase.google.com/u/0/project/_/settings/general/web apiKey: "AIzaSyD882c8YEgeYpNkX01fhpUDfioWl_ETQyQ", authDomain: "endpointservice.firebaseapp.com", databaseURL: "https://endpointservice.firebaseio.com", projectId: "endpointservice", storageBucket: "endpointservice.appspot.com", appId: "1:1986724398:web:9b8bc33895b45dd2e095bf", uiConfig: { // https://github.com/firebase/firebaseui-web#configuration signInOptions: ["google.com", "password", "phone", "anonymous"], // tosUrl: '', // Terms of service url. // privacyPolicyUrl: '', // Privacy policy url. }, }) ~~~ To display the UI ~~~js viewof user ~~~ To test it: ~~~js user.displayName ~~~ See the [FirebaseUI](https://firebase.google.com/docs/auth/web/firebaseui) documentation to see some of the advanced signin flows you can achieve (e.g. anonymous login, login by password link) Firestore, Firebase Storage, Firebase Auth and Firebase Functions are also loaded (*not* Firebase Analytics). Thus allowing you to store user application and call server side functionality easily. You can verify firebase id tokens with https://observablehq.com/@tomlarkworthy/verifyidtoken The _user_ variable does resolve until someone logs in (like [Mike's auth simulator](https://observablehq.com/@mbostock/authentication-simulator)). `35:[{"id":"33cbb25f5481dedc73ecc45de90291e561d3662978a4e3b28a2a8f587f965058a3cce8e8e10e78f527043fd90b76dfbe54cc911ea19252e7422e158e33fd47d1","href":"https://static.observableusercontent.com/files/33cbb25f5481dedc73ecc45de90291e561d3662978a4e3b28a2a8f587f965058a3cce8e8e10e78f527043fd90b76dfbe54cc911ea19252e7422e158e33fd47d1","name":"Screen Shot 2019-11-06 at 12.16.34 AM.png","type":"image/png","lastModified":1629682362637.004,"size":82162}] 2f:{"id":"5fbb5f9ba52324a9","slug":"firebase-and-firebase-ui","title":"Firebase and Firebase UI","thumbnail":"8d02943c587a6ecc3ef2167ec3f3e2d1ce8f8f673b4c2cc3f36cce3225d61d3b","access_level":"public","create_time":"$D2021-08-23T01:32:42.637Z","update_time":"$D2021-08-23T23:07:16.177Z","view_time":null,"first_public_time":"$D2021-08-23T01:33:40.635Z","fork":{"id":"993a0c51ef1175ea","slug":"firebase","title":"Firebase and Firebase UI (v8)","owner":{"id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy"}},"stars":1,"starred":false,"owner":{"type":"team","id":"5508584884fd137b","login":"elmisback","name":"Edward Misback","avatar_url":"https://avatars-next.observableusercontent.com/9a42c09ac3fb39913eeacae071d5ba669ac49bf75c82372d0d717ec0acb59024","tier":"starter_2024"},"version":1279,"publish_version":1279,"role":null,"authored":false,"authors":[{"type":"individual","id":"e03d30b651790cf0","login":"elmisback","name":"Edward Misback","avatar_url":"https://avatars-next.observableusercontent.com/9a42c09ac3fb39913eeacae071d5ba669ac49bf75c82372d0d717ec0acb59024","tier":null}],"members":[{"type":"individual","id":"e03d30b651790cf0","login":"elmisback","name":"Edward Misback","avatar_url":"https://avatars-next.observableusercontent.com/9a42c09ac3fb39913eeacae071d5ba669ac49bf75c82372d0d717ec0acb59024","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Firebase and Firebase UI","cells":[{"id":0,"value":"md`# Firebase and Firebase UI\n\nThe Firebase SDK and a user signin UI, plus utility classes for the databases.\n\nProvides a realtime push database (Firestore) and cloud file storage (Firebase storage) protected with granular per user permissions (Firebase auth) behind federated login (Google, Facebook, Twitter, Github, Anonymous, Email and Phone). A reactive login button is provided through FirebaseUI.\n\n### Change log\n- 2020-04-23: Upgrade to 8.4.1\n- 2020-03-17: Multiple app support and Realtime Database added.\n- 2021-03-02: Prevented embedding to guard against clickjacking. Thanks [@keystroke](https://observablehq.com/@keystroke) in [forum](https://talk.observablehq.com/t/clickjacking-attacks-and-notebook-security)\n- ??? Switched to universal _listen_ instead of DocView/DocViews\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1270,"value":"md`# Please note this is a fork!\n## I needed to add the Firebase messaging module, although it seems to require service workers, which require nasty hacks to run in Observable.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1258,"value":"htl.html`

Video Walkthrough