Skip to content

Commit 8fab29f

Browse files
Googlerbojeil-google
Googler
authored and
bojeil-google
committed
[firebase-release] Updated FirebaseUI for Web to 2.0.0:
 - Added support for phone authentication. - Removed all FirebaseUI underlying dependencies on deprecated and removed APIs in Firebase version 4.0.0. FirebaseUI no longer supports versions older than 4.0.0. - Fixes DOMException when cross origin reassigning window.location on sign-in success. - Fixes the issue where query strings and fragments were getting dropped on accountchooser.com redirects. Change-Id: I329ca4e50af0f84ef972a6c0bd3e01d8cf79c5ee
1 parent f6103f6 commit 8fab29f

File tree

97 files changed

+13216
-765
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

97 files changed

+13216
-765
lines changed

‎README.md

Lines changed: 49 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@ You just need to include the following script and CSS file in the `<head>` tag
4444
of your page, below the initialization snippet from the Firebase Console:
4545

4646
```html
47-
<script src="https://cdn.firebase.com/libs/firebaseui/1.0.1/firebaseui.js"></script>
48-
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/1.0.1/firebaseui.css" />
47+
<script src="https://cdn.firebase.com/libs/firebaseui/2.0.0/firebaseui.js"></script>
48+
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.0.0/firebaseui.css" />
4949
```
5050

5151
### npm Module
@@ -92,13 +92,14 @@ the files within `bower_components/`:
9292
FirebaseUI includes the following flows:
9393

9494
1. Interaction with Identity Providers such as Google and Facebook
95-
2. Sign-up and sign-in with email accounts
96-
3. Password reset
97-
4. Prevention of account duplication (activated when
95+
2. Phone number based authentication
96+
3. Sign-up and sign-in with email accounts
97+
4. Password reset
98+
5. Prevention of account duplication (activated when
9899
*"One account per email address"* setting is enabled in the
99100
[Firebase console](https://console.firebase.google.com). This setting is enabled
100101
by default.)
101-
5. [Account Chooser](https://www.accountchooser.com/learnmore.html?lang=en) for
102+
6. [Account Chooser](https://www.accountchooser.com/learnmore.html?lang=en) for
102103
remembering emails
103104

104105
### Configuring sign-in providers
@@ -107,6 +108,7 @@ To use FirebaseUI to authenticate users you first need to configure each
107108
provider you want to use in their own developer app settings. Please read the
108109
*Before you begin* section of Firebase Authentication at the following links:
109110

111+
- [Phone number](https://firebase.google.com/docs/auth/web/phone-auth)
110112
- [Email and password](https://firebase.google.com/docs/auth/web/password-auth#before_you_begin)
111113
- [Google](https://firebase.google.com/docs/auth/web/google-signin#before_you_begin)
112114
- [Facebook](https://firebase.google.com/docs/auth/web/facebook-login#before_you_begin)
@@ -139,8 +141,8 @@ for a more in-depth example, showcasing a Single Page Application mode.
139141
* TODO(DEVELOPER): Paste the initialization snippet from:
140142
* Firebase Console > Overview > Add Firebase to your web app. *
141143
***************************************************************************************** -->
142-
<script src="https://cdn.firebase.com/libs/firebaseui/1.0.1/firebaseui.js"></script>
143-
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/1.0.1/firebaseui.css" />
144+
<script src="https://cdn.firebase.com/libs/firebaseui/2.0.0/firebaseui.js"></script>
145+
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.0.0/firebaseui.css" />
144146
<script type="text/javascript">
145147
// FirebaseUI config.
146148
var uiConfig = {
@@ -151,7 +153,8 @@ for a more in-depth example, showcasing a Single Page Application mode.
151153
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
152154
firebase.auth.TwitterAuthProvider.PROVIDER_ID,
153155
firebase.auth.GithubAuthProvider.PROVIDER_ID,
154-
firebase.auth.EmailAuthProvider.PROVIDER_ID
156+
firebase.auth.EmailAuthProvider.PROVIDER_ID,
157+
firebase.auth.PhoneAuthProvider.PROVIDER_ID
155158
],
156159
// Terms of service url.
157160
tosUrl: '<your-tos-url>'
@@ -194,6 +197,7 @@ Here is how you would track the Auth state across all your pages:
194197
var emailVerified = user.emailVerified;
195198
var photoURL = user.photoURL;
196199
var uid = user.uid;
200+
var phoneNumber = user.phoneNumber;
197201
var providerData = user.providerData;
198202
user.getToken().then(function(accessToken) {
199203
document.getElementById('sign-in-status').textContent = 'Signed in';
@@ -202,6 +206,7 @@ Here is how you would track the Auth state across all your pages:
202206
displayName: displayName,
203207
email: email,
204208
emailVerified: emailVerified,
209+
phoneNumber: phoneNumber,
205210
photoURL: photoURL,
206211
uid: uid,
207212
accessToken: accessToken,
@@ -355,6 +360,7 @@ specifying the value below.
355360
|Twitter |`firebase.auth.TwitterAuthProvider.PROVIDER_ID` |
356361
|Github |`firebase.auth.GithubAuthProvider.PROVIDER_ID` |
357362
|Email and password|`firebase.auth.EmailAuthProvider.PROVIDER_ID` |
363+
|Phone number |`firebase.auth.PhoneAuthProvider.PROVIDER_ID` |
358364

359365
### Custom scopes
360366

@@ -400,6 +406,29 @@ ui.start('#firebaseui-auth-container', {
400406
});
401407
```
402408

409+
### Configure Phone Provider
410+
411+
The `PhoneAuthProvider` can be configured with custom reCAPTCHA parameters
412+
whether reCAPTCHA is visible or invisible (defaults to `normal`). Refer to the
413+
[reCAPTCHA API docs](https://developers.google.com/recaptcha/docs/display) for
414+
more details. The following options are currently supported. Any other
415+
parameters will be ignored.
416+
417+
```javascript
418+
ui.start('#firebaseui-auth-container', {
419+
signInOptions = [
420+
{
421+
provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
422+
recaptchaParameters: {
423+
type: 'image', // 'audio'
424+
size: 'normal', // 'invisible' or 'compact'
425+
badge: 'bottomleft' //' bottomright' or 'inline' applies to invisible.
426+
}
427+
}
428+
]
429+
});
430+
```
431+
403432
### Sign In Flows
404433

405434
Two sign in flows are available:
@@ -453,8 +482,8 @@ FirebaseUI is displayed.
453482
* TODO(DEVELOPER): Paste the initialization snippet from:
454483
* Firebase Console > Overview > Add Firebase to your web app. *
455484
***************************************************************************************** -->
456-
<script src="https://cdn.firebase.com/libs/firebaseui/1.0.1/firebaseui.js"></script>
457-
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/1.0.1/firebaseui.css" />
485+
<script src="https://cdn.firebase.com/libs/firebaseui/2.0.0/firebaseui.js"></script>
486+
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.0.0/firebaseui.css" />
458487
<script type="text/javascript">
459488
// FirebaseUI config.
460489
var uiConfig = {
@@ -488,6 +517,15 @@ FirebaseUI is displayed.
488517
provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
489518
// Whether the display name should be displayed in the Sign Up page.
490519
requireDisplayName: true
520+
},
521+
{
522+
provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
523+
// Invisible reCAPTCHA with image challenge and bottom left badge.
524+
recaptchaParameters: {
525+
type: 'image',
526+
size: 'invisible',
527+
badge: 'bottomleft'
528+
}
491529
}
492530
],
493531
// Terms of service url.

‎bower.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "firebaseui",
3-
"version": "1.0.1",
3+
"version": "2.0.0",
44
"description": "Javascript library for customizable UI on top of Firebase SDK",
55
"main": [
66
"./dist/firebaseui.js",
@@ -22,6 +22,6 @@
2222
"out"
2323
],
2424
"dependencies": {
25-
"firebase": "^3.3.0"
25+
"firebase": "^4.0.0"
2626
}
2727
}

‎buildtools/country_data/README.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Country data generator for FirebaseUI
2+
3+
This generates the list of countries used for the phone number input, including
4+
country names, calling codes, and flags.
5+
6+
## Usage
7+
```
8+
$ npm install
9+
$ npm run build
10+
```
11+
12+
This will output the generated files to ./generated. It generates the files:
13+
- country_data.js - A JS object of country data. This should be copied into
14+
firebaseui.auth.data.country.COUNTRY_LIST in javascript/data/country.js.
15+
- sprite.png - The sprite of country flags.
16+
- [email protected] - The sprite of country flags, hi-res.
17+
- flags.css - The CSS that maps countries to the positions in the sprite.

‎buildtools/country_data/compress_pngs.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
#!/usr/bin/env node
2+
/*
3+
* Copyright 2016 Google Inc. All Rights Reserved.
4+
*
5+
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
6+
* in compliance with the License. You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software distributed under the
11+
* License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
12+
* express or implied. See the License for the specific language governing permissions and
13+
* limitations under the License.
14+
*/
15+
16+
/*
17+
* Compresses all PNGs in a given directory using optipng. Optipng reduces
18+
* the file size of PNGs losslessly.
19+
*
20+
* Usage:
21+
* It is recommended to just run generate_country_data.sh. However, you can run
22+
* this on its own with:
23+
* $ ./compress_pngs.js ./source_images_dir ./output_images_dir
24+
*/
25+
26+
var fs = require('fs');
27+
var getDirectoryArgs = require('./get_directory_args.js');
28+
var imagemin = require('imagemin');
29+
var imageminOptipng = require('imagemin-optipng');
30+
var path = require('path');
31+
32+
var dirs = getDirectoryArgs();
33+
34+
var files = fs.readdirSync(dirs.from)
35+
.filter(function(file) {
36+
return file.endsWith('.png');
37+
})
38+
.map(function(file) {
39+
return path.join(dirs.from, file);
40+
});
41+
imagemin(files, dirs.to, {
42+
use: [
43+
imageminOptipng()
44+
]
45+
});

‎buildtools/country_data/css.hbs

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/*
2+
* Copyright 2016 Google Inc. All Rights Reserved.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
5+
* in compliance with the License. You may obtain a copy of the License at
6+
*
7+
* http://www.apache.org/licenses/LICENSE-2.0
8+
*
9+
* Unless required by applicable law or agreed to in writing, software distributed under the
10+
* License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
11+
* express or implied. See the License for the specific language governing permissions and
12+
* limitations under the License.
13+
*/
14+
{{#each layouts}}
15+
{{#each layout.items}}
16+
.firebaseui-flag-{{meta.name}} {
17+
background-position: -{{baseDim x}}px -{{baseDim y}}px;
18+
}
19+
{{/each}}
20+
{{/each}}

‎buildtools/country_data/filter_country_data.js

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
#!/usr/bin/env node
2+
/*
3+
* Copyright 2016 Google Inc. All Rights Reserved.
4+
*
5+
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
6+
* in compliance with the License. You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software distributed under the
11+
* License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
12+
* express or implied. See the License for the specific language governing permissions and
13+
* limitations under the License.
14+
*/
15+
16+
/*
17+
* Filters the data in full_country_data to save space in the FirebaseUI binary
18+
* and support i18n. This reads from full_country_data.json and outputs to
19+
* stdout. The output format is JS that should be inlined in
20+
* javascript/data/country.js.
21+
*
22+
* Usage:
23+
* It is recommended to just run generate_country_data.sh. However, you can run
24+
* this on its own with:
25+
* $ ./filter_country_data.js
26+
*
27+
* Then, take the output and put it between the START COPIED CODE and END
28+
* COPIED CODE markers in javascript/data/country.js.
29+
*/
30+
31+
var fullCountryData = require('./full_country_data.json');
32+
33+
// The properties of each country we want to keep.
34+
var KEYS_TO_KEEP = ['name', 'e164_key', 'e164_cc', 'iso2_cc'];
35+
36+
/**
37+
* Gets the name of the MSG_* variable that has the translatable country name.
38+
* @param {!Object} countryData
39+
* @return {string}
40+
*/
41+
function getCountryNameVariable(countryData) {
42+
var key = countryData.e164_key.toUpperCase().replace(/-/g, '_');
43+
return 'MSG_' + key;
44+
}
45+
46+
// Make a copy of the country data that we can mutate it.
47+
var outputCountryData = JSON.parse(JSON.stringify(fullCountryData));
48+
49+
// Make translatable strings of country names. They must be declared as a
50+
// variable with the prefix MSG_, be uniquely named, and should have a
51+
// JSDoc "@desc" entry.
52+
var translatableMsgs = fullCountryData.map(function(countryData) {
53+
// Escape single quotes.
54+
var name = countryData.name.replace(/'/g, '\\\'');
55+
var key = getCountryNameVariable(countryData);
56+
return '/** @desc The name of the country/territory "' + name + '". */\n' +
57+
'var ' + key + ' = goog.getMsg(\'' + name + '\');';
58+
}).join('\n');
59+
console.log(translatableMsgs);
60+
61+
// Make the JSON object reference the translatable messages.
62+
// This is kind of hacky since we set the the value to a string containing the
63+
// variable name, and then unquote the string below.
64+
outputCountryData = outputCountryData.map(function(countryData) {
65+
countryData.name = getCountryNameVariable(countryData);
66+
return countryData;
67+
});
68+
69+
// Stringify and filter out keys we don't want to keep.
70+
var outputJs = JSON.stringify(outputCountryData, KEYS_TO_KEEP, 2);
71+
72+
// Unquote the MSG_ variable references.
73+
outputJs = outputJs.replace(/"(MSG_.+)"/g, '$1');
74+
75+
// Unquote the field keys, so they can be obfuscated in the binary.
76+
KEYS_TO_KEEP.forEach(function(key) {
77+
outputJs = outputJs.replace(new RegExp('"' + key + '"', 'g'), key);
78+
});
79+
80+
// Change double quotes to single quotes; Closure prefers single quoted strings.
81+
outputJs = outputJs.replace(/"/g, '\'');
82+
83+
// Make this a variable declaration.
84+
outputJs = '/**\n * @type {!Array<!firebaseui.auth.data.country.Country>}\n' +
85+
' */\nfirebaseui.auth.data.country.COUNTRY_LIST = ' + outputJs + ';';
86+
87+
console.log(outputJs);

0 commit comments

Comments
 (0)