Skip to content

Commit

Permalink
[firebase-release] Updated FirebaseUI for Web to 2.0.0:
Browse files Browse the repository at this point in the history
  - 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
  • Loading branch information
Googler authored and bojeil-google committed May 16, 2017
1 parent f6103f6 commit 8fab29f
Show file tree
Hide file tree
Showing 97 changed files with 13,216 additions and 765 deletions.
60 changes: 49 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,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://cdn.firebase.com/libs/firebaseui/1.0.1/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/1.0.1/firebaseui.css" />
<script src="https://cdn.firebase.com/libs/firebaseui/2.0.0/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.0.0/firebaseui.css" />
```

### npm Module
Expand Down Expand Up @@ -92,13 +92,14 @@ the files within `bower_components/`:
FirebaseUI includes the following flows:

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

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

- [Phone number](https://firebase.google.com/docs/auth/web/phone-auth)
- [Email and password](https://firebase.google.com/docs/auth/web/password-auth#before_you_begin)
- [Google](https://firebase.google.com/docs/auth/web/google-signin#before_you_begin)
- [Facebook](https://firebase.google.com/docs/auth/web/facebook-login#before_you_begin)
Expand Down Expand Up @@ -139,8 +141,8 @@ for a more in-depth example, showcasing a Single Page Application mode.
* TODO(DEVELOPER): Paste the initialization snippet from:
* Firebase Console > Overview > Add Firebase to your web app. *
***************************************************************************************** -->
<script src="https://cdn.firebase.com/libs/firebaseui/1.0.1/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/1.0.1/firebaseui.css" />
<script src="https://cdn.firebase.com/libs/firebaseui/2.0.0/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.0.0/firebaseui.css" />
<script type="text/javascript">
// FirebaseUI config.
var uiConfig = {
Expand All @@ -151,7 +153,8 @@ for a more in-depth example, showcasing a Single Page Application mode.
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.TwitterAuthProvider.PROVIDER_ID,
firebase.auth.GithubAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID
firebase.auth.EmailAuthProvider.PROVIDER_ID,
firebase.auth.PhoneAuthProvider.PROVIDER_ID
],
// Terms of service url.
tosUrl: '<your-tos-url>'
Expand Down Expand Up @@ -194,6 +197,7 @@ Here is how you would track the Auth state across all your pages:
var emailVerified = user.emailVerified;
var photoURL = user.photoURL;
var uid = user.uid;
var phoneNumber = user.phoneNumber;
var providerData = user.providerData;
user.getToken().then(function(accessToken) {
document.getElementById('sign-in-status').textContent = 'Signed in';
Expand All @@ -202,6 +206,7 @@ Here is how you would track the Auth state across all your pages:
displayName: displayName,
email: email,
emailVerified: emailVerified,
phoneNumber: phoneNumber,
photoURL: photoURL,
uid: uid,
accessToken: accessToken,
Expand Down Expand Up @@ -355,6 +360,7 @@ specifying the value below.
|Twitter |`firebase.auth.TwitterAuthProvider.PROVIDER_ID` |
|Github |`firebase.auth.GithubAuthProvider.PROVIDER_ID` |
|Email and password|`firebase.auth.EmailAuthProvider.PROVIDER_ID` |
|Phone number |`firebase.auth.PhoneAuthProvider.PROVIDER_ID` |

### Custom scopes

Expand Down Expand Up @@ -400,6 +406,29 @@ ui.start('#firebaseui-auth-container', {
});
```

### Configure Phone Provider

The `PhoneAuthProvider` can be configured with custom reCAPTCHA parameters
whether reCAPTCHA is visible or invisible (defaults to `normal`). Refer to the
[reCAPTCHA API docs](https://developers.google.com/recaptcha/docs/display) for
more details. The following options are currently supported. Any other
parameters will be ignored.

```javascript
ui.start('#firebaseui-auth-container', {
signInOptions = [
{
provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
recaptchaParameters: {
type: 'image', // 'audio'
size: 'normal', // 'invisible' or 'compact'
badge: 'bottomleft' //' bottomright' or 'inline' applies to invisible.
}
}
]
});
```

### Sign In Flows

Two sign in flows are available:
Expand Down Expand Up @@ -453,8 +482,8 @@ FirebaseUI is displayed.
* TODO(DEVELOPER): Paste the initialization snippet from:
* Firebase Console > Overview > Add Firebase to your web app. *
***************************************************************************************** -->
<script src="https://cdn.firebase.com/libs/firebaseui/1.0.1/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/1.0.1/firebaseui.css" />
<script src="https://cdn.firebase.com/libs/firebaseui/2.0.0/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.0.0/firebaseui.css" />
<script type="text/javascript">
// FirebaseUI config.
var uiConfig = {
Expand Down Expand Up @@ -488,6 +517,15 @@ FirebaseUI is displayed.
provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
// Whether the display name should be displayed in the Sign Up page.
requireDisplayName: true
},
{
provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
// Invisible reCAPTCHA with image challenge and bottom left badge.
recaptchaParameters: {
type: 'image',
size: 'invisible',
badge: 'bottomleft'
}
}
],
// Terms of service url.
Expand Down
4 changes: 2 additions & 2 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "firebaseui",
"version": "1.0.1",
"version": "2.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": "^3.3.0"
"firebase": "^4.0.0"
}
}
17 changes: 17 additions & 0 deletions buildtools/country_data/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# Country data generator for FirebaseUI

This generates the list of countries used for the phone number input, including
country names, calling codes, and flags.

## Usage
```
$ npm install
$ npm run build
```

This will output the generated files to ./generated. It generates the files:
- country_data.js - A JS object of country data. This should be copied into
firebaseui.auth.data.country.COUNTRY_LIST in javascript/data/country.js.
- sprite.png - The sprite of country flags.
- sprite@2x.png - The sprite of country flags, hi-res.
- flags.css - The CSS that maps countries to the positions in the sprite.
45 changes: 45 additions & 0 deletions buildtools/country_data/compress_pngs.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
#!/usr/bin/env node
/*
* Copyright 2016 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
* in compliance with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under the
* License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
* express or implied. See the License for the specific language governing permissions and
* limitations under the License.
*/

/*
* Compresses all PNGs in a given directory using optipng. Optipng reduces
* the file size of PNGs losslessly.
*
* Usage:
* It is recommended to just run generate_country_data.sh. However, you can run
* this on its own with:
* $ ./compress_pngs.js ./source_images_dir ./output_images_dir
*/

var fs = require('fs');
var getDirectoryArgs = require('./get_directory_args.js');
var imagemin = require('imagemin');
var imageminOptipng = require('imagemin-optipng');
var path = require('path');

var dirs = getDirectoryArgs();

var files = fs.readdirSync(dirs.from)
.filter(function(file) {
return file.endsWith('.png');
})
.map(function(file) {
return path.join(dirs.from, file);
});
imagemin(files, dirs.to, {
use: [
imageminOptipng()
]
});
20 changes: 20 additions & 0 deletions buildtools/country_data/css.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
/*
* Copyright 2016 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
* in compliance with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under the
* License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
* express or implied. See the License for the specific language governing permissions and
* limitations under the License.
*/
{{#each layouts}}
{{#each layout.items}}
.firebaseui-flag-{{meta.name}} {
background-position: -{{baseDim x}}px -{{baseDim y}}px;
}
{{/each}}
{{/each}}
87 changes: 87 additions & 0 deletions buildtools/country_data/filter_country_data.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
#!/usr/bin/env node
/*
* Copyright 2016 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
* in compliance with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under the
* License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
* express or implied. See the License for the specific language governing permissions and
* limitations under the License.
*/

/*
* Filters the data in full_country_data to save space in the FirebaseUI binary
* and support i18n. This reads from full_country_data.json and outputs to
* stdout. The output format is JS that should be inlined in
* javascript/data/country.js.
*
* Usage:
* It is recommended to just run generate_country_data.sh. However, you can run
* this on its own with:
* $ ./filter_country_data.js
*
* Then, take the output and put it between the START COPIED CODE and END
* COPIED CODE markers in javascript/data/country.js.
*/

var fullCountryData = require('./full_country_data.json');

// The properties of each country we want to keep.
var KEYS_TO_KEEP = ['name', 'e164_key', 'e164_cc', 'iso2_cc'];

/**
* Gets the name of the MSG_* variable that has the translatable country name.
* @param {!Object} countryData
* @return {string}
*/
function getCountryNameVariable(countryData) {
var key = countryData.e164_key.toUpperCase().replace(/-/g, '_');
return 'MSG_' + key;
}

// Make a copy of the country data that we can mutate it.
var outputCountryData = JSON.parse(JSON.stringify(fullCountryData));

// Make translatable strings of country names. They must be declared as a
// variable with the prefix MSG_, be uniquely named, and should have a
// JSDoc "@desc" entry.
var translatableMsgs = fullCountryData.map(function(countryData) {
// Escape single quotes.
var name = countryData.name.replace(/'/g, '\\\'');
var key = getCountryNameVariable(countryData);
return '/** @desc The name of the country/territory "' + name + '". */\n' +
'var ' + key + ' = goog.getMsg(\'' + name + '\');';
}).join('\n');
console.log(translatableMsgs);

// Make the JSON object reference the translatable messages.
// This is kind of hacky since we set the the value to a string containing the
// variable name, and then unquote the string below.
outputCountryData = outputCountryData.map(function(countryData) {
countryData.name = getCountryNameVariable(countryData);
return countryData;
});

// Stringify and filter out keys we don't want to keep.
var outputJs = JSON.stringify(outputCountryData, KEYS_TO_KEEP, 2);

// Unquote the MSG_ variable references.
outputJs = outputJs.replace(/"(MSG_.+)"/g, '$1');

// Unquote the field keys, so they can be obfuscated in the binary.
KEYS_TO_KEEP.forEach(function(key) {
outputJs = outputJs.replace(new RegExp('"' + key + '"', 'g'), key);
});

// Change double quotes to single quotes; Closure prefers single quoted strings.
outputJs = outputJs.replace(/"/g, '\'');

// Make this a variable declaration.
outputJs = '/**\n * @type {!Array<!firebaseui.auth.data.country.Country>}\n' +
' */\nfirebaseui.auth.data.country.COUNTRY_LIST = ' + outputJs + ';';

console.log(outputJs);
Loading

0 comments on commit 8fab29f

Please sign in to comment.