@reachfive/identity-ui 1.14.0 → 1.15.0

package/CHANGELOG.md

@@ -7,6 +7,13 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+## [1.15.0] - 2022-02-22
+
+### Added
+
+- Add ReCaptcha V3 for authentication pages: forgot-password, signup, login-with-password
+- Add ReCaptcha V3 for passwordless page
+
 ## [1.14.0] - 2021-11-10
 
 ### Changed
@@ -76,7 +83,7 @@ Temporary revert the SDK Core dependency version to solve the login with PKCE in
 
 ## [1.11.2] - 2020-11-04
 
-### Features
+### Added
 
 A new check rule for password strength is now displayed on the signup view on
 the [showAuth](https://developer.reachfive.com/sdk-ui/showAuth.html) widget.
@@ -89,7 +96,7 @@ Revert the new check rule for password strength since the wordings are not yet d
 
 ## [1.11.0] - 2020-10-28
 
-### Features
+### Added
 
 New changes were made on the [showAuth](https://developer.reachfive.com/sdk-ui/showAuth.html) widget:
 
@@ -106,14 +113,14 @@ Revert the latest FIDO2 signup Features since it's breaking the style of Hosted
 
 ## [1.10.0] - 2020-10-16
 
-### Features
+### Added
 
 The [showAuth](https://developer.reachfive.com/sdk-ui/showAuth.html) widget can now handle signup with biometrics if
 the `allowWebAuthnSignup` option is enabled.
 
 ## [1.9.0] - 2020-09-16
 
-### Features
+### Added
 
 Always override account `opt-out` consents.
 
@@ -123,13 +130,13 @@ Fixes the CircleCi job to deploy a new version.
 
 ## [1.8.0] - 2020-07-22
 
-### Features
+### Added
 
 Add custom fields types (email & phone).
 
 ## [1.7.0] - 2020-07-08
 
-### Features
+### Added
 
 - The user can now set the device's name in
   the [showWebAuthnDevices](https://developer.reachfive.com/sdk-ui/showWebAuthnDevices.html) widget.
@@ -137,7 +144,7 @@ Add custom fields types (email & phone).
 
 ## [1.6.0] - 2020-07-07
 
-### Features
+### Added
 
 Display a friendly user error message on
 the [showWebAuthnDevices](https://developer.reachfive.com/sdk-ui/showWebAuthnDevices.html) widget when the user wants to
@@ -145,7 +152,7 @@ add a device already registered.
 
 ## [1.5.0] - 2020-07-01
 
-### Features
+### Added
 
 Add a new widget [showWebAuthnDevices](https://developer.reachfive.com/sdk-ui/showWebAuthnDevices.html) allowing the
 management of the user’s registered FIDO2 devices.
@@ -158,7 +165,7 @@ The UI SDK now uses the latest version of the Core SDK.
 
 ## [1.4.0] - 2020-06-15
 
-### Features
+### Added
 
 Add a new `allowWebAuthnLogin` option to the [showAuth](https://developer.reachfive.com/sdk-ui/showAuth.html) widget to
 allow a user to login with biometrics.
@@ -169,7 +176,7 @@ allow a user to login with biometrics.
 
 Call only the validation methods when the field is required or when the value is not empty.
 
-### Features
+### Added
 
 - Set the default value of the _Remember be_ to `false`.
 - Upgrade all the dependencies.
@@ -200,13 +207,13 @@ ReachFive UI SDK is out! 🚀
 
 ## [1.0.0-alpha.10] - 2020-02-19
 
-### Features
+### Added
 
 Improve the UX/UI of the password policy rules validation.
 
 ## [1.0.0-alpha.9] - 2020-02-10
 
-### Features
+### Added
 
 The _display password in clear text_ option can now be enabled on the password reset widget.
 
@@ -218,7 +225,7 @@ The UI SDK uses now the latest version of the Core SDK.
 
 ## [1.0.0-alpha.7] - 2020-02-06
 
-### Features
+### Added
 
 Add the `returnToAfterPasswordReset` parameter for reset password and the `returnToAfterEmailConfirmation` parameter for
 signup.
@@ -237,14 +244,14 @@ Passwords in the French dictionary were considered good enough while they weren'
 
 ## [1.0.0-alpha.4] - 2020-01-15
 
-### Features
+### Added
 
 - French weak passwords are now rejected by the password strength policies.
 - A UMD bundle is now generated at the build process. It will allow deploying the UI SDK on [unpkg](https://unpkg.com).
 
 ## [1.0.0-alpha.3] - 2020-01-07
 
-### Features
+### Added
 
 - Implement continuous integration pipelines set up with CircleCI (see
   the [CircleCI configuration file](.circleci/config.yml) for more details).
@@ -256,7 +263,7 @@ The eye icon is now correctly displayed in the Auth widget.
 
 ## [1.0.0-alpha.2] - 2019-11-06
 
-### Features
+### Added
 
 - A `data-testid` attribute was added to most of the HTML elements.
 - Handle the errors returned at the creation of a password non-compliant to the account's password policy.
@@ -265,7 +272,19 @@ 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.11.5...HEAD
+[Unreleased]: https://github.com/ReachFive/identity-web-ui-sdk/compare/v1.15.0...HEAD
+
+[1.15.0]: https://github.com/ReachFive/identity-web-ui-sdk/compare/v1.14.0...v1.15.0
+
+[1.14.0]: https://github.com/ReachFive/identity-web-ui-sdk/compare/v1.13.0...v1.14.0
+
+[1.13.0]: https://github.com/ReachFive/identity-web-ui-sdk/compare/v1.12.0...v1.13.0
+
+[1.12.0]: https://github.com/ReachFive/identity-web-ui-sdk/compare/v1.11.7...v1.12.0
+
+[1.11.7]: https://github.com/ReachFive/identity-web-ui-sdk/compare/v1.11.6...v1.11.7
+
+[1.11.6]: https://github.com/ReachFive/identity-web-ui-sdk/compare/v1.11.5...v1.11.6
 
 [1.11.5]: https://github.com/ReachFive/identity-web-ui-sdk/compare/v1.11.4...v1.11.5
 

package/cjs/identity-ui.js

@@ -9343,6 +9343,97 @@ function identifierField(props, config) {
   }));
 }
 
+var ReCaptcha = function ReCaptcha() {
+  _classCallCheck(this, ReCaptcha);
+};
+
+_defineProperty(ReCaptcha, "getRecaptchaToken", /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(siteKey, action) {
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return window.grecaptcha.execute(siteKey, {
+              action: action
+            });
+
+          case 2:
+            return _context.abrupt("return", _context.sent);
+
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function (_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}());
+
+_defineProperty(ReCaptcha, "handle", /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(data, conf, callback, action) {
+    var captchaToken;
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!conf.recaptcha_enabled) {
+              _context2.next = 13;
+              break;
+            }
+
+            _context2.prev = 1;
+            _context2.next = 4;
+            return ReCaptcha.getRecaptchaToken(conf.recaptcha_site_key, action);
+
+          case 4:
+            captchaToken = _context2.sent;
+            return _context2.abrupt("return", callback(_objectSpread2(_objectSpread2({}, data), {}, {
+              captchaToken: captchaToken
+            })));
+
+          case 8:
+            _context2.prev = 8;
+            _context2.t0 = _context2["catch"](1);
+            return _context2.abrupt("return", Promise.reject({
+              errorUserMsg: "Error recaptcha",
+              errorMessageKey: "recaptcha.error"
+            }));
+
+          case 11:
+            _context2.next = 14;
+            break;
+
+          case 13:
+            return _context2.abrupt("return", callback(data));
+
+          case 14:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2, null, [[1, 8]]);
+  }));
+
+  return function (_x3, _x4, _x5, _x6) {
+    return _ref2.apply(this, arguments);
+  };
+}());
+function importGoogleRecaptchaScript(site_key) {
+  var script = document.createElement("script");
+  script.src = "https://www.google.com/recaptcha/api.js?render=" + site_key;
+  document.body.appendChild(script);
+}
+function extractCaptchaTokenFromData(data) {
+  var token = data.captchaToken;
+  delete data.captchaToken;
+  return token;
+}
+
 function _templateObject$7() {
   var data = _taggedTemplateLiteral(["\n    margin-bottom: ", "px;\n    text-align: right;\n    ", ";\n"]);
 
@@ -9414,9 +9505,10 @@ var LoginView = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
-    _defineProperty(_assertThisInitialized(_this), "handleLogin", function (data) {
+    _defineProperty(_assertThisInitialized(_this), "callback", function (data) {
       var specializedData = specializeIdentifierData(data);
       return _this.props.apiClient.loginWithPassword(_objectSpread2(_objectSpread2({}, specializedData), {}, {
+        captchaToken: data.captchaToken,
         auth: _objectSpread2(_objectSpread2({}, specializedData.auth), _this.props.auth)
       }));
     });
@@ -9425,8 +9517,15 @@ var LoginView = /*#__PURE__*/function (_React$Component) {
   }
 
   _createClass(LoginView, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      importGoogleRecaptchaScript(this.props.recaptcha_site_key);
+    }
+  }, {
     key: "render",
     value: function render() {
+      var _this2 = this;
+
       var _this$props = this.props,
           socialProviders = _this$props.socialProviders,
           _this$props$session = _this$props.session,
@@ -9445,7 +9544,9 @@ var LoginView = /*#__PURE__*/function (_React$Component) {
         showForgotPassword: this.props.allowForgotPassword,
         canShowPassword: this.props.canShowPassword,
         defaultIdentifier: defaultIdentifier,
-        handler: this.handleLogin,
+        handler: function handler(data) {
+          return ReCaptcha.handle(data, _this2.props, _this2.callback, "login");
+        },
         config: this.props.config
       }), this.props.allowSignup && /*#__PURE__*/React__default.createElement(Alternative, null, /*#__PURE__*/React__default.createElement("span", null, i18n('login.signupLinkPrefix')), "\xA0", /*#__PURE__*/React__default.createElement(Link, {
         target: "signup"
@@ -9791,9 +9892,10 @@ var LoginView$1 = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
-    _defineProperty(_assertThisInitialized(_this), "handleLogin", function (data) {
+    _defineProperty(_assertThisInitialized(_this), "callback", function (data) {
       var specializedData = specializeIdentifierData(data);
       return _this.props.apiClient.loginWithPassword(_objectSpread2(_objectSpread2({}, specializedData), {}, {
+        captchaToken: data.captchaToken,
         auth: _objectSpread2(_objectSpread2({}, specializedData.auth), _this.props.auth)
       }));
     });
@@ -9802,8 +9904,15 @@ var LoginView$1 = /*#__PURE__*/function (_React$Component) {
   }
 
   _createClass(LoginView, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      importGoogleRecaptchaScript(this.props.recaptcha_site_key);
+    }
+  }, {
     key: "render",
     value: function render() {
+      var _this2 = this;
+
       var i18n = this.props.i18n;
       return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Heading, null, i18n('login.title')), /*#__PURE__*/React__default.createElement(LoginWithPasswordForm, {
         username: this.props.username,
@@ -9811,7 +9920,9 @@ var LoginView$1 = /*#__PURE__*/function (_React$Component) {
         showRememberMe: this.props.showRememberMe,
         showForgotPassword: this.props.allowForgotPassword,
         canShowPassword: this.props.canShowPassword,
-        handler: this.handleLogin,
+        handler: function handler(data) {
+          return ReCaptcha.handle(data, _this2.props, _this2.callback, "login");
+        },
         config: this.props.config
       }), /*#__PURE__*/React__default.createElement(Alternative, null, /*#__PURE__*/React__default.createElement(Link, {
         target: "login-with-web-authn"
@@ -11308,8 +11419,10 @@ var PasswordSignupForm = /*#__PURE__*/function (_React$Component) {
       blacklist: []
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleSignup", function (data) {
+    _defineProperty(_assertThisInitialized(_this), "callback", function (data) {
+      var captchaToken = extractCaptchaTokenFromData(data);
       return _this.props.apiClient.signup({
+        captchaToken: captchaToken,
         data: snakeCaseProperties(data),
         auth: _this.props.auth,
         redirectUrl: _this.props && _this.props.redirectUrl,
@@ -11339,8 +11452,15 @@ var PasswordSignupForm = /*#__PURE__*/function (_React$Component) {
   }
 
   _createClass(PasswordSignupForm, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      importGoogleRecaptchaScript(this.props.recaptcha_site_key);
+    }
+  }, {
     key: "render",
     value: function render() {
+      var _this2 = this;
+
       var _this$props = this.props,
           _this$props$beforeSig = _this$props.beforeSignup,
           beforeSignup = _this$props$beforeSig === void 0 ? function (x) {
@@ -11371,7 +11491,9 @@ var PasswordSignupForm = /*#__PURE__*/function (_React$Component) {
         beforeSubmit: beforeSignup,
         onFieldChange: this.refreshBlacklist,
         sharedProps: sharedProps,
-        handler: this.handleSignup
+        handler: function handler(data) {
+          return ReCaptcha.handle(data, _this2.props, _this2.callback, "signup");
+        }
       });
     }
   }]);
@@ -11529,10 +11651,29 @@ var skipError = function skipError(err) {
 };
 
 var enhance = recompose.withHandlers({
-  handleSubmit: function handleSubmit(_ref) {
+  callback: function callback(_ref) {
     var apiClient = _ref.apiClient,
         redirectUrl = _ref.redirectUrl,
-        returnToAfterPasswordReset = _ref.returnToAfterPasswordReset;
+        returnToAfterPasswordReset = _ref.returnToAfterPasswordReset,
+        recaptcha_enabled = _ref.recaptcha_enabled,
+        recaptcha_site_key = _ref.recaptcha_site_key;
+    return function (data) {
+      return ReCaptcha.handle(_objectSpread2(_objectSpread2({}, data), {}, {
+        redirectUrl: redirectUrl,
+        returnToAfterPasswordReset: returnToAfterPasswordReset
+      }), {
+        apiClient: apiClient,
+        redirectUrl: redirectUrl,
+        returnToAfterPasswordReset: returnToAfterPasswordReset,
+        recaptcha_enabled: recaptcha_enabled,
+        recaptcha_site_key: recaptcha_site_key
+      }, apiClient.requestPasswordReset, "forgot_password");
+    };
+  },
+  handleSubmit: function handleSubmit(_ref2) {
+    var apiClient = _ref2.apiClient,
+        redirectUrl = _ref2.redirectUrl,
+        returnToAfterPasswordReset = _ref2.returnToAfterPasswordReset;
     return function (data) {
       return apiClient.requestPasswordReset(_objectSpread2(_objectSpread2({}, data), {}, {
         redirectUrl: redirectUrl,
@@ -11541,17 +11682,18 @@ var enhance = recompose.withHandlers({
     };
   }
 });
-var ForgotPasswordView = enhance(function (_ref2) {
-  var i18n = _ref2.i18n,
-      goTo = _ref2.goTo,
-      allowLogin = _ref2.allowLogin,
-      handleSubmit = _ref2.handleSubmit,
-      displaySafeErrorMessage = _ref2.displaySafeErrorMessage,
-      showLabels = _ref2.showLabels,
-      allowWebAuthnLogin = _ref2.allowWebAuthnLogin;
-  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Heading, null, i18n('forgotPassword.title')), /*#__PURE__*/React__default.createElement(Intro, null, i18n('forgotPassword.prompt')), /*#__PURE__*/React__default.createElement(ForgotPasswordForm, {
+var ForgotPasswordView = enhance(function (_ref3) {
+  var i18n = _ref3.i18n,
+      goTo = _ref3.goTo,
+      allowLogin = _ref3.allowLogin,
+      callback = _ref3.callback,
+      displaySafeErrorMessage = _ref3.displaySafeErrorMessage,
+      showLabels = _ref3.showLabels,
+      allowWebAuthnLogin = _ref3.allowWebAuthnLogin,
+      recaptcha_site_key = _ref3.recaptcha_site_key;
+  return /*#__PURE__*/React__default.createElement("div", null, importGoogleRecaptchaScript(recaptcha_site_key), /*#__PURE__*/React__default.createElement(Heading, null, i18n('forgotPassword.title')), /*#__PURE__*/React__default.createElement(Intro, null, i18n('forgotPassword.prompt')), /*#__PURE__*/React__default.createElement(ForgotPasswordForm, {
     showLabels: showLabels,
-    handler: handleSubmit,
+    handler: callback,
     onSuccess: function onSuccess() {
       return goTo('forgot-password-success');
     },
@@ -11560,10 +11702,10 @@ var ForgotPasswordView = enhance(function (_ref2) {
     target: allowWebAuthnLogin ? 'login-with-web-authn' : 'login'
   }, i18n('forgotPassword.backToLoginLink'))));
 });
-var ForgotPasswordSuccessView = function ForgotPasswordSuccessView(_ref3) {
-  var i18n = _ref3.i18n,
-      allowLogin = _ref3.allowLogin,
-      allowWebAuthnLogin = _ref3.allowWebAuthnLogin;
+var ForgotPasswordSuccessView = function ForgotPasswordSuccessView(_ref4) {
+  var i18n = _ref4.i18n,
+      allowLogin = _ref4.allowLogin,
+      allowWebAuthnLogin = _ref4.allowWebAuthnLogin;
   return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Heading, null, i18n('forgotPassword.title')), /*#__PURE__*/React__default.createElement(Info, null, i18n('forgotPassword.successMessage')), allowLogin && /*#__PURE__*/React__default.createElement(Alternative, null, /*#__PURE__*/React__default.createElement(Link, {
     target: allowWebAuthnLogin ? 'login-with-web-authn' : 'login'
   }, i18n('back'))));
@@ -12379,7 +12521,7 @@ var MainView$3 = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
-    _defineProperty(_assertThisInitialized(_this), "handleSubmit", function (data) {
+    _defineProperty(_assertThisInitialized(_this), "callback", function (data) {
       return _this.props.apiClient.startPasswordless(data, _this.props.auth).then(function (_) {
         return data;
       });
@@ -12393,8 +12535,15 @@ var MainView$3 = /*#__PURE__*/function (_React$Component) {
   }
 
   _createClass(MainView, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      importGoogleRecaptchaScript(this.props.recaptcha_site_key);
+    }
+  }, {
     key: "render",
     value: function render() {
+      var _this2 = this;
+
       var _this$props = this.props,
           i18n = _this$props.i18n,
           showSocialLogins = _this$props.showSocialLogins,
@@ -12409,10 +12558,14 @@ var MainView$3 = /*#__PURE__*/function (_React$Component) {
       }), showSocialLogins && socialProviders && socialProviders.length > 0 && /*#__PURE__*/React__default.createElement(Separator, {
         text: i18n('or')
       }), isEmail && showIntro && /*#__PURE__*/React__default.createElement(Intro, null, i18n('passwordless.intro')), isEmail && /*#__PURE__*/React__default.createElement(EmailInputForm, {
-        handler: this.handleSubmit,
+        handler: function handler(data) {
+          return ReCaptcha.handle(data, _this2.props, _this2.callback, "passwordless_email");
+        },
         onSuccess: this.handleSuccess
       }), !isEmail && showIntro && /*#__PURE__*/React__default.createElement(Intro, null, i18n('passwordless.sms.intro')), !isEmail && /*#__PURE__*/React__default.createElement(PhoneNumberInputForm, {
-        handler: this.handleSubmit,
+        handler: function handler(data) {
+          return ReCaptcha.handle(data, _this2.props, _this2.callback, "passwordless_phone");
+        },
         onSuccess: this.handleSuccess
       }));
     }
@@ -12427,7 +12580,7 @@ var VerificationCodeView$1 = /*#__PURE__*/function (_React$Component2) {
   var _super2 = _createSuper(VerificationCodeView);
 
   function VerificationCodeView() {
-    var _this2;
+    var _this3;
 
     _classCallCheck(this, VerificationCodeView);
 
@@ -12435,26 +12588,30 @@ var VerificationCodeView$1 = /*#__PURE__*/function (_React$Component2) {
       args[_key2] = arguments[_key2];
     }
 
-    _this2 = _super2.call.apply(_super2, [this].concat(args));
+    _this3 = _super2.call.apply(_super2, [this].concat(args));
 
-    _defineProperty(_assertThisInitialized(_this2), "handleSubmit", function (data) {
-      var _this2$props = _this2.props,
-          apiClient = _this2$props.apiClient,
-          auth = _this2$props.auth,
-          phoneNumber = _this2$props.phoneNumber;
+    _defineProperty(_assertThisInitialized(_this3), "handleSubmit", function (data) {
+      var _this3$props = _this3.props,
+          apiClient = _this3$props.apiClient,
+          auth = _this3$props.auth,
+          phoneNumber = _this3$props.phoneNumber;
       return apiClient.verifyPasswordless(_objectSpread2({
         phoneNumber: phoneNumber
       }, data), auth);
     });
 
-    return _this2;
+    return _this3;
   }
 
   _createClass(VerificationCodeView, [{
     key: "render",
     value: function render() {
+      var _this4 = this;
+
       return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Info, null, this.props.i18n('passwordless.sms.verification.intro')), /*#__PURE__*/React__default.createElement(VerificationCodeInputForm$1, {
-        handler: this.handleSubmit
+        handler: function handler(data) {
+          return ReCaptcha.handle(data, _this4.props, _this4.callback, "verify_passwordless_sms");
+        }
       }));
     }
   }]);