3e:null 3f:["$","title",null,{"children":"Firebase and Firebase UI (v8) | fstfwd | Observable"}] 45:T5e8,md`# Firebase and Firebase UI (v8) The Firebase SDK (version 8) and a user signin UI, plus utility classes for the databases. Provides 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. ### For the v9 modular SDK... This notebook is based on Firebase version 8, in version 9 there was a huge shift to modularity for a reduction in bundle size, however, the API is completely different so it's a very different thing. [the modular firebase SDK collection](https://observablehq.com/@tomlarkworthy/firebase-modular-sdk?collection=@tomlarkworthy/firebase-modular-sdk) ### Change log - 2022-03-28: Add ignorePendingWrites option to listen, which defaults to false for backwards compatibility - 2021-03-09: BUGFIX: firebase.auth().signout() flows to viewof user - 2021-03-03: Lazy loaded testing library to reduce dependancies - 2020-09-01: Fixed race condition with SDK loader. Added RT database to DocView - 2020-04-23: Upgrade to 8.4.1 - 2020-03-17: Multiple app support and Realtime Database added. - 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) - ??? Switched to universal _listen_ instead of DocView/DocViews `46:T50a,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 = require.alias({ "@firebase/app": await FileAttachment("firebase-app@1.js").url(), "@firebase/auth": await FileAttachment("firebase-auth@1.js").url(), "@firebase/database": await FileAttachment( "firebase-database@1.js" ).url(), "@firebase/firestore": await FileAttachment( "firebase-firestore@1.js" ).url(), "@firebase/functions": await FileAttachment( "firebase-functions@1.js" ).url(), "@firebase/storage": await FileAttachment("firebase-storage@1.js").url() })( "@firebase/app", "@firebase/auth", "@firebase/database", "@firebase/firestore", "@firebase/functions", "@firebase/storage" ); } window._firebase = await window._firebase; // Init an app for each firebaseConfig.name || apiKey identifier const id = firebaseConfig.name || firebaseConfig.apiKey; if (!window.firebases[id]) { window.firebases[id] = window._firebase.initializeApp(firebaseConfig, id); window.firebases[id].auth().useDeviceLanguage(); } return window.firebases[id]; }47:T96a,async function* listen( ref, { includeRef = false, includeId = false, ignorePendingWrites = 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 => { if (!ignorePendingWrites || !snapshot.metadata.hasPendingWrites) { 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(); }48:T756,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`

Video Walkthrough