Skip to content

Commit 30fb017

Browse files
Googlerbojeil-google
Googler
authored and
bojeil-google
committed
[firebase-release] Updated FirebaseUI for Web to 2.1.0:
 - Added support for OAuth providers in a Cordova environment. - Added support for passing custom OAuth parameters to OAuth providers. - Added phone code resending countdown to phone code entry page. - Added terms of service for phone sign-in pages. - Ability to auto populate the country code from the national number. - Added support for selecting the default country for phone authentication. - Fixed NASCAR screen to skip when only phone provider is enabled and render phone sign in screen directly. Change-Id: Ie634cec24c209c568355073831528e3d73b3338f
1 parent d5e4288 commit 30fb017

Some content is hidden

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

64 files changed

+2794
-853
lines changed

‎README.md‎

Lines changed: 80 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,10 @@ FirebaseUI Auth clients are also available for
2121
[Android](https://github.com/firebase/firebaseui-android).
2222

2323
FirebaseUI fully supports all recent browsers. Signing in with federated
24-
providers (Google, Facebook, Twitter, Github) is not yet supported in
25-
non-browser environments (Cordova, React Native, Ionic...) nor Chrome
26-
extensions.
24+
providers (Google, Facebook, Twitter, Github) is also supported in
25+
Cordova/Ionic environments. Additional non-browser environments (React
26+
Native...) or Chrome extensions will be added once the underlying Firebase core
27+
SDK supports them in a way that is compatible with FirebaseUI.
2728

2829
## Table of Contents
2930

@@ -34,8 +35,9 @@ extensions.
3435
5. [Customization](#customizing-firebaseui-for-authentication)
3536
6. [Advanced](#advanced)
3637
7. [Developer Setup](#developer-setup)
37-
8. [Known issues](#known-issues)
38-
9. [Release Notes](#release-notes)
38+
8. [Cordova Setup](#cordova-setup)
39+
9. [Known issues](#known-issues)
40+
10. [Release Notes](#release-notes)
3941

4042
## Demo
4143

@@ -50,8 +52,8 @@ You just need to include the following script and CSS file in the `<head>` tag
5052
of your page, below the initialization snippet from the Firebase Console:
5153

5254
```html
53-
<script src="https://cdn.firebase.com/libs/firebaseui/2.0.0/firebaseui.js"></script>
54-
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.0.0/firebaseui.css" />
55+
<script src="https://cdn.firebase.com/libs/firebaseui/2.1.0/firebaseui.js"></script>
56+
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.1.0/firebaseui.css" />
5557
```
5658

5759
### Option 2: npm Module
@@ -147,8 +149,8 @@ for a more in-depth example, showcasing a Single Page Application mode.
147149
* TODO(DEVELOPER): Paste the initialization snippet from:
148150
* Firebase Console > Overview > Add Firebase to your web app. *
149151
***************************************************************************************** -->
150-
<script src="https://cdn.firebase.com/libs/firebaseui/2.0.0/firebaseui.js"></script>
151-
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.0.0/firebaseui.css" />
152+
<script src="https://cdn.firebase.com/libs/firebaseui/2.1.0/firebaseui.js"></script>
153+
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.1.0/firebaseui.css" />
152154
<script type="text/javascript">
153155
// FirebaseUI config.
154156
var uiConfig = {
@@ -350,7 +352,8 @@ usernames they have saved from your app or other applications. To achieve this,
350352
available. Upon signing in or signing up with email, the user will be redirected
351353
to the accountchooser.com website and will be able to select one of their saved
352354
accounts. It is recommended to use this, but you can also disable it by
353-
specifying the value below.
355+
specifying the value below. This feature is always disabled for non HTTP/HTTPS
356+
environments.
354357

355358
|Credential Helper |Value |
356359
|------------------|------------------------------------------------------|
@@ -368,10 +371,10 @@ specifying the value below.
368371
|Email and password|`firebase.auth.EmailAuthProvider.PROVIDER_ID` |
369372
|Phone number |`firebase.auth.PhoneAuthProvider.PROVIDER_ID` |
370373

371-
### Custom scopes
374+
### Configure OAuth providers
372375

373-
To specify custom scopes per provider, you can pass an object instead of just
374-
the provider value:
376+
To specify custom scopes, or custom OAuth parameters per provider, you can pass
377+
an object instead of just the provider value:
375378

376379
```javascript
377380
ui.start('#firebaseui-auth-container', {
@@ -380,7 +383,12 @@ ui.start('#firebaseui-auth-container', {
380383
provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
381384
scopes: [
382385
'https://www.googleapis.com/auth/plus.login'
383-
]
386+
],
387+
customParameters: {
388+
// Forces account selection even when one account
389+
// is available.
390+
prompt: 'select_account'
391+
}
384392
},
385393
{
386394
provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID,
@@ -389,7 +397,11 @@ ui.start('#firebaseui-auth-container', {
389397
'email',
390398
'user_likes',
391399
'user_friends'
392-
]
400+
],
401+
customParameters: {
402+
// Forces password re-entry.
403+
auth_type: 'reauthenticate'
404+
}
393405
},
394406
firebase.auth.TwitterAuthProvider.PROVIDER_ID, // Twitter does not support scopes.
395407
firebase.auth.EmailAuthProvider.PROVIDER_ID // Other providers don't need to be given as object.
@@ -417,7 +429,13 @@ ui.start('#firebaseui-auth-container', {
417429
The `PhoneAuthProvider` can be configured with custom reCAPTCHA parameters
418430
whether reCAPTCHA is visible or invisible (defaults to `normal`). Refer to the
419431
[reCAPTCHA API docs](https://developers.google.com/recaptcha/docs/display) for
420-
more details. The following options are currently supported. Any other
432+
more details.
433+
434+
The default country to select in the phone number input can also be set.
435+
[List of supported country codes](javascript/data/README.md). If unspecified,
436+
the phone number input will default to the United States (+1).
437+
438+
The following options are currently supported. Any other
421439
parameters will be ignored.
422440

423441
```javascript
@@ -429,7 +447,8 @@ ui.start('#firebaseui-auth-container', {
429447
type: 'image', // 'audio'
430448
size: 'normal', // 'invisible' or 'compact'
431449
badge: 'bottomleft' //' bottomright' or 'inline' applies to invisible.
432-
}
450+
},
451+
defaultCountry: 'GB' // Set default country to the United Kingdom (+44).
433452
}
434453
]
435454
});
@@ -488,8 +507,8 @@ FirebaseUI is displayed.
488507
* TODO(DEVELOPER): Paste the initialization snippet from:
489508
* Firebase Console > Overview > Add Firebase to your web app. *
490509
***************************************************************************************** -->
491-
<script src="https://cdn.firebase.com/libs/firebaseui/2.0.0/firebaseui.js"></script>
492-
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.0.0/firebaseui.css" />
510+
<script src="https://cdn.firebase.com/libs/firebaseui/2.1.0/firebaseui.js"></script>
511+
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.1.0/firebaseui.css" />
493512
<script type="text/javascript">
494513
// FirebaseUI config.
495514
var uiConfig = {
@@ -694,6 +713,47 @@ the other terminal that has the exported variables, run the tests:
694713
npm test -- --saucelabs --tunnelIdentifier=<the tunnel identifier>
695714
```
696715

716+
## Cordova Setup
717+
718+
### Introduction
719+
720+
FirebaseUI sign-in widget supports Cordova applications. This includes
721+
email/password and all OAuth providers (Google, Facebook, Twitter and GitHub).
722+
Phone authentication is not supported due to the limitation in the underlying
723+
Firebase core SDK.
724+
725+
### Available providers
726+
727+
|Provider |Value |
728+
|------------------|------------------------------------------------|
729+
|Google |`firebase.auth.GoogleAuthProvider.PROVIDER_ID` |
730+
|Facebook |`firebase.auth.FacebookAuthProvider.PROVIDER_ID`|
731+
|Twitter |`firebase.auth.TwitterAuthProvider.PROVIDER_ID` |
732+
|Github |`firebase.auth.GithubAuthProvider.PROVIDER_ID` |
733+
|Email and password|`firebase.auth.EmailAuthProvider.PROVIDER_ID` |
734+
735+
### Setup and Usage
736+
737+
In order to integrate FirebaseUI with your Cordova application, you need to
738+
follow these steps:
739+
740+
- Install the necessary Cordova plugins, make the necessary Firebase Console
741+
changes and update your config.xml file as documented in
742+
[OAuth Sign-In for Cordova](https://firebase.google.com/docs/auth/web/cordova)
743+
- After you have successfully configured your application, you can use
744+
FirebaseUI in your Cordova application just like any other traditional browser
745+
applications.
746+
747+
Keep in mind the following while you set up the app:
748+
- Only `redirect` `signInFlow` is supported as Firebase Auth does not support
749+
`popup` mode for Cordova.
750+
- `firebase.auth.PhoneAuthProvider.PROVIDER_ID` is not currently supported.
751+
- As the application runs within an embedded webview, `accountchooser.com` will
752+
always be disabled.
753+
- If you are providing a `Content-Security-Policy` make sure you add the
754+
appropriate exceptions for FirebaseUI resources (`style-src`, `media-src`,
755+
`img-src`, `script-src`, etc.) and underlying Firebase JS SDK.
756+
697757
## Known issues
698758

699759
### Firebase Auth does not work in Safari private browsing
@@ -742,7 +802,7 @@ method of a React component), call the `reset` method of the
742802
before rendering again the widget if one has already been rendered on the page.
743803
Please refer to the [demo app](demo/) for guidance on how to use FirebaseUI in a
744804
Single Page Application context.
745-
- **Custom scopes** can now be added for each provider. See [Custom Scopes](custom-scopes).
805+
- **Custom scopes** can now be added for each provider. See [Configure OAuth providers](configure-oauth-providers).
746806
- Several issues, different but related to the `displayName` not being present
747807
after sign up with email and password, have been fixed.
748808
- A new config parameter has been added: `signInFlow`. It allows to specify

‎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": "2.0.0",
3+
"version": "2.1.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": "^4.0.0"
25+
"firebase": "^4.1.2"
2626
}
2727
}

‎changelog.txt‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
feature - Added support for OAuth providers in a Cordova environment.
2+
feature - Added support for passing custom OAuth parameters to OAuth providers.
3+
feature - Added phone code resending countdown to phone code entry page.
4+
feature - Added terms of service for phone sign-in pages.
5+
feature - Ability to auto populate the country code from the national number.
6+
feature - Added support for selecting the default country for phone authentication.
7+
fixed - Skip NASCAR screen when only phone provider is enabled and render phone sign in screen directly.

‎demo/README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ in the `config.js` file.
4747

4848
## Deploy
4949

50-
### Option 1: Compile and use local FirebaseUI files
50+
### Option 1: Compile and use local FirebaseUI files
5151

5252
To deploy the demo app, run the following command in the root directory of FirebaseUI (use `cd ..`
5353
first if you are still in the `demo/` folder):
@@ -61,7 +61,7 @@ This will compile all the files needed to run FirebaseUI, and start a Firebase s
6161

6262
### Option 2: Use CDN hosted FirebaseUI files
6363

64-
If you would prefer to use a CDN instead of locally compiled FirebaseUI files, you can instead
64+
If you would prefer to use a CDN instead of locally compiled FirebaseUI files, you can instead
6565
locate the following in the `<head>` tag of `public/index.html` and `public/widget.html`:
6666

6767
```html
@@ -73,7 +73,7 @@ Then replace that with the snippet provided in the CDN installation section foun
7373
[https://github.com/firebase/firebaseui-web/blob/master/README.md](https://github.com/firebase/firebaseui-web/blob/master/README.md).
7474

7575
Finally, ensure you are in the `demo/` folder (and not the root directory of FirebaseUI), and run:
76-
```bash
76+
```bash
7777
firebase serve
7878
```
7979

‎demo/public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>FirebaseUI Auth Demo</title>
6-
<script src="https://www.gstatic.com/firebasejs/live/4.0/firebase.js"></script>
6+
<script src="https://www.gstatic.com/firebasejs/live/4.1/firebase.js"></script>
77
<script src="config.js"></script>
88
<script src="common.js"></script>
99
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

‎demo/public/widget.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>FirebaseUI Auth Demo</title>
6-
<script src="https://www.gstatic.com/firebasejs/live/4.0/firebase.js"></script>
6+
<script src="https://www.gstatic.com/firebasejs/live/4.1/firebase.js"></script>
77
<script src="config.js"></script>
88
<script src="common.js"></script>
99
<script src="dist/firebaseui.js"></script>

0 commit comments

Comments
 (0)