[firebase-release] Prepares FirebaseUI-web for 2.5.0 release.

 - Integrates one-tap sign-up with FirebaseUI-web.
 - Fixes missing dialog-polyfill in FirebaseUI-web npm build.


PiperOrigin-RevId: 176553830
Change-Id: Ia6298906bebf78e924cf8888dc9e9517125e83ba

Author: Googler

README.md

@@ -367,17 +367,86 @@ FirebaseUI supports the following configuration parameters.
 
 The role of a credential helper is to help your users sign into you website.
 When one is enabled, your users will be prompted with email addresses and
-usernames they have saved from your app or other applications. To achieve this,
-[accountchooser.com](https://www.accountchooser.com/learnmore.html) is
-available. Upon signing in or signing up with email, the user will be redirected
-to the accountchooser.com website and will be able to select one of their saved
-accounts. It is recommended to use this, but you can also disable it by
-specifying the value below. This feature is always disabled for non HTTP/HTTPS
-environments.
+usernames they have saved from your app or other applications.
+FirebaseUI supports the following credential helpers:
+
+- [one-tap sign-up](https://developers.google.com/identity/one-tap/web/overview)
+- [accountchooser.com](https://www.accountchooser.com/learnmore.html)
+
+#### accountchooser.com
+
+When [accountchooser.com](https://www.accountchooser.com/learnmore.html) is
+enabled (enabled by default), upon signing in or
+signing up with email, the user will be redirected to the accountchooser.com
+website and will be able to select one of their saved accounts. You can
+disable it by specifying the value below. This feature is always disabled for
+non HTTP/HTTPS environments.
+
+#### One-tap sign-up
+
+[One-tap sign-up](https://developers.google.com/identity/one-tap/web/overview)
+provides seamless authentication flows to
+your users with Google's one tap sign-up and automatic sign-in APIs.
+With one tap sign-up, users are prompted to create an account with a dialog
+that's inline with FirebaseUI NASCAR screen. With just one tap, they get a
+secure, token-based, passwordless account with your service, protected by their
+Google Account. As the process is frictionless, users are much more likely to
+register.
+Returning users are signed in automatically, even when they switch devices or
+platforms, or after their session expires.
+One-tap sign-up integrates with FirebaseUI and if you request Google OAuth
+scopes, you will still get back the expected Google OAuth access token even if
+the user goes through the one-tap flow. However, in that case 'redirect' flow is
+always used even when 'popup' is specified.
+In addition, if you choose to force prompt for Google sign-in, one-tap auto
+sign-in will be automatically disabled.
+One-tap is an additive feature and is only supported in the latest evergreen
+modern browser environments.
+For more information on how to configure one-tap sign-up, refer to the
+[one-tap get started guide](https://developers.google.com/identity/one-tap/web/get-started).
+
+The following example shows how to configure one-tap sign-up with FirebaseUI.
+Along with the corresponding one-tap `credentialHelper`, `clientId` and
+`authMethod` have to be provided with the Firebase Google provider:
+
+```javascript
+ui.start('#firebaseui-auth-container', {
+  signInOptions = [
+    {
+      // Google provider must be enabled in Firebase Console to support one-tap
+      // sign-up.
+      provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
+      // Required to enable this provider in one-tap sign-up.
+      authMethod: 'https://accounts.google.com',
+      // Required to enable ID token credentials for this provider.
+      // This can be obtained from the Credentials page of the Google APIs
+      // console.
+      clientId: 'xxxxxxxxxxxxxxxxx.apps.googleusercontent.com'
+    },
+    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
+    firebase.auth.TwitterAuthProvider.PROVIDER_ID,
+    firebase.auth.GithubAuthProvider.PROVIDER_ID,
+    firebase.auth.EmailAuthProvider.PROVIDER_ID,
+  ],
+  // Required to enable one-tap sign-up credential helper.
+  credentialHelper: firebaseui.auth.CredentialHelper.GOOGLE_YOLO
+});
+// Auto sign-in for returning users is enabled by default except when prompt is
+// not 'none' in the Google provider custom parameters. To manually disable:
+ui.disableAutoSignIn();
+```
+
+Auto sign-in for returning users can be disabled by calling
+`ui.disableAutoSignIn()`. This may be needed if the FirebaseUI sign-in page is
+being rendered after the user signs out.
+
+To see FirebaseUI in action with one-tap sign-up, check out the FirebaseUI
+[demo app](https://fir-ui-demo-84a6c.firebaseapp.com/).
 
 |Credential Helper |Value                                                 |
 |------------------|------------------------------------------------------|
 |accountchooser.com|`firebaseui.auth.CredentialHelper.ACCOUNT_CHOOSER_COM`|
+|One-tap sign-up   |`firebaseui.auth.CredentialHelper.GOOGLE_YOLO`        |
 |None (disable)    |`firebaseui.auth.CredentialHelper.NONE`               |
 
 ### Available providers

demo/README.md

@@ -45,6 +45,17 @@ Then copy and paste the Web snippet code found in the console (either by clickin
 your web app" button in your Project overview, or clicking the "Web setup" button in the Auth page)
 in the `config.js` file.
 
+## Integrate One-tap sign-up with FirebaseUI (optional)
+
+If you want to integrate with
+[One-tap sign-up](https://developers.google.com/identity/one-tap/web/overview),
+you will also need the Google OAuth web client ID corresponding to that project
+which can be retrieved from the Google Cloud Console. This value will need to be
+populated in `CLIENT_ID`.
+The domain of the page has to also be whitelisted. Learn more on how to
+[get started with One-tap sign-up](https://developers.google.com/identity/one-tap/web/get-started).
+Skip this step, if you don't want to use One-tap sign-up with FirebaseUI.
+
 ## Deploy
 
 ### Option 1: Compile and use local FirebaseUI files

demo/public/app.js

@@ -35,7 +35,10 @@ function getUiConfig() {
       // TODO(developer): Remove the providers you don't need for your app.
       {
         provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
-        scopes: ['https://www.googleapis.com/auth/plus.login']
+        // Required to enable this provider in One-Tap Sign-up.
+        authMethod: 'https://accounts.google.com',
+        // Required to enable ID token credentials for this provider.
+        clientId: CLIENT_ID
       },
       {
         provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID,
@@ -61,12 +64,17 @@ function getUiConfig() {
       }
     ],
     // Terms of service url.
-    'tosUrl': 'https://www.google.com'
+    'tosUrl': 'https://www.google.com',
+    'credentialHelper': CLIENT_ID && CLIENT_ID != 'YOUR_OAUTH_CLIENT_ID' ?
+        firebaseui.auth.CredentialHelper.GOOGLE_YOLO :
+        firebaseui.auth.CredentialHelper.ACCOUNT_CHOOSER_COM
   };
 }
 
 // Initialize the FirebaseUI Widget using Firebase.
 var ui = new firebaseui.auth.AuthUI(firebase.auth());
+// Disable auto-sign in.
+ui.disableAutoSignIn();
 
 
 /**

demo/public/sample-config.js

@@ -19,3 +19,7 @@ var config = {
   storageBucket: "your-app.appspot.com",
 };
 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';

demo/public/widget.html

@@ -34,7 +34,13 @@
         },
         'signInOptions': [
           // TODO(developer): Remove the providers you don't need for your app.
-          firebase.auth.GoogleAuthProvider.PROVIDER_ID,
+          {
+            provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
+            // Required to enable this provider in One-Tap Sign-up.
+            authMethod: 'https://accounts.google.com',
+            // Required to enable ID token credentials for this provider.
+            clientId: CLIENT_ID
+          },
           firebase.auth.FacebookAuthProvider.PROVIDER_ID,
           firebase.auth.TwitterAuthProvider.PROVIDER_ID,
           firebase.auth.GithubAuthProvider.PROVIDER_ID,
@@ -47,7 +53,10 @@
           }
         ],
         // Terms of service url.
-        'tosUrl': 'https://www.google.com'
+        'tosUrl': 'https://www.google.com',
+        'credentialHelper': CLIENT_ID && CLIENT_ID != 'YOUR_OAUTH_CLIENT_ID' ?
+            firebaseui.auth.CredentialHelper.GOOGLE_YOLO :
+            firebaseui.auth.CredentialHelper.ACCOUNT_CHOOSER_COM
       };
 
       // Initialize the FirebaseUI Widget using Firebase.

gulpfile.js

@@ -38,10 +38,16 @@ const OPTIMIZATION_LEVEL = util.env.compilation_level ||
 const OUTPUT_WRAPPER = OPTIMIZATION_LEVEL === 'WHITESPACE_ONLY' ?
     '%output%' : '(function() { %output% })();';
 
+// Provides missing dialogPolyfill on window in npm environments.
+const DIALOG_POLYFILL = 'if(typeof window!==\'undefined\')' +
+    '{window.dialogPolyfill=require(\'dialog-polyfill\');}';
+
 // Adds the firebase module requirement and exports firebaseui.
 const NPM_MODULE_WRAPPER = OPTIMIZATION_LEVEL === 'WHITESPACE_ONLY' ?
-    'var firebase=require(\'firebase/app\');require(\'firebase/auth\');%output%module.exports=firebaseui;' :
-    '(function() { var firebase=require(\'firebase/app\');require(\'firebase/auth\');%output% })();' +
+    'var firebase=require(\'firebase/app\');require(\'firebase/auth\');' +
+    '%output%' + DIALOG_POLYFILL + 'module.exports=firebaseui;' :
+    '(function() { var firebase=require(\'firebase/app\');' +
+    'require(\'firebase/auth\');%output% ' + DIALOG_POLYFILL + '})();' +
     'module.exports=firebaseui;';
 
 // The path to Closure Compiler.

javascript/externs/googleyolo.js

@@ -0,0 +1,144 @@
+/**
+ * Smart Lock API externs.
+ *
+ * @externs
+ */
+
+/**
+ * @record
+ * @struct
+ */
+function SmartLockHintOptions() {}
+
+/** @type {!Array<string>} */
+SmartLockHintOptions.prototype.supportedAuthMethods;
+
+/** @type {!Array<!Object<string,string>>} */
+SmartLockHintOptions.prototype.supportedIdTokenProviders;
+
+/** @type {?string|undefined} */
+SmartLockHintOptions.prototype.context;
+
+/**
+ * @record
+ * @struct
+ */
+function SmartLockRequestOptions() {}
+
+/** @type {!Array<string>} */
+SmartLockRequestOptions.prototype.supportedAuthMethods;
+
+/** @type {!Array<!Object<string,string>>} */
+SmartLockRequestOptions.prototype.supportedIdTokenProviders;
+
+/** @type {?string|undefined} */
+SmartLockRequestOptions.prototype.context;
+
+/**
+ * @record
+ * @struct
+ */
+function SmartLockCredential() {}
+
+/** @type {string} */
+SmartLockCredential.prototype.id;
+
+/** @type {string} */
+SmartLockCredential.prototype.authMethod;
+
+/** @type {string|undefined} */
+SmartLockCredential.prototype.authDomain;
+
+/** @type {string|undefined} */
+SmartLockCredential.prototype.displayName;
+
+/** @type {string|undefined} */
+SmartLockCredential.prototype.profilePicture;
+
+/** @type {string|undefined} */
+SmartLockCredential.prototype.idToken;
+
+/**
+ * @record
+ * @struct
+ */
+function SmartLockApi() {}
+
+/**
+ * Requests the credential provider whether hints are available or not for
+ * the current user.
+ *
+ * @param {!SmartLockHintOptions} options
+ *     Describes the types of credentials that are supported by the origin.
+ * @return {!Promise<boolean>}
+ *     A promise that resolves with true if at least one hint is available,
+ *     and resolves with false if none are available. The promise will not
+ *     reject: if an error happen, it should resolve with false.
+ */
+SmartLockApi.prototype.hintsAvailable = function(options) {};
+
+/**
+ * Attempts to retrieve a sign-up hint that can be used to create a new
+ * user account.
+ *
+ * @param {!SmartLockHintOptions} options
+ *     Describes the types of credentials that are supported by the origin,
+ *     and customization properties for the display of any UI pertaining to
+ *     releasing this credential.
+ * @return {!Promise<!SmartLockCredential>}
+ *     A promise for a credential hint. The promise will be rejected if the
+ *     user cancels the hint selection process, if there are no hints available,
+ *     or if an error happens.
+ */
+SmartLockApi.prototype.hint = function(options) {};
+
+/**
+ * Attempts to retrieve a credential for the current origin.
+ *
+ * @param {!SmartLockRequestOptions} options
+ *     Describes the types of credentials that are supported by the origin.
+ * @return {!Promise<!SmartLockCredential>}
+ *     A promise for the credential, which will be rejected if there are no
+ *     credentials available or the user refuses to release the credential.
+ *     Otherwise, the promise will resolve with a credential that the app
+ *     can use.
+ */
+SmartLockApi.prototype.retrieve = function(options) {};
+
+/**
+ * Prevents the automatic release of a credential from the retrieve operation.
+ * This should be invoked when the user signs out, in order to prevent an
+ * automatic sign-in loop. This cannot be called while another operation is
+ * pending so should be called before retrieve.
+ * @return {!Promise<void>}
+ *     A promise for the completion of notifying the provider to disable
+ *     automatic sign-in.
+ */
+SmartLockApi.prototype.disableAutoSignIn = function() {};
+
+/**
+ * Cancels the last operation triggered.
+ * @return {!Promise<void>}
+ *     A promise for the completion of the cancellation.
+ */
+SmartLockApi.prototype.cancelLastOperation = function() {};
+
+/**
+ * Sets a custom timeouts, in milliseconds, after which a request is
+ * considered failed.
+ * @param {number|null} timeoutMs The timeout in milliseconds.
+ */
+SmartLockApi.prototype.setTimeouts = function(timeoutMs) {};
+
+/**
+ * Sets the render mode of the credentials selector, or null if the default
+ * should be used. Available render modes are: 'bottomSheet' and 'navPopout'.
+ * @param {string|null} renderMode
+ */
+SmartLockApi.prototype.setRenderMode = function(renderMode) {};
+
+/** @type {!SmartLockApi} */
+var googleyolo;
+
+/** @type {function(!SmartLockApi)|undefined} */
+var onGoogleYoloLoad;