Add workaround for firebase-ui

info340 · Nov 28, 2022 · 9abe1bc · 9abe1bc
1 parent c13382a
commit 9abe1bc
Show file tree

Hide file tree

Showing 30 changed files with 68 additions and 40 deletions.
diff --git a/build/404.html b/build/404.html
@@ -24,7 +24,7 @@
 <meta name="author" content="Joel Ross and Mike Freeman" />
 
 
-<meta name="date" content="2022-11-21" />
+<meta name="date" content="2022-11-28" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="apple-mobile-web-app-capable" content="yes" />

diff --git a/build/ajax.html b/build/ajax.html
@@ -24,7 +24,7 @@
 <meta name="author" content="Joel Ross and Mike Freeman" />
 
 
-<meta name="date" content="2022-11-21" />
+<meta name="date" content="2022-11-28" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="apple-mobile-web-app-capable" content="yes" />

diff --git a/build/class-components.html b/build/class-components.html
@@ -24,7 +24,7 @@
 <meta name="author" content="Joel Ross and Mike Freeman" />
 
 
-<meta name="date" content="2022-11-21" />
+<meta name="date" content="2022-11-28" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="apple-mobile-web-app-capable" content="yes" />

diff --git a/build/client-side-development.html b/build/client-side-development.html
@@ -24,7 +24,7 @@
 <meta name="author" content="Joel Ross and Mike Freeman" />
 
 
-<meta name="date" content="2022-11-21" />
+<meta name="date" content="2022-11-28" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="apple-mobile-web-app-capable" content="yes" />

diff --git a/build/client-side-routing.html b/build/client-side-routing.html
@@ -24,7 +24,7 @@
 <meta name="author" content="Joel Ross and Mike Freeman" />
 
 
-<meta name="date" content="2022-11-21" />
+<meta name="date" content="2022-11-28" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="apple-mobile-web-app-capable" content="yes" />

diff --git a/build/code-style-guide.html b/build/code-style-guide.html
@@ -24,7 +24,7 @@
 <meta name="author" content="Joel Ross and Mike Freeman" />
 
 
-<meta name="date" content="2022-11-21" />
+<meta name="date" content="2022-11-28" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="apple-mobile-web-app-capable" content="yes" />

diff --git a/build/css-frameworks.html b/build/css-frameworks.html
@@ -24,7 +24,7 @@
 <meta name="author" content="Joel Ross and Mike Freeman" />
 
 
-<meta name="date" content="2022-11-21" />
+<meta name="date" content="2022-11-28" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="apple-mobile-web-app-capable" content="yes" />

diff --git a/build/css-in-js.html b/build/css-in-js.html
@@ -24,7 +24,7 @@
 <meta name="author" content="Joel Ross and Mike Freeman" />
 
 
-<meta name="date" content="2022-11-21" />
+<meta name="date" content="2022-11-28" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="apple-mobile-web-app-capable" content="yes" />

diff --git a/build/css-layouts.html b/build/css-layouts.html
@@ -24,7 +24,7 @@
 <meta name="author" content="Joel Ross and Mike Freeman" />
 
 
-<meta name="date" content="2022-11-21" />
+<meta name="date" content="2022-11-28" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="apple-mobile-web-app-capable" content="yes" />

diff --git a/build/css-options.html b/build/css-options.html
@@ -24,7 +24,7 @@
 <meta name="author" content="Joel Ross and Mike Freeman" />
 
 
-<meta name="date" content="2022-11-21" />
+<meta name="date" content="2022-11-28" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="apple-mobile-web-app-capable" content="yes" />

diff --git a/build/css.html b/build/css.html
@@ -24,7 +24,7 @@
 <meta name="author" content="Joel Ross and Mike Freeman" />
 
 
-<meta name="date" content="2022-11-21" />
+<meta name="date" content="2022-11-28" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="apple-mobile-web-app-capable" content="yes" />

diff --git a/build/dom.html b/build/dom.html
@@ -24,7 +24,7 @@
 <meta name="author" content="Joel Ross and Mike Freeman" />
 
 
-<meta name="date" content="2022-11-21" />
+<meta name="date" content="2022-11-28" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="apple-mobile-web-app-capable" content="yes" />

diff --git a/build/es6.html b/build/es6.html
@@ -24,7 +24,7 @@
 <meta name="author" content="Joel Ross and Mike Freeman" />
 
 
-<meta name="date" content="2022-11-21" />
+<meta name="date" content="2022-11-28" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="apple-mobile-web-app-capable" content="yes" />

diff --git a/build/firebase.html b/build/firebase.html
@@ -24,7 +24,7 @@
 <meta name="author" content="Joel Ross and Mike Freeman" />
 
 
-<meta name="date" content="2022-11-21" />
+<meta name="date" content="2022-11-28" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="apple-mobile-web-app-capable" content="yes" />
@@ -824,14 +824,24 @@ <h3>Signing In with FirebaseUI</h3>
 <img src="img/firebase/firebaseui-example.png" alt="" />
 <p class="caption">Example of FirebaseUI authentication</p>
 </div>
-<p>There are different FirebaseUI libraries for different platforms; for React you would use <a href="https://github.com/firebase/firebaseui-web-react"><code>firebaseui-web-react</code></a>. This is an external library (just like <code>react-router</code>), so needs to be installed separately:</p>
-<pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span> react-firebaseui</code></pre>
+<p>There are different FirebaseUI libraries for different platforms; previously for React you would use <a href="https://github.com/firebase/firebaseui-web-react"><code>firebaseui-web-react</code></a>. However, as of November 2022 this library has not been updated to work with the latest version of React (React 18), and appears that it may have been abandoned rather than <a href="https://github.com/firebase/firebaseui-web-react/pull/173">applying the needed fix</a>. There are two possible workarounds to this:</p>
+<ol style="list-style-type: decimal">
+<li><p>You can install a user-contributed version of the library (which hasn’t been accepted as a pull request yet):</p>
+<pre class="language-bash"><code><span class="token comment"># install library on the command line</span>
+<span class="token function">npm</span> <span class="token function">install</span> https://gitpkg.now.sh/gvillenave/firebaseui-web-react/dist</code></pre>
+<p>Confirm that your <code>package.json</code> file has the correct dependency listed:</p>
+<pre><code>&quot;react-firebaseui&quot;: &quot;https://gitpkg.now.sh/gvillenave/firebaseui-web-react/dist&quot;</code></pre></li>
+<li><p>You can install the non-React version of the library (<code>firebaseui</code>), and then define the needed Component (<code>StyledFirebaseUI</code>) manually:</p>
+<pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span> firebaseui</code></pre>
+<p>Create the <code>StyledFirebaseAuth.txs</code> file defined <a href="https://github.com/firebase/firebaseui-web-react/pull/173#issuecomment-1224404146">in this comment post</a>.</p></li>
+</ol>
 <p>The React FirebaseUI library provides a Component called <code>&lt;StyledFirebaseAuth&gt;</code>, which you can render in your page like any other Component. You can think of this Component as the “login form”. A complete example of how this Component is used can be found below, following by an explanation.</p>
 <pre class="language-jsx"><code><span class="token comment">//import auth functions and variables from Firebase</span>
 <span class="token keyword">import</span> <span class="token punctuation">{</span> getAuth<span class="token punctuation">,</span> EmailAuthProvider<span class="token punctuation">,</span> GoogleAuthProvider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'firebase/auth'</span>
 
-<span class="token comment">//import the component</span>
-<span class="token keyword">import</span> StyledFirebaseAuth <span class="token keyword">from</span> <span class="token string">'react-firebaseui/StyledFirebaseAuth'</span><span class="token punctuation">;</span>
+<span class="token comment">//import the component -- pick one!</span>
+<span class="token keyword">import</span> StyledFirebaseAuth <span class="token keyword">from</span> <span class="token string">'react-firebaseui/StyledFirebaseAuth'</span><span class="token punctuation">;</span> <span class="token comment">//install option 1</span>
+<span class="token keyword">import</span> StyledFirebaseAuth <span class="token keyword">from</span> <span class="token string">'./StyledFirebaseAuth'</span><span class="token punctuation">;</span> <span class="token comment">//install option 2</span>
 
 <span class="token comment">//an object of configuration values</span>
 <span class="token keyword">const</span> firebaseUIConfig <span class="token operator">=</span> <span class="token punctuation">{</span>

diff --git a/build/functional-programming.html b/build/functional-programming.html
@@ -24,7 +24,7 @@
 <meta name="author" content="Joel Ross and Mike Freeman" />
 
 
-<meta name="date" content="2022-11-21" />
+<meta name="date" content="2022-11-28" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="apple-mobile-web-app-capable" content="yes" />

diff --git a/build/html-fundamentals.html b/build/html-fundamentals.html
@@ -24,7 +24,7 @@
 <meta name="author" content="Joel Ross and Mike Freeman" />
 
 
-<meta name="date" content="2022-11-21" />
+<meta name="date" content="2022-11-28" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="apple-mobile-web-app-capable" content="yes" />

diff --git a/build/index.html b/build/index.html
@@ -24,7 +24,7 @@
 <meta name="author" content="Joel Ross and Mike Freeman" />
 
 
-<meta name="date" content="2022-11-21" />
+<meta name="date" content="2022-11-28" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="apple-mobile-web-app-capable" content="yes" />
@@ -543,7 +543,7 @@ <h1>
 <div id="header">
 <h1 class="title">Client-Side Web Development</h1>
 <p class="author"><em><a href="http://faculty.washington.edu/joelross/">Joel Ross</a> and <a href="http://mfviz.com/#/">Mike Freeman</a></em></p>
-<p class="date"><em>November 21, 2022</em></p>
+<p class="date"><em>November 28, 2022</em></p>
 </div>
 <div id="about-the-book" class="section level1 unnumbered">
 <h1>About the Book</h1>

diff --git a/build/interactive-react.html b/build/interactive-react.html
@@ -24,7 +24,7 @@
 <meta name="author" content="Joel Ross and Mike Freeman" />
 
 
-<meta name="date" content="2022-11-21" />
+<meta name="date" content="2022-11-28" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="apple-mobile-web-app-capable" content="yes" />

diff --git a/build/javascript-libraries.html b/build/javascript-libraries.html
@@ -24,7 +24,7 @@
 <meta name="author" content="Joel Ross and Mike Freeman" />
 
 
-<meta name="date" content="2022-11-21" />
+<meta name="date" content="2022-11-28" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="apple-mobile-web-app-capable" content="yes" />

diff --git a/build/javascript.html b/build/javascript.html
@@ -24,7 +24,7 @@
 <meta name="author" content="Joel Ross and Mike Freeman" />
 
 
-<meta name="date" content="2022-11-21" />
+<meta name="date" content="2022-11-28" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="apple-mobile-web-app-capable" content="yes" />

diff --git a/build/jest.html b/build/jest.html
@@ -24,7 +24,7 @@
 <meta name="author" content="Joel Ross and Mike Freeman" />
 
 
-<meta name="date" content="2022-11-21" />
+<meta name="date" content="2022-11-28" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="apple-mobile-web-app-capable" content="yes" />

diff --git a/build/machine-setup.html b/build/machine-setup.html
@@ -24,7 +24,7 @@
 <meta name="author" content="Joel Ross and Mike Freeman" />
 
 
-<meta name="date" content="2022-11-21" />
+<meta name="date" content="2022-11-28" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="apple-mobile-web-app-capable" content="yes" />

diff --git a/build/react-native.html b/build/react-native.html
@@ -24,7 +24,7 @@
 <meta name="author" content="Joel Ross and Mike Freeman" />
 
 
-<meta name="date" content="2022-11-21" />
+<meta name="date" content="2022-11-28" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="apple-mobile-web-app-capable" content="yes" />

diff --git a/build/react.html b/build/react.html
@@ -24,7 +24,7 @@
 <meta name="author" content="Joel Ross and Mike Freeman" />
 
 
-<meta name="date" content="2022-11-21" />
+<meta name="date" content="2022-11-28" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="apple-mobile-web-app-capable" content="yes" />

diff --git a/build/redux.html b/build/redux.html
@@ -24,7 +24,7 @@
 <meta name="author" content="Joel Ross and Mike Freeman" />
 
 
-<meta name="date" content="2022-11-21" />
+<meta name="date" content="2022-11-28" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="apple-mobile-web-app-capable" content="yes" />

diff --git a/build/responsive-css.html b/build/responsive-css.html
@@ -24,7 +24,7 @@
 <meta name="author" content="Joel Ross and Mike Freeman" />
 
 
-<meta name="date" content="2022-11-21" />
+<meta name="date" content="2022-11-28" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="apple-mobile-web-app-capable" content="yes" />

diff --git a/build/search_index.json b/build/search_index.json
diff --git a/build/standards-and-accessibility.html b/build/standards-and-accessibility.html
@@ -24,7 +24,7 @@
 <meta name="author" content="Joel Ross and Mike Freeman" />
 
 
-<meta name="date" content="2022-11-21" />
+<meta name="date" content="2022-11-28" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="apple-mobile-web-app-capable" content="yes" />

diff --git a/build/webpack.html b/build/webpack.html
@@ -24,7 +24,7 @@
 <meta name="author" content="Joel Ross and Mike Freeman" />
 
 
-<meta name="date" content="2022-11-21" />
+<meta name="date" content="2022-11-28" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="apple-mobile-web-app-capable" content="yes" />

diff --git a/firebase.Rmd b/firebase.Rmd
@@ -346,20 +346,38 @@ Instead, a nicer approach is to use the [**FireabaseUI**](https://firebase.googl
 
 ![Example of FirebaseUI authentication](img/firebase/firebaseui-example.png)
 
-There are different FirebaseUI libraries for different platforms; for React you would use [`firebaseui-web-react`](https://github.com/firebase/firebaseui-web-react). This is an external library (just like `react-router`), so needs to be installed separately:
+There are different FirebaseUI libraries for different platforms; previously for React you would use [`firebaseui-web-react`](https://github.com/firebase/firebaseui-web-react). However, as of November 2022 this library has not been updated to work with the latest version of React (React 18), and appears that it may have been abandoned rather than [applying the needed fix](https://github.com/firebase/firebaseui-web-react/pull/173). There are two possible workarounds to this:
 
-```bash
-npm install react-firebaseui
-```
+1. You can install a user-contributed version of the library (which hasn't been accepted as a pull request yet):
+
+    ```bash
+    # install library on the command line
+    npm install https://gitpkg.now.sh/gvillenave/firebaseui-web-react/dist
+    ```
+
+    Confirm that your `package.json` file has the correct dependency listed:
+
+    ```
+    "react-firebaseui": "https://gitpkg.now.sh/gvillenave/firebaseui-web-react/dist"
+    ```
+
+2. You can install the non-React version of the library (`firebaseui`), and then define the needed Component (`StyledFirebaseUI`) manually:
+
+    ```bash
+    npm install firebaseui
+    ```
+
+    Create the `StyledFirebaseAuth.txs` file defined [in this comment post](https://github.com/firebase/firebaseui-web-react/pull/173#issuecomment-1224404146).
 
 The React FirebaseUI library provides a Component called `<StyledFirebaseAuth>`, which you can render in your page like any other Component. You can think of this Component as the "login form". A complete example of how this Component is used can be found below, following by an explanation.
 
 ```jsx
 //import auth functions and variables from Firebase
 import { getAuth, EmailAuthProvider, GoogleAuthProvider } from 'firebase/auth'
 
-//import the component
-import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
+//import the component -- pick one!
+import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth'; //install option 1
+import StyledFirebaseAuth from './StyledFirebaseAuth'; //install option 2
 
 //an object of configuration values
 const firebaseUIConfig = {