Adds ability to customize IdP buttons.

CHANGELOG.md

@@ -0,0 +1,2 @@
+* Extends the ability to customize the default IdP buttons (provider name, icon URL and background color) for providers like Google and Email.
+* Adds the ability to overwrite the entire button label via `fullLabel` for all buttons.

README.md

@@ -641,6 +641,16 @@ parameters.
 </td>
 </tr>
 <tr>
+<td>fullLabel</td>
+<td>No</td>
+<td>
+  The full label of the button. Instead of "Sign in with $providerName", this
+  button label will be used.
+  <em>Default:</em>
+  <code>Sign in with $providerName</code>
+</td>
+</tr>
+<tr>
 <td>buttonColor</td>
 <td>No</td>
 <td>
@@ -694,6 +704,8 @@ ui.start('#firebaseui-auth-container', {
     {
       provider: 'microsoft.com',
       providerName: 'Microsoft',
+      // To override the full label of the button.
+      // fullLabel: 'Login with Microsoft',
       buttonColor: '#2F2F2F',
       iconUrl: '<icon-url-of-sign-in-button>',
       loginHintKey: 'login_hint',
@@ -740,6 +752,16 @@ OIDC providers' `signInOptions` support the following configuration parameters.
 </td>
 </tr>
 <tr>
+<td>fullLabel</td>
+<td>No</td>
+<td>
+  The full label of the button. Instead of "Sign in with $providerName", this
+  button label will be used.
+  <em>Default:</em>
+  <code>Sign in with $providerName</code>
+</td>
+</tr>
+<tr>
 <td>buttonColor</td>
 <td>Yes</td>
 <td>
@@ -770,8 +792,10 @@ OIDC providers' `signInOptions` support the following configuration parameters.
 ui.start('#firebaseui-auth-container', {
   signInOptions: [
     {
-      provider: 'oidc.myProvider`,
+      provider: 'oidc.myProvider',
       providerName: 'MyOIDCProvider',
+      // To override the full label of the button.
+      // fullLabel: 'Employee Login',
       buttonColor: '#2F2F2F',
       iconUrl: '<icon-url-of-sign-in-button>',
       customParameters: {
@@ -814,6 +838,16 @@ SAML providers' `signInOptions` support the following configuration parameters.
 </td>
 </tr>
 <tr>
+<td>fullLabel</td>
+<td>No</td>
+<td>
+  The full label of the button. Instead of "Sign in with $providerName", this
+  button label will be used.
+  <em>Default:</em>
+  <code>Sign in with $providerName</code>
+</td>
+</tr>
+<tr>
 <td>buttonColor</td>
 <td>Yes</td>
 <td>
@@ -839,6 +873,8 @@ ui.start('#firebaseui-auth-container', {
     {
       provider: 'saml.myProvider',
       providerName: 'MySAMLProvider',
+      // To override the full label of the button.
+      // fullLabel: 'Constractor Portal',
       buttonColor: '#2F2F2F',
       iconUrl: '<icon-url-of-sign-in-button>'
     }

externs/firebaseui-externs.js

@@ -682,6 +682,38 @@ firebaseui.auth.Callbacks.prototype.uiShown = function() {};
  */
 firebaseui.auth.SignInOption = function() {};
 
+/**
+ * The provider name displayed to end users
+ * (sign-in button label/linking prompt).
+ * Default: provider ID
+ *
+ * @type {string|undefined}
+ */
+firebaseui.auth.SignInOption.prototype.providerName;
+
+/**
+ * The full label of the button, instead of "Sign in with $providerName".
+ * Default: "Sign in with $providerName".
+ *
+ * @type {string|undefined}
+ */
+firebaseui.auth.SignInOption.prototype.fullLabel;
+
+/**
+ * The color of the sign-in button.
+ *
+ * @type {string|undefined}
+ */
+firebaseui.auth.SignInOption.prototype.buttonColor;
+
+/**
+ * The URL of the Identity Provider's icon. This will be displayed on the
+ * provider's sign-in button, etc.
+ *
+ * @type {string|undefined}
+ */
+firebaseui.auth.SignInOption.prototype.iconUrl;
+
 /**
  * The provider ID for the provided sign in option,
  * eg: `firebase.auth.GoogleAuthProvider.PROVIDER_ID`.

firebaseuihandler/README.md

@@ -137,6 +137,8 @@ const configs = {
           {
             provider: 'saml.my-provider1',
             providerName: 'SAML provider',
+            // To customize the full label:
+            // fullLabel: 'ACME Portal',
             buttonColor: '#4666FF',
             iconUrl: 'https://www.example.com/photos/my_idp/saml.png'
           },
@@ -161,6 +163,8 @@ const configs = {
           {
             provider: 'oidc.my-provider1',
             providerName: 'OIDC provider',
+            // To customize the full label:
+            // fullLabel: 'Contractor Login',
             buttonColor: '#4666FF',
             iconUrl: 'https://www.example.com/photos/my_idp/oidc.png'
           },

javascript/widgets/config.js

@@ -237,16 +237,30 @@ class Config {
           googArray.contains(
               UI_SUPPORTED_PROVIDERS,
               option['provider'])) {
-        // For built-in providers, provider display name, button color and
-        // icon URL are fixed. The login hint key is also automatically set for
-        // built-in providers that support it.
-        return {
+        // The login hint key is also automatically set for built-in providers
+        // that support it.
+        const providerConfig = {
           providerId: option['provider'],
+          // Since developers may be using G-Suite for Google sign in or
+          // want to label email/password as their own provider, we should
+          // allow customization of these attributes.
+          providerName: option['providerName'] || null,
+          fullLabel: option['fullLabel'] || null,
+          buttonColor: option['buttonColor'] || null,
+          iconUrl: option['iconUrl'] ?
+              util.sanitizeUrl(option['iconUrl']) : null,
         };
+        for (const key in providerConfig) {
+          if (providerConfig[key] === null) {
+            delete providerConfig[key];
+          }
+        }
+        return providerConfig;
       } else {
         return {
           providerId: option['provider'],
           providerName: option['providerName'] || null,
+          fullLabel: option['fullLabel'] || null,
           buttonColor: option['buttonColor'] || null,
           iconUrl: option['iconUrl'] ?
               util.sanitizeUrl(option['iconUrl']) : null,
@@ -914,11 +928,15 @@ Config.SignInFlow = {
  * The provider config object for generic providers.
  * providerId: The provider ID.
  * providerName: The display name of the provider.
+ * fullLabel: The full button label. If both providerName and fullLabel are
+ * provided, we will use fullLabel for long name and providerName for short
+ * name.
  * buttonColor: The color of the sign in button.
  * iconUrl: The URL of the icon on sign in button.
  * loginHintKey: The name to use for the optional login hint parameter.
  * @typedef {{
  *   providerId: string,
+ *   fullLabel: (?string|undefined),
  *   providerName: (?string|undefined),
  *   buttonColor: (?string|undefined),
  *   iconUrl: (?string|undefined),

javascript/widgets/config_test.js

@@ -311,15 +311,16 @@ testSuite({
       {
         'provider': 'google.com',
         'scopes': ['foo', 'bar'],
-        // providerName, buttonColor and iconUrl should be override with null.
-        'providerName': 'Google',
+        'providerName': 'MyIdp',
+        'fullLabel': 'MyIdp Portal',
         'buttonColor': '#FFB6C1',
         'iconUrl': '<url-of-the-icon-of-the-sign-in-button>',
       },
       'facebook.com',
       {
         'provider': 'microsoft.com',
         'providerName': 'Microsoft',
+        'fullLabel': 'Microsoft Login',
         'buttonColor': '#FFB6C1',
         'iconUrl': '<url-of-the-icon-of-the-sign-in-button>',
         'loginHintKey': 'login_hint',
@@ -333,20 +334,26 @@ testSuite({
     assertEquals(4, providerConfigs.length);
     assertObjectEquals({
       providerId: 'google.com',
+      providerName: 'MyIdp',
+      fullLabel: 'MyIdp Portal',
+      buttonColor: '#FFB6C1',
+      iconUrl: '<url-of-the-icon-of-the-sign-in-button>',
     }, providerConfigs[0]);
     assertObjectEquals({
       providerId: 'facebook.com',
     }, providerConfigs[1]);
     assertObjectEquals({
       providerId: 'microsoft.com',
       providerName: 'Microsoft',
+      fullLabel: 'Microsoft Login',
       buttonColor: '#FFB6C1',
       iconUrl: '<url-of-the-icon-of-the-sign-in-button>',
       loginHintKey: 'login_hint',
     }, providerConfigs[2]);
     assertObjectEquals({
       providerId: 'yahoo.com',
       providerName: null,
+      fullLabel: null,
       buttonColor: null,
       iconUrl: null,
       loginHintKey: null,
@@ -358,15 +365,17 @@ testSuite({
       {
         'provider': 'google.com',
         'scopes': ['foo', 'bar'],
-        // providerName, buttonColor and iconUrl should be override with null.
-        'providerName': 'Google',
+        'providerName': 'MyIdp',
+        'fullLabel': 'MyIdp Portal',
         'buttonColor': '#FFB6C1',
         'iconUrl': '<url-of-the-icon-of-the-sign-in-button>',
+        'loginHintKey': 'other',
       },
       'facebook.com',
       {
         'provider': 'microsoft.com',
         'providerName': 'Microsoft',
+        'fullLabel': 'Microsoft Login',
         'buttonColor': '#FFB6C1',
         'iconUrl': '<url-of-the-icon-of-the-sign-in-button>',
         'loginHintKey': 'login_hint',
@@ -381,13 +390,18 @@ testSuite({
     ]);
     assertObjectEquals({
       providerId: 'google.com',
+      providerName: 'MyIdp',
+      fullLabel: 'MyIdp Portal',
+      buttonColor: '#FFB6C1',
+      iconUrl: '<url-of-the-icon-of-the-sign-in-button>',
     }, config.getConfigForProvider('google.com'));
     assertObjectEquals({
       providerId: 'facebook.com',
     }, config.getConfigForProvider('facebook.com'));
     assertObjectEquals({
       providerId: 'microsoft.com',
       providerName: 'Microsoft',
+      fullLabel: 'Microsoft Login',
       buttonColor: '#FFB6C1',
       iconUrl: '<url-of-the-icon-of-the-sign-in-button>',
       loginHintKey: 'login_hint',
@@ -396,6 +410,7 @@ testSuite({
     assertObjectEquals({
       providerId: 'yahoo.com',
       providerName: 'Yahoo',
+      fullLabel: null,
       buttonColor: '#FFB6C1',
       iconUrl: 'about:invalid#zClosurez',
       loginHintKey: null,

javascript/widgets/uihandlerconfig_test.js

@@ -54,6 +54,7 @@ testSuite({
             {
               hd: 'sub-acme.com',
               provider: 'password',
+              fullLabel: 'Sign in as Employee',
               requireDisplayName: false,
             },
           ],
@@ -70,6 +71,7 @@ testSuite({
             {
               hd: 'ocp-supplier1.com',
               provider: 'saml.my-provider1',
+              fullLabel: 'Contractor Portal',
               providerName: 'SAML provider',
               buttonColor: '#4413AD',
               iconUrl: 'https://www.example.com/photos/my_idp/saml.png',