@reachfive/identity-ui 1.22.0 → 1.23.1

package/CHANGELOG.md

@@ -7,6 +7,17 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+## [1.23.1] - 2023-12-12
+
+### Fixes
+
+- Handle provider variants correctly in showSocialAccount.
+
+## [1.23.0] - 2023-11-27
+
+## Added
+- Improved mfa step up UX when only one second factor exists
+
 ## [1.22.0] - 2023-11-09
 
 ### Added
@@ -375,7 +386,11 @@ The eye icon is now correctly displayed in the Auth widget.
 
 First version of the SDK Web UI.
 
-[Unreleased]: https://github.com/ReachFive/identity-web-ui-sdk/compare/v1.22.0...HEAD
+[Unreleased]: https://github.com/ReachFive/identity-web-ui-sdk/compare/v1.23.1...HEAD
+
+[1.23.1]: https://github.com/ReachFive/identity-web-ui-sdk/compare/v1.23.0...v1.23.1
+
+[1.23.0]: https://github.com/ReachFive/identity-web-ui-sdk/compare/v1.22.0...v1.23.0
 
 [1.22.0]: https://github.com/ReachFive/identity-web-ui-sdk/compare/v1.21.0...v1.22.0
 

package/cjs/identity-ui.js

@@ -8402,6 +8402,9 @@ var Check = withTheme(styled__default(function (_ref4) {
     checked: checked,
     name: name,
     onChange: onSelect,
+    style: radio && {
+      appearance: "radio"
+    },
     required: required,
     value: value
   }), label);
@@ -11116,66 +11119,89 @@ var StartPasswordlessForm = createForm({
     })];
   }
 });
-var MfaStepUpView = /*#__PURE__*/function (_React$Component) {
-  _inherits(MfaStepUpView, _React$Component);
-  var _super = _createSuper(MfaStepUpView);
-  function MfaStepUpView() {
+var MainView = /*#__PURE__*/function (_React$Component) {
+  _inherits(MainView, _React$Component);
+  var _super = _createSuper(MainView);
+  function MainView(props) {
     var _this;
-    _classCallCheck(this, MfaStepUpView);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
+    _classCallCheck(this, MainView);
+    _this = _super.call(this, props);
     _defineProperty(_assertThisInitialized(_this), "onGetStepUpToken", function () {
       return _this.props.apiClient.getMfaStepUpToken({
         options: _this.props.auth,
         accessToken: _this.props.accessToken
+      }).then(function (res) {
+        return _this.setState({
+          response: res
+        });
       });
     });
+    _this.state = {
+      response: undefined
+    };
     return _this;
   }
-  _createClass(MfaStepUpView, [{
+  _createClass(MainView, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.onGetStepUpToken();
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this2 = this;
-      return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(StartStepUpMfaButton, {
+      var _this$props = this.props,
+        showStepUpStart = _this$props.showStepUpStart,
+        goTo = _this$props.goTo;
+      return this.state.response === undefined ? null : /*#__PURE__*/React__default.createElement("div", null, showStepUpStart ? /*#__PURE__*/React__default.createElement(StartStepUpMfaButton, {
         handler: this.onGetStepUpToken,
-        onSuccess: function onSuccess(data) {
-          return _this2.props.goTo('fa-selection', _objectSpread2({}, data));
+        onSuccess: function onSuccess(_) {
+          return goTo('fa-selection', _this2.state.response);
         }
-      }));
+      }) : /*#__PURE__*/React__default.createElement(FaSelectionView, _extends({}, this.state.response, this.props)));
     }
   }]);
-  return MfaStepUpView;
+  return MainView;
 }(React__default.Component);
 var FaSelectionView = /*#__PURE__*/function (_React$Component2) {
   _inherits(FaSelectionView, _React$Component2);
   var _super2 = _createSuper(FaSelectionView);
-  function FaSelectionView() {
+  function FaSelectionView(props) {
     var _this3;
     _classCallCheck(this, FaSelectionView);
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-    _this3 = _super2.call.apply(_super2, [this].concat(args));
+    _this3 = _super2.call(this, props);
     _defineProperty(_assertThisInitialized(_this3), "onChooseFa", function (factor) {
       return _this3.props.apiClient.startPasswordless(_objectSpread2(_objectSpread2({}, factor), {}, {
         stepUp: _this3.props.token
-      })).then(function (resp) {
-        return _objectSpread2(_objectSpread2({}, resp), factor);
+      })).then(function (res) {
+        return _this3.setState({
+          response: _objectSpread2(_objectSpread2({}, res), factor)
+        });
       });
     });
+    _this3.state = {
+      response: undefined
+    };
     return _this3;
   }
   _createClass(FaSelectionView, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.props.amr.length == 1) this.onChooseFa({
+        authType: this.props.amr[0]
+      });else this.setState({
+        response: {}
+      });
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this4 = this;
-      var _this$props = this.props,
-        amr = _this$props.amr,
-        showIntro = _this$props.showIntro,
-        i18n = _this$props.i18n;
-      return /*#__PURE__*/React__default.createElement("div", null, showIntro && /*#__PURE__*/React__default.createElement(Intro, null, i18n('mfa.select.factor')), /*#__PURE__*/React__default.createElement(StartPasswordlessForm, {
+      var _this$props2 = this.props,
+        amr = _this$props2.amr,
+        showIntro = _this$props2.showIntro,
+        i18n = _this$props2.i18n;
+      return this.state.response === undefined ? null : amr.length == 1 ? /*#__PURE__*/React__default.createElement(VerificationCodeView, _extends({}, this.state.response, this.props)) : /*#__PURE__*/React__default.createElement("div", null, showIntro && /*#__PURE__*/React__default.createElement(Intro, null, i18n('mfa.select.factor')), /*#__PURE__*/React__default.createElement(StartPasswordlessForm, {
         options: amr.map(function (factor) {
           return {
             key: factor,
@@ -11187,7 +11213,7 @@ var FaSelectionView = /*#__PURE__*/function (_React$Component2) {
         onSuccess: function onSuccess(data) {
           return _this4.props.goTo('verification-code', _objectSpread2(_objectSpread2({}, data), {}, {
             amr: amr
-          }));
+          }, _this4.state.response));
         }
       }));
     }
@@ -11200,8 +11226,8 @@ var VerificationCodeView = /*#__PURE__*/function (_React$Component3) {
   function VerificationCodeView() {
     var _this5;
     _classCallCheck(this, VerificationCodeView);
-    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-      args[_key3] = arguments[_key3];
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
     _this5 = _super3.call.apply(_super3, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this5), "handleSubmit", function (data) {
@@ -11229,15 +11255,16 @@ var VerificationCodeView = /*#__PURE__*/function (_React$Component3) {
   return VerificationCodeView;
 }(React__default.Component);
 var mfaStepUpWidget = createMultiViewWidget({
-  initialView: 'mfa-step-up',
+  initialView: 'main',
   views: {
-    'mfa-step-up': MfaStepUpView,
+    'main': MainView,
     'fa-selection': FaSelectionView,
     'verification-code': VerificationCodeView
   },
   prepare: function prepare(options) {
     return deepDefaults({}, options, {
-      showIntro: true
+      showIntro: true,
+      showStepUpStart: true
     });
   }
 });
@@ -11301,7 +11328,7 @@ var EmailEditorForm = createForm({
     validator: email
   })]
 });
-var MainView = /*#__PURE__*/function (_React$Component) {
+var MainView$1 = /*#__PURE__*/function (_React$Component) {
   _inherits(MainView, _React$Component);
   var _super = _createSuper(MainView);
   function MainView() {
@@ -11353,7 +11380,7 @@ var SuccessView = function SuccessView(_ref) {
 var emailEditorWidget = createMultiViewWidget({
   initialView: 'main',
   views: {
-    main: MainView,
+    main: MainView$1,
     success: SuccessView
   }
 });
@@ -11490,7 +11517,7 @@ var VerificationCodeInputForm$1 = createForm({
     type: 'text'
   })]
 });
-var MainView$1 = /*#__PURE__*/function (_React$Component) {
+var MainView$2 = /*#__PURE__*/function (_React$Component) {
   _inherits(MainView, _React$Component);
   var _super = _createSuper(MainView);
   function MainView() {
@@ -11572,12 +11599,12 @@ _defineProperty(VerificationCodeView$1, "defaultProps", {
 var phoneNumberEditorWidget = createMultiViewWidget({
   initialView: 'main',
   views: {
-    main: MainView$1,
+    main: MainView$2,
     verificationCode: VerificationCodeView$1
   }
 });
 
-var MainView$2 = /*#__PURE__*/function (_React$Component) {
+var MainView$3 = /*#__PURE__*/function (_React$Component) {
   _inherits(MainView, _React$Component);
   var _super = _createSuper(MainView);
   function MainView() {
@@ -11611,7 +11638,7 @@ var MainView$2 = /*#__PURE__*/function (_React$Component) {
   }]);
   return MainView;
 }(React__default.Component);
-_defineProperty(MainView$2, "defaultProps", {
+_defineProperty(MainView$3, "defaultProps", {
   onSuccess: function onSuccess() {},
   onError: function onError() {}
 });
@@ -11631,7 +11658,7 @@ var resolveCode = function resolveCode() {
 var passwordResetWidget = createMultiViewWidget({
   initialView: 'main',
   views: {
-    main: MainView$2,
+    main: MainView$3,
     success: SuccessView$1
   },
   prepare: function prepare(options) {
@@ -11664,7 +11691,7 @@ var VerificationCodeInputForm$2 = createForm({
     type: 'text'
   })]
 });
-var MainView$3 = /*#__PURE__*/function (_React$Component) {
+var MainView$4 = /*#__PURE__*/function (_React$Component) {
   _inherits(MainView, _React$Component);
   var _super = _createSuper(MainView);
   function MainView() {
@@ -11762,7 +11789,7 @@ var EmailSentView = function EmailSentView(_ref) {
 var passwordlessWidget = createMultiViewWidget({
   initialView: 'main',
   views: {
-    main: MainView$3,
+    main: MainView$4,
     emailSent: EmailSentView,
     verificationCode: VerificationCodeView$2
   },
@@ -12100,7 +12127,10 @@ var socialAccountsWidget = createMultiViewWidget({
       providers: config.socialProviders
     }, options), {}, {
       getAvailableProviders: function getAvailableProviders(identities) {
-        return difference(options.providers || config.socialProviders, identities.map(function (i) {
+        var providerNames = (options.providers || config.socialProviders).map(function (provider) {
+          return provider.split(':').shift();
+        });
+        return difference(providerNames, identities.map(function (i) {
           return i.provider;
         }));
       }
@@ -12297,7 +12327,7 @@ var PhoneNumberRegisteringCredentialForm = function PhoneNumberRegisteringCreden
 var DivCredentialBlock = withTheme(styled__default.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n    margin-left: ", "px;\n    margin-bottom: 5em;\n"])), function (props) {
   return props.theme.get('_blockInnerHeight');
 }));
-var MainView$4 = /*#__PURE__*/function (_React$Component) {
+var MainView$5 = /*#__PURE__*/function (_React$Component) {
   _inherits(MainView, _React$Component);
   var _super = _createSuper(MainView);
   function MainView() {
@@ -12339,7 +12369,8 @@ var MainView$4 = /*#__PURE__*/function (_React$Component) {
         showIntro = _this$props.showIntro,
         config = _this$props.config,
         showRemoveMfaCredentials = _this$props.showRemoveMfaCredentials,
-        credentials = _this$props.credentials;
+        credentials = _this$props.credentials,
+        requireMfaRegistration = _this$props.requireMfaRegistration;
       var PhoneNumberInputForm = PhoneNumberRegisteringCredentialForm(config);
       var phoneNumberCredentialRegistered = credentials.find(function (credential) {
         return credential.type === 'sms';
@@ -12347,7 +12378,9 @@ var MainView$4 = /*#__PURE__*/function (_React$Component) {
       var isEmailCredentialRegistered = credentials.some(function (credential) {
         return credential.type === 'email';
       });
-      return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(DivCredentialBlock, null, config.mfaEmailEnabled && /*#__PURE__*/React__default.createElement("div", null, showIntro && /*#__PURE__*/React__default.createElement(Intro, null, i18n('mfa.email.explain')), /*#__PURE__*/React__default.createElement(EmailRegisteringCredentialForm, {
+      return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(DivCredentialBlock, null, config.mfaEmailEnabled && !credentials.map(function (credential) {
+        return credential.type;
+      }).includes('email') && /*#__PURE__*/React__default.createElement("div", null, showIntro && /*#__PURE__*/React__default.createElement(Intro, null, requireMfaRegistration ? i18n('mfa.email.explain.required') : i18n('mfa.email.explain')), /*#__PURE__*/React__default.createElement(EmailRegisteringCredentialForm, {
         handler: this.onEmailRegistering,
         onSuccess: function onSuccess(data) {
           return _this2.props.goTo('verification-code', _objectSpread2(_objectSpread2({}, data), {}, {
@@ -12448,7 +12481,7 @@ var CredentialRemovedView = function CredentialRemovedView(_ref2) {
 var mfaCredentialsWidget = createMultiViewWidget({
   initialView: 'main',
   views: {
-    'main': MainView$4,
+    'main': MainView$5,
     'credential-registered': CredentialRegisteredView,
     'verification-code': VerificationCodeView$3,
     'credential-removed': CredentialRemovedView
@@ -12460,6 +12493,7 @@ var mfaCredentialsWidget = createMultiViewWidget({
     }).then(function (credentials) {
       return deepDefaults(_objectSpread2(_objectSpread2({
         showIntro: true,
+        requireMfaRegistration: false,
         showRemoveMfaCredentials: true
       }, options), credentials));
     });

package/es/identity-ui.js

@@ -8394,6 +8394,9 @@ var Check = withTheme(styled(function (_ref4) {
     checked: checked,
     name: name,
     onChange: onSelect,
+    style: radio && {
+      appearance: "radio"
+    },
     required: required,
     value: value
   }), label);
@@ -11108,66 +11111,89 @@ var StartPasswordlessForm = createForm({
     })];
   }
 });
-var MfaStepUpView = /*#__PURE__*/function (_React$Component) {
-  _inherits(MfaStepUpView, _React$Component);
-  var _super = _createSuper(MfaStepUpView);
-  function MfaStepUpView() {
+var MainView = /*#__PURE__*/function (_React$Component) {
+  _inherits(MainView, _React$Component);
+  var _super = _createSuper(MainView);
+  function MainView(props) {
     var _this;
-    _classCallCheck(this, MfaStepUpView);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
+    _classCallCheck(this, MainView);
+    _this = _super.call(this, props);
     _defineProperty(_assertThisInitialized(_this), "onGetStepUpToken", function () {
       return _this.props.apiClient.getMfaStepUpToken({
         options: _this.props.auth,
         accessToken: _this.props.accessToken
+      }).then(function (res) {
+        return _this.setState({
+          response: res
+        });
       });
     });
+    _this.state = {
+      response: undefined
+    };
     return _this;
   }
-  _createClass(MfaStepUpView, [{
+  _createClass(MainView, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.onGetStepUpToken();
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this2 = this;
-      return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(StartStepUpMfaButton, {
+      var _this$props = this.props,
+        showStepUpStart = _this$props.showStepUpStart,
+        goTo = _this$props.goTo;
+      return this.state.response === undefined ? null : /*#__PURE__*/React__default.createElement("div", null, showStepUpStart ? /*#__PURE__*/React__default.createElement(StartStepUpMfaButton, {
         handler: this.onGetStepUpToken,
-        onSuccess: function onSuccess(data) {
-          return _this2.props.goTo('fa-selection', _objectSpread2({}, data));
+        onSuccess: function onSuccess(_) {
+          return goTo('fa-selection', _this2.state.response);
         }
-      }));
+      }) : /*#__PURE__*/React__default.createElement(FaSelectionView, _extends({}, this.state.response, this.props)));
     }
   }]);
-  return MfaStepUpView;
+  return MainView;
 }(React__default.Component);
 var FaSelectionView = /*#__PURE__*/function (_React$Component2) {
   _inherits(FaSelectionView, _React$Component2);
   var _super2 = _createSuper(FaSelectionView);
-  function FaSelectionView() {
+  function FaSelectionView(props) {
     var _this3;
     _classCallCheck(this, FaSelectionView);
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-    _this3 = _super2.call.apply(_super2, [this].concat(args));
+    _this3 = _super2.call(this, props);
     _defineProperty(_assertThisInitialized(_this3), "onChooseFa", function (factor) {
       return _this3.props.apiClient.startPasswordless(_objectSpread2(_objectSpread2({}, factor), {}, {
         stepUp: _this3.props.token
-      })).then(function (resp) {
-        return _objectSpread2(_objectSpread2({}, resp), factor);
+      })).then(function (res) {
+        return _this3.setState({
+          response: _objectSpread2(_objectSpread2({}, res), factor)
+        });
       });
     });
+    _this3.state = {
+      response: undefined
+    };
     return _this3;
   }
   _createClass(FaSelectionView, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.props.amr.length == 1) this.onChooseFa({
+        authType: this.props.amr[0]
+      });else this.setState({
+        response: {}
+      });
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this4 = this;
-      var _this$props = this.props,
-        amr = _this$props.amr,
-        showIntro = _this$props.showIntro,
-        i18n = _this$props.i18n;
-      return /*#__PURE__*/React__default.createElement("div", null, showIntro && /*#__PURE__*/React__default.createElement(Intro, null, i18n('mfa.select.factor')), /*#__PURE__*/React__default.createElement(StartPasswordlessForm, {
+      var _this$props2 = this.props,
+        amr = _this$props2.amr,
+        showIntro = _this$props2.showIntro,
+        i18n = _this$props2.i18n;
+      return this.state.response === undefined ? null : amr.length == 1 ? /*#__PURE__*/React__default.createElement(VerificationCodeView, _extends({}, this.state.response, this.props)) : /*#__PURE__*/React__default.createElement("div", null, showIntro && /*#__PURE__*/React__default.createElement(Intro, null, i18n('mfa.select.factor')), /*#__PURE__*/React__default.createElement(StartPasswordlessForm, {
         options: amr.map(function (factor) {
           return {
             key: factor,
@@ -11179,7 +11205,7 @@ var FaSelectionView = /*#__PURE__*/function (_React$Component2) {
         onSuccess: function onSuccess(data) {
           return _this4.props.goTo('verification-code', _objectSpread2(_objectSpread2({}, data), {}, {
             amr: amr
-          }));
+          }, _this4.state.response));
         }
       }));
     }
@@ -11192,8 +11218,8 @@ var VerificationCodeView = /*#__PURE__*/function (_React$Component3) {
   function VerificationCodeView() {
     var _this5;
     _classCallCheck(this, VerificationCodeView);
-    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-      args[_key3] = arguments[_key3];
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
     _this5 = _super3.call.apply(_super3, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this5), "handleSubmit", function (data) {
@@ -11221,15 +11247,16 @@ var VerificationCodeView = /*#__PURE__*/function (_React$Component3) {
   return VerificationCodeView;
 }(React__default.Component);
 var mfaStepUpWidget = createMultiViewWidget({
-  initialView: 'mfa-step-up',
+  initialView: 'main',
   views: {
-    'mfa-step-up': MfaStepUpView,
+    'main': MainView,
     'fa-selection': FaSelectionView,
     'verification-code': VerificationCodeView
   },
   prepare: function prepare(options) {
     return deepDefaults({}, options, {
-      showIntro: true
+      showIntro: true,
+      showStepUpStart: true
     });
   }
 });
@@ -11293,7 +11320,7 @@ var EmailEditorForm = createForm({
     validator: email
   })]
 });
-var MainView = /*#__PURE__*/function (_React$Component) {
+var MainView$1 = /*#__PURE__*/function (_React$Component) {
   _inherits(MainView, _React$Component);
   var _super = _createSuper(MainView);
   function MainView() {
@@ -11345,7 +11372,7 @@ var SuccessView = function SuccessView(_ref) {
 var emailEditorWidget = createMultiViewWidget({
   initialView: 'main',
   views: {
-    main: MainView,
+    main: MainView$1,
     success: SuccessView
   }
 });
@@ -11482,7 +11509,7 @@ var VerificationCodeInputForm$1 = createForm({
     type: 'text'
   })]
 });
-var MainView$1 = /*#__PURE__*/function (_React$Component) {
+var MainView$2 = /*#__PURE__*/function (_React$Component) {
   _inherits(MainView, _React$Component);
   var _super = _createSuper(MainView);
   function MainView() {
@@ -11564,12 +11591,12 @@ _defineProperty(VerificationCodeView$1, "defaultProps", {
 var phoneNumberEditorWidget = createMultiViewWidget({
   initialView: 'main',
   views: {
-    main: MainView$1,
+    main: MainView$2,
     verificationCode: VerificationCodeView$1
   }
 });
 
-var MainView$2 = /*#__PURE__*/function (_React$Component) {
+var MainView$3 = /*#__PURE__*/function (_React$Component) {
   _inherits(MainView, _React$Component);
   var _super = _createSuper(MainView);
   function MainView() {
@@ -11603,7 +11630,7 @@ var MainView$2 = /*#__PURE__*/function (_React$Component) {
   }]);
   return MainView;
 }(React__default.Component);
-_defineProperty(MainView$2, "defaultProps", {
+_defineProperty(MainView$3, "defaultProps", {
   onSuccess: function onSuccess() {},
   onError: function onError() {}
 });
@@ -11623,7 +11650,7 @@ var resolveCode = function resolveCode() {
 var passwordResetWidget = createMultiViewWidget({
   initialView: 'main',
   views: {
-    main: MainView$2,
+    main: MainView$3,
     success: SuccessView$1
   },
   prepare: function prepare(options) {
@@ -11656,7 +11683,7 @@ var VerificationCodeInputForm$2 = createForm({
     type: 'text'
   })]
 });
-var MainView$3 = /*#__PURE__*/function (_React$Component) {
+var MainView$4 = /*#__PURE__*/function (_React$Component) {
   _inherits(MainView, _React$Component);
   var _super = _createSuper(MainView);
   function MainView() {
@@ -11754,7 +11781,7 @@ var EmailSentView = function EmailSentView(_ref) {
 var passwordlessWidget = createMultiViewWidget({
   initialView: 'main',
   views: {
-    main: MainView$3,
+    main: MainView$4,
     emailSent: EmailSentView,
     verificationCode: VerificationCodeView$2
   },
@@ -12092,7 +12119,10 @@ var socialAccountsWidget = createMultiViewWidget({
       providers: config.socialProviders
     }, options), {}, {
       getAvailableProviders: function getAvailableProviders(identities) {
-        return difference(options.providers || config.socialProviders, identities.map(function (i) {
+        var providerNames = (options.providers || config.socialProviders).map(function (provider) {
+          return provider.split(':').shift();
+        });
+        return difference(providerNames, identities.map(function (i) {
           return i.provider;
         }));
       }
@@ -12289,7 +12319,7 @@ var PhoneNumberRegisteringCredentialForm = function PhoneNumberRegisteringCreden
 var DivCredentialBlock = withTheme(styled.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n    margin-left: ", "px;\n    margin-bottom: 5em;\n"])), function (props) {
   return props.theme.get('_blockInnerHeight');
 }));
-var MainView$4 = /*#__PURE__*/function (_React$Component) {
+var MainView$5 = /*#__PURE__*/function (_React$Component) {
   _inherits(MainView, _React$Component);
   var _super = _createSuper(MainView);
   function MainView() {
@@ -12331,7 +12361,8 @@ var MainView$4 = /*#__PURE__*/function (_React$Component) {
         showIntro = _this$props.showIntro,
         config = _this$props.config,
         showRemoveMfaCredentials = _this$props.showRemoveMfaCredentials,
-        credentials = _this$props.credentials;
+        credentials = _this$props.credentials,
+        requireMfaRegistration = _this$props.requireMfaRegistration;
       var PhoneNumberInputForm = PhoneNumberRegisteringCredentialForm(config);
       var phoneNumberCredentialRegistered = credentials.find(function (credential) {
         return credential.type === 'sms';
@@ -12339,7 +12370,9 @@ var MainView$4 = /*#__PURE__*/function (_React$Component) {
       var isEmailCredentialRegistered = credentials.some(function (credential) {
         return credential.type === 'email';
       });
-      return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(DivCredentialBlock, null, config.mfaEmailEnabled && /*#__PURE__*/React__default.createElement("div", null, showIntro && /*#__PURE__*/React__default.createElement(Intro, null, i18n('mfa.email.explain')), /*#__PURE__*/React__default.createElement(EmailRegisteringCredentialForm, {
+      return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(DivCredentialBlock, null, config.mfaEmailEnabled && !credentials.map(function (credential) {
+        return credential.type;
+      }).includes('email') && /*#__PURE__*/React__default.createElement("div", null, showIntro && /*#__PURE__*/React__default.createElement(Intro, null, requireMfaRegistration ? i18n('mfa.email.explain.required') : i18n('mfa.email.explain')), /*#__PURE__*/React__default.createElement(EmailRegisteringCredentialForm, {
         handler: this.onEmailRegistering,
         onSuccess: function onSuccess(data) {
           return _this2.props.goTo('verification-code', _objectSpread2(_objectSpread2({}, data), {}, {
@@ -12440,7 +12473,7 @@ var CredentialRemovedView = function CredentialRemovedView(_ref2) {
 var mfaCredentialsWidget = createMultiViewWidget({
   initialView: 'main',
   views: {
-    'main': MainView$4,
+    'main': MainView$5,
     'credential-registered': CredentialRegisteredView,
     'verification-code': VerificationCodeView$3,
     'credential-removed': CredentialRemovedView
@@ -12452,6 +12485,7 @@ var mfaCredentialsWidget = createMultiViewWidget({
     }).then(function (credentials) {
       return deepDefaults(_objectSpread2(_objectSpread2({
         showIntro: true,
+        requireMfaRegistration: false,
         showRemoveMfaCredentials: true
       }, options), credentials));
     });