Skip to content

Commit bc42a21

Browse files
One tap migration (firebase#714)
* Migrates to new one-tap sign-up API Legacy one-tap API is being shutdown on 6/30/2020. Migrates to new one-tap sign-up API: https://developers.google.com/identity/one-tap/web/ All existing functionality is maintained. * Adds missing config_test.js * Disabled Microsoft Edge browser due to instability. * Update CHANGELOG for upcoming release.
1 parent 7404a41 commit bc42a21

18 files changed

+399
-634
lines changed

.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ node_modules/
55
generated/
66
out/
77
dist/
8+
.firebase
89

910
# Generated files.
1011
*.log

CHANGELOG.md

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
* Migrated to new one-tap sign-up API.
2+
* Fixed issue when existing email link user tries to sign in when only email/password sign-in method is provided.

README.md

+66-2
Original file line numberDiff line numberDiff line change
@@ -141,8 +141,10 @@ FirebaseUI includes the following flows:
141141
by default.)
142142
6. [Account Chooser](https://www.accountchooser.com/learnmore.html?lang=en) for
143143
remembering emails
144-
7. Ability to upgrade anonymous users through sign-in/sign-up
145-
8. Sign-in as a guest
144+
7. Integration with
145+
[one-tap sign-up](https://developers.google.com/identity/one-tap/web/)
146+
8. Ability to upgrade anonymous users through sign-in/sign-up.
147+
9. Sign-in as a guest
146148

147149
### Configuring sign-in providers
148150

@@ -452,6 +454,7 @@ When one is enabled, your users will be prompted with email addresses and
452454
usernames they have saved from your app or other applications.
453455
FirebaseUI supports the following credential helpers:
454456

457+
- [one-tap sign-up](https://developers.google.com/identity/one-tap/web/)
455458
- [accountchooser.com](https://www.accountchooser.com/learnmore.html)
456459

457460
#### accountchooser.com
@@ -463,9 +466,70 @@ website and will be able to select one of their saved accounts. You can
463466
disable it by specifying the value below. This feature is always disabled for
464467
non HTTP/HTTPS environments.
465468

469+
#### One-tap sign-up
470+
471+
[One-tap sign-up](https://developers.google.com/identity/one-tap/web/)
472+
provides seamless authentication flows to
473+
your users with Google's one tap sign-up and automatic sign-in APIs.
474+
With one tap sign-up, users are prompted to create an account with a dialog
475+
that's inline with FirebaseUI NASCAR screen. With just one tap, they get a
476+
secure, token-based, passwordless account with your service, protected by their
477+
Google Account. As the process is frictionless, users are much more likely to
478+
register.
479+
Returning users are signed in automatically, even when they switch devices or
480+
platforms, or after their session expires.
481+
One-tap sign-up integrates with FirebaseUI and if you request Google OAuth
482+
scopes, you will still get back the expected Google OAuth access token even if
483+
the user goes through the one-tap flow. However, in that case 'redirect' flow is
484+
always used even when 'popup' is specified.
485+
In addition, if you choose to force prompt for Google sign-in, one-tap auto
486+
sign-in will be automatically disabled.
487+
One-tap is an additive feature and is only supported in the latest evergreen
488+
modern browser environments.
489+
For more information on how to configure one-tap sign-up, refer to the
490+
[one-tap get started guide](https://developers.google.com/identity/one-tap/web/guides/get-google-api-clientid).
491+
492+
The following example shows how to configure one-tap sign-up with FirebaseUI.
493+
Along with the corresponding one-tap `credentialHelper`, the Google OAuth
494+
`clientId` has to be provided with the Firebase Google provider:
495+
496+
```javascript
497+
ui.start('#firebaseui-auth-container', {
498+
signInOptions: [
499+
{
500+
// Google provider must be enabled in Firebase Console to support one-tap
501+
// sign-up.
502+
provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
503+
// Required to enable ID token credentials for this provider.
504+
// This can be obtained from the Credentials page of the Google APIs
505+
// console. Use the same OAuth client ID used for the Google provider
506+
// configured with GCIP or Firebase Auth.
507+
clientId: 'xxxxxxxxxxxxxxxxx.apps.googleusercontent.com'
508+
},
509+
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
510+
firebase.auth.TwitterAuthProvider.PROVIDER_ID,
511+
firebase.auth.GithubAuthProvider.PROVIDER_ID,
512+
firebase.auth.EmailAuthProvider.PROVIDER_ID,
513+
],
514+
// Required to enable one-tap sign-up credential helper.
515+
credentialHelper: firebaseui.auth.CredentialHelper.GOOGLE_YOLO
516+
});
517+
// Auto sign-in for returning users is enabled by default except when prompt is
518+
// not 'none' in the Google provider custom parameters. To manually disable:
519+
ui.disableAutoSignIn();
520+
```
521+
522+
Auto sign-in for returning users can be disabled by calling
523+
`ui.disableAutoSignIn()`. This may be needed if the FirebaseUI sign-in page is
524+
being rendered after the user signs out.
525+
526+
To see FirebaseUI in action with one-tap sign-up, check out the FirebaseUI
527+
[demo app](https://fir-ui-demo-84a6c.firebaseapp.com/).
528+
466529
|Credential Helper |Value |
467530
|------------------|------------------------------------------------------|
468531
|accountchooser.com|`firebaseui.auth.CredentialHelper.ACCOUNT_CHOOSER_COM`|
532+
|One-tap sign-up |`firebaseui.auth.CredentialHelper.GOOGLE_YOLO` |
469533
|None (disable) |`firebaseui.auth.CredentialHelper.NONE` |
470534

471535
### Available providers

demo/public/app.js

-2
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,6 @@ function getUiConfig() {
4242
// TODO(developer): Remove the providers you don't need for your app.
4343
{
4444
provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
45-
// Required to enable this provider in One-Tap Sign-up.
46-
authMethod: 'https://accounts.google.com',
4745
// Required to enable ID token credentials for this provider.
4846
clientId: CLIENT_ID
4947
},

demo/public/widget.html

-2
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,6 @@
3636
// TODO(developer): Remove the providers you don't need for your app.
3737
{
3838
provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
39-
// Required to enable this provider in One-Tap Sign-up.
40-
authMethod: 'https://accounts.google.com',
4139
// Required to enable ID token credentials for this provider.
4240
clientId: CLIENT_ID
4341
},

javascript/externs/googleyolo.js

+20-98
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
/**
22
* Smart Lock API externs.
3+
* Note that this SDK is not dedicated to One-tap API. It seems to cover other
4+
* Google sign-in related functionality. We may want to consider renaming
5+
* these APIs to not be One-tap specific.
6+
* https://developers.google.com/identity/one-tap/web/reference/js-reference
37
*
48
* @externs
59
*/
@@ -8,55 +12,32 @@
812
* @record
913
* @struct
1014
*/
11-
function SmartLockHintOptions() {}
15+
function SmartLockOptions() {}
1216

13-
/** @type {!Array<string>} */
14-
SmartLockHintOptions.prototype.supportedAuthMethods;
15-
16-
/** @type {!Array<!Object<string,string>>} */
17-
SmartLockHintOptions.prototype.supportedIdTokenProviders;
18-
19-
/** @type {?string|undefined} */
20-
SmartLockHintOptions.prototype.context;
21-
22-
/**
23-
* @record
24-
* @struct
25-
*/
26-
function SmartLockRequestOptions() {}
17+
/** @type {string} */
18+
SmartLockOptions.prototype.client_id;
2719

28-
/** @type {!Array<string>} */
29-
SmartLockRequestOptions.prototype.supportedAuthMethods;
20+
/** @type {?boolean|undefined} */
21+
SmartLockOptions.prototype.auto_select;
3022

31-
/** @type {!Array<!Object<string,string>>} */
32-
SmartLockRequestOptions.prototype.supportedIdTokenProviders;
23+
/** @type {function(SmartLockCredential)} */
24+
SmartLockOptions.prototype.callback;
3325

34-
/** @type {?string|undefined} */
35-
SmartLockRequestOptions.prototype.context;
3626

3727
/**
3828
* @record
3929
* @struct
4030
*/
4131
function SmartLockCredential() {}
4232

43-
/** @type {string} */
44-
SmartLockCredential.prototype.id;
45-
46-
/** @type {string} */
47-
SmartLockCredential.prototype.authMethod;
48-
4933
/** @type {string|undefined} */
50-
SmartLockCredential.prototype.authDomain;
34+
SmartLockCredential.prototype.credential;
5135

5236
/** @type {string|undefined} */
53-
SmartLockCredential.prototype.displayName;
37+
SmartLockCredential.prototype.clientId;
5438

5539
/** @type {string|undefined} */
56-
SmartLockCredential.prototype.profilePicture;
57-
58-
/** @type {string|undefined} */
59-
SmartLockCredential.prototype.idToken;
40+
SmartLockCredential.prototype.select_by;
6041

6142
/**
6243
* @record
@@ -65,80 +46,21 @@ SmartLockCredential.prototype.idToken;
6546
function SmartLockApi() {}
6647

6748
/**
68-
* Requests the credential provider whether hints are available or not for
69-
* the current user.
70-
*
71-
* @param {!SmartLockHintOptions} options
72-
* Describes the types of credentials that are supported by the origin.
73-
* @return {!Promise<boolean>}
74-
* A promise that resolves with true if at least one hint is available,
75-
* and resolves with false if none are available. The promise will not
76-
* reject: if an error happen, it should resolve with false.
77-
*/
78-
SmartLockApi.prototype.hintsAvailable = function(options) {};
79-
80-
/**
81-
* Attempts to retrieve a sign-up hint that can be used to create a new
82-
* user account.
49+
* Initializes GSI sign in process.
8350
*
84-
* @param {!SmartLockHintOptions} options
51+
* @param {!SmartLockOptions} options
8552
* Describes the types of credentials that are supported by the origin,
8653
* and customization properties for the display of any UI pertaining to
8754
* releasing this credential.
88-
* @return {!Promise<!SmartLockCredential>}
89-
* A promise for a credential hint. The promise will be rejected if the
90-
* user cancels the hint selection process, if there are no hints available,
91-
* or if an error happens.
92-
*/
93-
SmartLockApi.prototype.hint = function(options) {};
94-
95-
/**
96-
* Attempts to retrieve a credential for the current origin.
97-
*
98-
* @param {!SmartLockRequestOptions} options
99-
* Describes the types of credentials that are supported by the origin.
100-
* @return {!Promise<!SmartLockCredential>}
101-
* A promise for the credential, which will be rejected if there are no
102-
* credentials available or the user refuses to release the credential.
103-
* Otherwise, the promise will resolve with a credential that the app
104-
* can use.
10555
*/
106-
SmartLockApi.prototype.retrieve = function(options) {};
56+
SmartLockApi.prototype.initialize = function(options) {};
10757

10858
/**
109-
* Prevents the automatic release of a credential from the retrieve operation.
110-
* This should be invoked when the user signs out, in order to prevent an
111-
* automatic sign-in loop. This cannot be called while another operation is
112-
* pending so should be called before retrieve.
113-
* @return {!Promise<void>}
114-
* A promise for the completion of notifying the provider to disable
115-
* automatic sign-in.
59+
* Triggers the prompt to display.
11660
*/
117-
SmartLockApi.prototype.disableAutoSignIn = function() {};
61+
SmartLockApi.prototype.prompt = function() {};
11862

11963
/**
12064
* Cancels the last operation triggered.
121-
* @return {!Promise<void>}
122-
* A promise for the completion of the cancellation.
12365
*/
124-
SmartLockApi.prototype.cancelLastOperation = function() {};
125-
126-
/**
127-
* Sets a custom timeouts, in milliseconds, after which a request is
128-
* considered failed.
129-
* @param {number|null} timeoutMs The timeout in milliseconds.
130-
*/
131-
SmartLockApi.prototype.setTimeouts = function(timeoutMs) {};
132-
133-
/**
134-
* Sets the render mode of the credentials selector, or null if the default
135-
* should be used. Available render modes are: 'bottomSheet' and 'navPopout'.
136-
* @param {string|null} renderMode
137-
*/
138-
SmartLockApi.prototype.setRenderMode = function(renderMode) {};
139-
140-
/** @type {!SmartLockApi} */
141-
var googleyolo;
142-
143-
/** @type {function(!SmartLockApi)|undefined} */
144-
var onGoogleYoloLoad;
66+
SmartLockApi.prototype.cancel = function() {};

0 commit comments

Comments
 (0)