Adds ability to customize IdP buttons. (firebase#730)

* Adds ability to customize IdP buttons. Allow customization of native providers. In addition, allow ability to override the entire button label via "fullLabel". This will be used instead of "Sign in with $providerName" for the long name. However, for the short name, $providerName is still used.
Yuval-Peled · Jul 15, 2020 · 3eb86ec · 3eb86ec
1 parent 205f66d
commit 3eb86ec
Show file tree

Hide file tree

Showing 13 changed files with 264 additions and 47 deletions.
diff --git a/CHANGELOG.md b/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.
diff --git a/README.md b/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>'
     }

diff --git a/externs/firebaseui-externs.js b/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`.

diff --git a/firebaseuihandler/README.md b/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'
           },

diff --git a/javascript/widgets/config.js b/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),

diff --git a/javascript/widgets/config_test.js b/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,

diff --git a/javascript/widgets/uihandlerconfig_test.js b/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',
Original file line number	Diff line number	Diff line change
		@@ -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.