Skip to content

Support for Firebase v9 (compat) #850

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 46 commits into from
Oct 28, 2021
Merged

Support for Firebase v9 (compat) #850

Show file tree
Hide file tree
Changes from 38 commits
Commits
Show all changes
46 commits
Select commit Hold shift + click to select a range
c6e3bb1
Build firebaseui-esm for use against firebase/compat/*
jamesdaniels May 25, 2021
99ca009
tenantId and languageCode are readonly as of beta.2
jamesdaniels May 25, 2021
6dc3781
comment out more tests
jamesdaniels May 25, 2021
4d34ac8
Upgrade to beta.8, uncomment-out tests
jamesdaniels Aug 9, 2021
806ff1d
cleanup
jamesdaniels Aug 9, 2021
5e76e3a
Revert whitespace changes
jamesdaniels Aug 9, 2021
41a29e5
Bump version in demo
jamesdaniels Aug 9, 2021
3205e24
Pin JS SDK, beta.0
jamesdaniels Aug 9, 2021
3238bd4
Adding an NPM demo and fixing the CSS by upgrading gulp-css-concat
jamesdaniels Aug 12, 2021
41c69e5
Cleanup
jamesdaniels Aug 12, 2021
aa9d4ce
v5 is now taken, lets go 0.600
jamesdaniels Aug 19, 2021
b489731
Namespace registry
jamesdaniels Aug 19, 2021
dda6a74
0.600.0-rc.0
jamesdaniels Aug 19, 2021
75d87fa
Bumping versions
jamesdaniels Aug 25, 2021
e060629
Merged master.
jamesdaniels Aug 31, 2021
fdcbed4
Fix bower dep
jamesdaniels Aug 31, 2021
0887bd8
Cleanup and comment out flaky test
jamesdaniels Sep 15, 2021
c68fa83
Bump CDN version and drop the wdr change
jamesdaniels Sep 15, 2021
f70377b
Split the build and test so things dont time out
jamesdaniels Sep 15, 2021
b332860
Undo the package.json changes in favor to workflow
jamesdaniels Sep 15, 2021
f113c47
There was indeed a loop in the buildscript
jamesdaniels Sep 15, 2021
1d7495a
Try a sleep to let the tunnel connect
jamesdaniels Sep 15, 2021
c5afcd7
Suacelabs is a timing thing, can see in logs start early
jamesdaniels Sep 15, 2021
6779db5
Updating the demo widget.html with the new Firebase JS SDK
jamesdaniels Sep 29, 2021
e546ea9
Flush out the webpack demo a bit more
jamesdaniels Sep 29, 2021
125e537
webdriver-manager has broken with the chrome version on github action…
jamesdaniels Sep 29, 2021
9b6f115
String magics
jamesdaniels Sep 29, 2021
0ef38e0
Echo it
jamesdaniels Sep 29, 2021
44fd819
Use the --product-version
jamesdaniels Sep 29, 2021
4f0295a
Version, dropping demo-npm
jamesdaniels Oct 1, 2021
cf5ac8a
revert test change
jamesdaniels Oct 1, 2021
a4cf936
Updating README w/v6/9 references
jamesdaniels Oct 1, 2021
7e7db86
Whooops sauce_connect wasnt spinning up if cache hit, add OSX support
jamesdaniels Oct 1, 2021
ed5aa72
Replace the TODO w/init as add project doesn't expose compat by default
jamesdaniels Oct 1, 2021
6f040d7
Merge master
jamesdaniels Oct 8, 2021
628609b
Bump the Firebase version to include the updateUser fix
jamesdaniels Oct 8, 2021
8336d16
Revert sample-config
jamesdaniels Oct 8, 2021
c0af661
Try adding the flaky test back in
jamesdaniels Oct 8, 2021
cedeb63
Bump versions, undo out of scope changes
jamesdaniels Oct 8, 2021
18947ba
Bump Firebase version in README
jamesdaniels Oct 8, 2021
93d79e3
Revert some changes, bump firebase dep
jamesdaniels Oct 26, 2021
eaafdf1
webdriver-manager use equal on versions.chrome arg
jamesdaniels Oct 26, 2021
66e445d
Merge branch 'master' into vNext-compat
jamesdaniels Oct 26, 2021
f986910
Bump lockfile
jamesdaniels Oct 26, 2021
5d0d0b5
update package-lock.json up-to-date
xil222 Oct 28, 2021
16d65e7
remove firebase init in demoApp(which initialize twice)
xil222 Oct 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
* Now using Firebase v9/compat
80 changes: 42 additions & 38 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,8 @@ You just need to include the following script and CSS file in the `<head>` tag
of your page, below the initialization snippet from the Firebase Console:

```html
<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" />
<script src="https://www.gstatic.com/firebasejs/ui/6.0.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.0/firebase-ui-auth.css" />
```

#### Localized Widget
Expand All @@ -72,17 +72,17 @@ Localized versions of the widget are available through the CDN. To use a
localized widget, load the localized JS library instead of the default library:

```html
<script src="https://www.gstatic.com/firebasejs/ui/5.0.0/firebase-ui-auth__{LANGUAGE_CODE}.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/5.0.0/firebase-ui-auth.css" />
<script src="https://www.gstatic.com/firebasejs/ui/6.0.0/firebase-ui-auth__{LANGUAGE_CODE}.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.0/firebase-ui-auth.css" />
```

where `{LANGUAGE_CODE}` is replaced by the code of the language you want. For example, the French
version of the library is available at
`https://www.gstatic.com/firebasejs/ui/5.0.0/firebase-ui-auth__fr.js`. The list of available
`https://www.gstatic.com/firebasejs/ui/6.0.0/firebase-ui-auth__fr.js`. The list of available
languages and their respective language codes can be found at [LANGUAGES.md](LANGUAGES.md).

Right-to-left languages also require the right-to-left version of the stylesheet, available at
`https://www.gstatic.com/firebasejs/ui/5.0.0/firebase-ui-auth-rtl.css`, instead of the default
`https://www.gstatic.com/firebasejs/ui/6.0.0/firebase-ui-auth-rtl.css`, instead of the default
stylesheet. The supported right-to-left languages are Arabic (ar), Farsi (fa), and Hebrew (iw).

### Option 2: npm Module
Expand All @@ -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:
Expand Down Expand Up @@ -193,14 +182,11 @@ for a more in-depth example, showcasing a Single Page Application mode.
<head>
<meta charset="UTF-8">
<title>Sample FirebaseUI App</title>
<!-- *******************************************************************************************
* TODO(DEVELOPER): Paste the initialization snippet from:
* Firebase Console > Overview > Add Firebase to your web app.
* 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" />
<script src="https://www.gstatic.com/firebasejs/9.1.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.1.0/firebase-auth-compat.js"></script>
<script src="/__/firebase/init.js"></script>
<script src="https://www.gstatic.com/firebasejs/ui/6.0.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.0/firebase-ui-auth.css" />
<script type="text/javascript">
// FirebaseUI config.
var uiConfig = {
Expand Down Expand Up @@ -268,10 +254,9 @@ Here is how you would track the Auth state across all your pages:
<head>
<meta charset="UTF-8">
<title>Sample FirebaseUI App</title>
<!-- *******************************************************************************************
* TODO(DEVELOPER): Paste the initialization snippet from:
* Firebase Console > Overview > Add Firebase to your web app. *
***************************************************************************************** -->
<script src="https://www.gstatic.com/firebasejs/9.1.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.1.0/firebase-auth-compat.js"></script>
<script src="/__/firebase/init.js"></script>
<script type="text/javascript">
initApp = function() {
firebase.auth().onAuthStateChanged(function(user) {
Expand Down Expand Up @@ -1347,12 +1332,11 @@ FirebaseUI is displayed.
<head>
<meta charset="UTF-8">
<title>Sample FirebaseUI App</title>
<!-- *******************************************************************************************
* TODO(DEVELOPER): Paste the initialization snippet from:
* Firebase Console > Overview > Add Firebase to your web app. *
***************************************************************************************** -->
<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" />
<script src="https://www.gstatic.com/firebasejs/9.1.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.1.0/firebase-auth-compat.js"></script>
<script src="/__/firebase/init.js"></script>
<script src="https://www.gstatic.com/firebasejs/ui/6.0.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.0/firebase-ui-auth.css" />
<script type="text/javascript">
// FirebaseUI config.
var uiConfig = {
Expand Down Expand Up @@ -1939,6 +1923,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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it might be better to add an intro under the line below, to let developers understand their when they can choose from using Firebase V8, V9 compat, V9 and what to do along with using FirebaseUI.

FirebaseUI-web v6.0.0 is intended to be used alongside Firebase JS SDK v9 compat.
Something like:
We are migrating FirebaseUI to use Firebase JS SDK v9. There will be two phases of migration, we’re currently at phase 1 for v6.0.0:

  1. Change to Firebase dependency v9 by importing Firebase compat library without changing code.
  2. Change to modularized import which will be a breaking change, this will happen shortly after the GA launch of Firebase JS SDK v9.

For those developers:

  1. For those who want to still use FirebaseUI with Firebase V8, you can keep import unchanged for now
    before the phase 2 migration to Firebase JS SDK v9.
  2. For those who want to use FirebaseUI with Firebase V9, you can follow the migration phases of FirebaseUI
    to change the import(import Firebase compat library when we’re at phase 1, or wait for phase 2 and use import by modules using Firebase v9).

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@xil222 Agree we should be more descriptive but should be cautious about communicating any plans here, IMO. Especially when our roadmap is still up in the air. Either way going compat is a an essential first step.

@bojeil-google thoughts on wording?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I agree with @jamesdaniels (let's not communicate any plans yet). Let's just focus on informing customers that v6.0.0 should be used with firebase version v9 (compat)and higher. We can also explain some of the changes needed when switching from v8 to v9 (such as the difference in how app and auth are imported or included via cdn, etc.) We can also mention the benefit when using firebaseui v6.0.0 with other v9 firebase services, such as firestore (when it comes to modularization). The description below seems to cover most of that.

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.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.1.0/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
Expand Down
4 changes: 2 additions & 2 deletions bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -22,6 +22,6 @@
"out"
],
"dependencies": {
"firebase": "^4.1.2"
"firebase": "^9.0.0"
}
}
Empty file added cut
View file
Open in desktop
Empty file.
4 changes: 3 additions & 1 deletion demo/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@
<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.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.1.0/firebase-auth-compat.js"></script>
<script src="/__/firebase/init.js"></script>
<script src="config.js"></script>
<script src="common.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
Expand Down
2 changes: 1 addition & 1 deletion demo/public/sample-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,4 +24,4 @@ firebase.initializeApp(config);
// Google OAuth Client ID, needed to support One-tap sign-up.
// Set to null if One-tap sign-up is not supported.
var CLIENT_ID =
'YOUR_OAUTH_CLIENT_ID';
'YOUR_OAUTH_CLIENT_ID';
4 changes: 3 additions & 1 deletion demo/public/widget.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@
<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.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.1.0/firebase-auth-compat.js"></script>
<script src="/__/firebase/init.js"></script>
<script src="config.js"></script>
<script src="common.js"></script>
<script src="dist/firebaseui.js"></script>
Expand Down
Loading