feat: Support for Firebase v9 (compat) (#850)

* Build firebaseui-esm for use against firebase/compat/* * tenantId and languageCode are readonly as of beta.2 * comment out more tests * Upgrade to beta.8, uncomment-out tests * cleanup * Revert whitespace changes * Bump version in demo * Pin JS SDK, beta.0 * Adding an NPM demo and fixing the CSS by upgrading gulp-css-concat * Cleanup * v5 is now taken, lets go 0.600 * Namespace registry * 0.600.0-rc.0 * Bumping versions * Fix bower dep * Cleanup and comment out flaky test * Bump CDN version and drop the wdr change * Split the build and test so things dont time out * Undo the package.json changes in favor to workflow * There was indeed a loop in the buildscript * Try a sleep to let the tunnel connect * Suacelabs is a timing thing, can see in logs start early * Updating the demo widget.html with the new Firebase JS SDK * Flush out the webpack demo a bit more * webdriver-manager has broken with the chrome version on github actions, try updating * String magics * Echo it * Use the --product-version * Version, dropping demo-npm * revert test change * Updating README w/v6/9 references * Whooops sauce_connect wasnt spinning up if cache hit, add OSX support * Replace the TODO w/init as add project doesn't expose compat by default * Bump the Firebase version to include the updateUser fix * Revert sample-config * Try adding the flaky test back in * Bump versions, undo out of scope changes * Bump Firebase version in README * Revert some changes, bump firebase dep * webdriver-manager use equal on versions.chrome arg * Bump lockfile * update package-lock.json up-to-date * remove firebase init in demoApp(which initialize twice) Co-authored-by: Xin Li <[email protected]>
firebase · Oct 28, 2021 · 5e2edbe · 5e2edbe
1 parent 8cdf9eb
commit 5e2edbe
Show file tree

Hide file tree

Showing 14 changed files with 5,516 additions and 925 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1 @@
+* Now using Firebase v9/compat
diff --git a/README.md b/README.md
@@ -91,28 +91,17 @@ Install FirebaseUI and its peer-dependency Firebase via npm using the following
 commands:
 
 ```bash
-$ npm install firebase --save
-$ npm install firebaseui --save
+$ npm install firebase firebaseui --save
 ```
 
-You can then `require` the following modules within your source files:
+You can then `import` the following modules within your source files:
 
 ```javascript
-var firebase = require('firebase');
-var firebaseui = require('firebaseui');
-// or using ES6 imports:
+import firebase from 'firebase/compat/app';
 import * as firebaseui from 'firebaseui'
 import 'firebaseui/dist/firebaseui.css'
 ```
 
-Or include the required files in your HTML, if your HTTP Server serves the files
-within `node_modules/`:
-
-```html
-<script src="node_modules/firebaseui/dist/firebaseui.js"></script>
-<link type="text/css" rel="stylesheet" href="node_modules/firebaseui/dist/firebaseui.css" />
-```
-
 ### Option 3: Bower component
 
 Install FirebaseUI and its dependencies via Bower using the following command:
@@ -193,11 +182,11 @@ for a more in-depth example, showcasing a Single Page Application mode.
   <head>
     <meta charset="UTF-8">
     <title>Sample FirebaseUI App</title>
+    <script src="https://www.gstatic.com/firebasejs/9.1.3/firebase-app-compat.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.1.3/firebase-auth-compat.js"></script>
     <!-- *******************************************************************************************
        * TODO(DEVELOPER): Paste the initialization snippet from this dialog box:
        * Firebase Console > Project Settings > Add App > Web.
-       * In addition, include the firebase-auth SDK:
-       * <script src="https://www.gstatic.com/firebasejs/[FIREBASE VERSION USED IN SNIPPET]/firebase-auth.js"></script> *
        ***************************************************************************************** -->
     <script src="https://www.gstatic.com/firebasejs/ui/5.0.0/firebase-ui-auth.js"></script>
     <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/5.0.0/firebase-ui-auth.css" />
@@ -268,6 +257,8 @@ Here is how you would track the Auth state across all your pages:
   <head>
     <meta charset="UTF-8">
     <title>Sample FirebaseUI App</title>
+    <script src="https://www.gstatic.com/firebasejs/9.1.3/firebase-app-compat.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.1.3/firebase-auth-compat.js"></script>
     <!-- *******************************************************************************************
        * TODO(DEVELOPER): Paste the initialization snippet from:
        * Firebase Console > Overview > Add Firebase to your web app. *
@@ -1347,6 +1338,8 @@ FirebaseUI is displayed.
   <head>
     <meta charset="UTF-8">
     <title>Sample FirebaseUI App</title>
+    <script src="https://www.gstatic.com/firebasejs/9.1.3/firebase-app-compat.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.1.3/firebase-auth-compat.js"></script>
     <!-- *******************************************************************************************
        * TODO(DEVELOPER): Paste the initialization snippet from:
        * Firebase Console > Overview > Add Firebase to your web app. *
@@ -1939,6 +1932,26 @@ can verify in the [demo app](https://fir-ui-demo-84a6c.firebaseapp.com/)).
 
 **For v1.0.0 and superior:** https://github.com/firebase/firebaseui-web/releases
 
+### 6.0.0
+
+FirebaseUI-web v6.0.0 is intended to be used alongside Firebase JS SDK v9 compat.
+
+If using the CDN, change your Firebase imports to:
+
+```html
+<script src="https://www.gstatic.com/firebasejs/9.1.3/firebase-app-compat.js"></script>
+<script src="https://www.gstatic.com/firebasejs/9.1.3/firebase-auth-compat.js"></script>
+```
+
+If NPM:
+
+```ts
+import firebase from 'firebase/compat/app';
+import 'firebase/compat/auth';
+```
+
+[See the Firebase upgrade guide for more information.](https://firebase.google.com/docs/web/modular-upgrade)
+
 ### 5.0.0
 
 `accountchooser.com` has been operating in "universal opt-out" mode and was

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "firebaseui",
-  "version": "2.5.1",
+  "version": "6.0.0",
   "description": "Javascript library for customizable UI on top of Firebase SDK",
   "main": [
     "./dist/firebaseui.js",
@@ -22,6 +22,6 @@
     "out"
   ],
   "dependencies": {
-    "firebase": "^4.1.2"
+    "firebase": "^9.1.3"
   }
 }
diff --git a/buildtools/run_tests.sh b/buildtools/run_tests.sh
@@ -87,8 +87,8 @@ else
   echo "Using Headless Chrome."
   # Updates Selenium Webdriver.
   GOOGLE_CHROME_VERSION=$(google-chrome --product-version || echo 'latest')
-  echo "$PROTRACTOR_BIN_PATH/webdriver-manager update --versions.chrome $GOOGLE_CHROME_VERSION --gecko=false"
-  $PROTRACTOR_BIN_PATH/webdriver-manager update --versions.chrome $GOOGLE_CHROME_VERSION --gecko=false
+  echo "$PROTRACTOR_BIN_PATH/webdriver-manager update --versions.chrome=$GOOGLE_CHROME_VERSION --gecko=false"
+  $PROTRACTOR_BIN_PATH/webdriver-manager update --versions.chrome=$GOOGLE_CHROME_VERSION --gecko=false
   # Start Selenium Webdriver.
   echo "$PROTRACTOR_BIN_PATH/webdriver-manager start &>/dev/null &"
   $PROTRACTOR_BIN_PATH/webdriver-manager start &>/dev/null &

diff --git a/cut b/cut
diff --git a/demo/public/index.html b/demo/public/index.html
@@ -4,7 +4,8 @@
     <meta charset="UTF-8">
     <title>FirebaseUI Auth Demo</title>
     <link rel="manifest" href="manifest.json">
-    <script src="https://www.gstatic.com/firebasejs/7.4.0/firebase.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.1.3/firebase-app-compat.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.1.3/firebase-auth-compat.js"></script>
     <script src="config.js"></script>
     <script src="common.js"></script>
     <link href="style.css" rel="stylesheet" type="text/css" media="screen" />

diff --git a/demo/public/widget.html b/demo/public/widget.html
@@ -3,7 +3,8 @@
   <head>
     <meta charset="UTF-8">
     <title>FirebaseUI Auth Demo</title>
-    <script src="https://www.gstatic.com/firebasejs/7.4.0/firebase.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.1.3/firebase-app-compat.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.1.3/firebase-auth-compat.js"></script>
     <script src="config.js"></script>
     <script src="common.js"></script>
     <script src="dist/firebaseui.js"></script>