@reachfive/identity-ui 1.13.0 → 1.16.0

package/es/identity-ui.js

@@ -9,8 +9,8 @@ import { Transition } from 'react-transition-group';
 import classes from 'classnames';
 import { Remarkable } from 'remarkable';
 import validator, { isISO8601, isNumeric } from 'validator';
-import { isEqual } from 'lodash-es';
 import { AsYouType, format as format$1, isValidNumber, parse } from 'libphonenumber-js';
+import { isEqual } from 'lodash-es';
 import { isLower, isUpper, isDigit } from 'char-info';
 import zxcvbn from '@reachfive/zxcvbn';
 
@@ -4068,10 +4068,15 @@ function multiViewWidget(_ref3) {
   }), _temp;
 }
 
-/* Returns whether a form value has been set with a valid value */
+/* Returns whether a form value has been set with a valid value.
+* If the user's input has been enriched as an object, raw input is expected
+* to be in a raw property field (named 'raw' by default).
+*/
 
 function isValued(v) {
-  return v !== null && v !== undefined && v !== '' && !Number.isNaN(v) && (Array.isArray(v) ? v.length > 0 : true);
+  var rawProperty = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'raw';
+  var unwrap = isObject(v) ? v[rawProperty] : v;
+  return unwrap !== null && unwrap !== undefined && unwrap !== '' && !Number.isNaN(unwrap) && (Array.isArray(unwrap) ? unwrap.length > 0 : true);
 }
 function formatISO8601Date(year, month, day) {
   if (isValued(year) && isValued(month) && isValued(day)) {
@@ -4080,6 +4085,15 @@ function formatISO8601Date(year, month, day) {
 
   return null;
 }
+function specializeIdentifierData(data) {
+  return !!data.identifier ? _objectSpread2(_objectSpread2({}, data), {}, {
+    identifier: undefined
+  }, /@/.test(data.identifier) ? {
+    email: data.identifier
+  } : {
+    phoneNumber: data.identifier.replace(/\s+/g, '')
+  }) : data;
+}
 
 var CompoundValidator = /*#__PURE__*/function () {
   function CompoundValidator(current, next) {
@@ -4118,7 +4132,9 @@ var Validator = /*#__PURE__*/function () {
     _classCallCheck(this, Validator);
 
     this.rule = rule;
-    this.hint = hint;
+    this.hint = !isFunction(hint) ? function (_) {
+      return hint;
+    } : hint;
     this.parameters = parameters;
   }
 
@@ -4127,10 +4143,13 @@ var Validator = /*#__PURE__*/function () {
     value: function create(i18n) {
       var _this = this;
 
-      var errorMessage = i18n("validation.".concat(this.hint), this.parameters);
+      var errorMessage = function errorMessage(v) {
+        return i18n("validation.".concat(_this.hint(v)), _this.parameters);
+      };
+
       return function (value, ctx) {
         return !_this.rule(value, ctx) && {
-          error: errorMessage
+          error: errorMessage(value)
         };
       };
     }
@@ -8803,6 +8822,8 @@ var createField = function createField(_ref) {
       return !isEmpty(x) ? x : null;
     }
   } : _ref$format,
+      _ref$rawProperty = _ref.rawProperty,
+      rawProperty = _ref$rawProperty === void 0 ? 'raw' : _ref$rawProperty,
       component = _ref.component,
       _ref$extendedParams = _ref.extendedParams,
       extendedParams = _ref$extendedParams === void 0 ? {} : _ref$extendedParams;
@@ -8836,7 +8857,7 @@ var createField = function createField(_ref) {
         },
         initialize: function initialize(model) {
           var modelValue = mapping.bind(model);
-          var initValue = isValued(modelValue) ? modelValue : defaultValue;
+          var initValue = isValued(modelValue, rawProperty) ? modelValue : defaultValue;
           return {
             value: format.bind(initValue),
             isDirty: false
@@ -9103,6 +9124,310 @@ function checkboxField(config) {
   }));
 }
 
+/*
+* All possible Identifier data is in the `value` prop, they should all be preserved when the type changes.
+* {
+*   raw: string,
+*   type: 'tel' | 'email' | 'other',
+*   country: string,
+*   formatted: string,
+*   isValid: boolean,
+* }
+*/
+
+function specializeRawIdentifier(inputValue) {
+  var telCall = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function (_) {
+    return undefined;
+  };
+  var emailCall = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function (_) {
+    return undefined;
+  };
+  var otherCall = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : function (_) {
+    return undefined;
+  };
+
+  if (/^\+?[0-9]+/.test(inputValue)) {
+    return _objectSpread2(_objectSpread2({
+      raw: inputValue
+    }, telCall(inputValue)), {}, {
+      type: 'tel'
+    });
+  } else if (/@/.test(inputValue)) {
+    return _objectSpread2(_objectSpread2({
+      raw: inputValue
+    }, emailCall(inputValue)), {}, {
+      type: 'email'
+    });
+  } else {
+    return _objectSpread2(_objectSpread2({
+      raw: inputValue
+    }, otherCall(inputValue)), {}, {
+      type: 'text'
+    });
+  }
+}
+
+function specializeRefinedIdentifier(identifier) {
+  var telCall = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function (x) {
+    return x;
+  };
+  var emailCall = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function (x) {
+    return x;
+  };
+  var otherCall = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : function (x) {
+    return x;
+  };
+  if (identifier.type === 'tel') return telCall(identifier);else if (identifier.type === 'email') return emailCall(identifier);else return otherCall(identifier);
+}
+
+var IdentifierField = /*#__PURE__*/function (_React$Component) {
+  _inherits(IdentifierField, _React$Component);
+
+  var _super = _createSuper(IdentifierField);
+
+  function IdentifierField() {
+    var _this;
+
+    _classCallCheck(this, IdentifierField);
+
+    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));
+
+    _defineProperty(_assertThisInitialized(_this), "asYouType", function (inputValue) {
+      var country = _this.props.value.country;
+      var phone = new AsYouType(country).input(inputValue);
+      var formatted = format$1(phone, country, 'International');
+      var isValid = isValidNumber(phone, country);
+      return {
+        country: country,
+        formatted: formatted,
+        isValid: isValid,
+        raw: phone
+      };
+    });
+
+    return _this;
+  }
+
+  _createClass(IdentifierField, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$props$value = this.props.value,
+          userInput = _this$props$value.userInput,
+          country = _this$props$value.country;
+
+      try {
+        var parsed = parse(userInput, country);
+        var phoneValue = country === parsed.country ? format$1(parsed, 'National') : userInput;
+        this.asYouType(phoneValue);
+      } catch (e) {}
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.unmounted = true;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          path = _this$props.path,
+          value = _this$props.value,
+          _this$props$validatio = _this$props.validation,
+          validation = _this$props$validatio === void 0 ? {} : _this$props$validatio,
+          inputId = _this$props.inputId,
+          _this$props$required = _this$props.required,
+          required = _this$props$required === void 0 ? true : _this$props$required,
+          label = _this$props.label,
+          _this$props$placehold = _this$props.placeholder,
+          placeholder = _this$props$placehold === void 0 ? label : _this$props$placehold,
+          readOnly = _this$props.readOnly;
+      return /*#__PURE__*/React__default.createElement(FormGroup, _extends({
+        inputId: inputId,
+        labelText: label
+      }, pick(validation, 'error'), {
+        showLabel: this.props.showLabel
+      }), /*#__PURE__*/React__default.createElement(Input, {
+        id: inputId,
+        name: path,
+        type: value.type,
+        value: value.raw || '',
+        placeholder: placeholder,
+        title: label,
+        required: required,
+        readOnly: readOnly,
+        hasError: !!validation.error,
+        onChange: function onChange(event) {
+          return _this2.props.onChange({
+            value: _objectSpread2(_objectSpread2({}, _this2.props.value), specializeRawIdentifier(event.target.value, _this2.asYouType))
+          });
+        },
+        onBlur: function onBlur() {
+          return _this2.props.onChange({
+            isDirty: true
+          });
+        },
+        "data-testid": path
+      }));
+    }
+  }]);
+
+  return IdentifierField;
+}(React__default.Component);
+
+function identifierField(props, config) {
+  return createField(_objectSpread2(_objectSpread2({}, props), {}, {
+    key: 'identifier',
+    label: 'identifier',
+    format: {
+      bind: function bind(x) {
+        return specializeRawIdentifier(x, function (_) {
+          return {
+            country: config.countryCode,
+            isValid: true
+          };
+        }, function (_) {
+          return {
+            country: config.countryCode,
+            isValid: true
+          };
+        }, function (_) {
+          return {
+            country: config.countryCode,
+            isValid: true
+          };
+        });
+      },
+      unbind: function unbind(x) {
+        return specializeRefinedIdentifier(x, function (v) {
+          return v.formatted || v.raw;
+        }, function (v) {
+          return v.raw;
+        }, function (v) {
+          return v.raw;
+        });
+      }
+    },
+    validator: new Validator({
+      rule: function rule(value) {
+        return specializeRefinedIdentifier(value, function (v) {
+          return v.isValid;
+        }, function (v) {
+          return email.rule(v.raw);
+        }, function (_) {
+          return false;
+        });
+      },
+      hint: function hint(value) {
+        return specializeRefinedIdentifier(value, function (_) {
+          return 'phone';
+        }, function (_) {
+          return 'email';
+        }, function (_) {
+          return 'identifier';
+        });
+      }
+    }),
+    component: IdentifierField
+  }));
+}
+
+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"]);
 
@@ -9120,19 +9445,22 @@ var ForgotPasswordWrapper = withTheme(styled.div(_templateObject$7(), function (
 var LoginForm = createForm({
   prefix: 'r5-login-',
   fields: function fields(_ref) {
-    var _ref$showEmail = _ref.showEmail,
-        showEmail = _ref$showEmail === void 0 ? true : _ref$showEmail,
+    var _ref$showIdentifier = _ref.showIdentifier,
+        showIdentifier = _ref$showIdentifier === void 0 ? true : _ref$showIdentifier,
         showRememberMe = _ref.showRememberMe,
         canShowPassword = _ref.canShowPassword,
         showForgotPassword = _ref.showForgotPassword,
-        defaultEmail = _ref.defaultEmail,
-        i18n = _ref.i18n;
-    return [showEmail && simpleField({
+        defaultIdentifier = _ref.defaultIdentifier,
+        i18n = _ref.i18n,
+        config = _ref.config;
+    return [showIdentifier && config.sms ? identifierField({
+      defaultValue: defaultIdentifier
+    }, config) : simpleField({
       key: 'email',
       label: 'email',
       type: 'email',
       autoComplete: 'email',
-      defaultValue: defaultEmail,
+      defaultValue: defaultIdentifier,
       validator: email
     }), simplePasswordField({
       key: 'password',
@@ -9171,9 +9499,11 @@ var LoginView = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
-    _defineProperty(_assertThisInitialized(_this), "handleLogin", function (data) {
-      return _this.props.apiClient.loginWithPassword(_objectSpread2(_objectSpread2({}, data), {}, {
-        auth: _objectSpread2(_objectSpread2({}, data.auth), _this.props.auth)
+    _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)
       }));
     });
 
@@ -9181,14 +9511,21 @@ 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,
           session = _this$props$session === void 0 ? {} : _this$props$session,
           i18n = _this$props.i18n;
-      var defaultEmail = session.lastLoginType === 'password' ? session.email : null;
+      var defaultIdentifier = session.lastLoginType === 'password' ? session.email : null;
       return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Heading, null, i18n('login.title')), socialProviders && socialProviders.length > 0 && /*#__PURE__*/React__default.createElement(SocialButtons$1, {
         providers: socialProviders,
         auth: this.props.auth,
@@ -9200,8 +9537,11 @@ var LoginView = /*#__PURE__*/function (_React$Component) {
         showRememberMe: this.props.showRememberMe,
         showForgotPassword: this.props.allowForgotPassword,
         canShowPassword: this.props.canShowPassword,
-        defaultEmail: defaultEmail,
-        handler: this.handleLogin
+        defaultIdentifier: defaultIdentifier,
+        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"
       }, i18n('login.signupLink'))));
@@ -9383,15 +9723,18 @@ var WebAuthnSignupViewButtons = styled(function (_ref3) {
 var LoginWithWebAuthnForm = createForm({
   prefix: 'r5-login-',
   fields: function fields(_ref) {
-    var _ref$showEmail = _ref.showEmail,
-        showEmail = _ref$showEmail === void 0 ? true : _ref$showEmail,
-        defaultEmail = _ref.defaultEmail;
-    return [showEmail && simpleField({
+    var _ref$showIdentifier = _ref.showIdentifier,
+        showIdentifier = _ref$showIdentifier === void 0 ? true : _ref$showIdentifier,
+        defaultIdentifier = _ref.defaultIdentifier,
+        config = _ref.config;
+    return [showIdentifier && config.sms ? identifierField({
+      defaultValue: defaultIdentifier
+    }, config) : simpleField({
       key: 'email',
       label: 'email',
       type: 'email',
       autoComplete: 'email',
-      defaultValue: defaultEmail,
+      defaultValue: defaultIdentifier,
       validator: email
     })];
   },
@@ -9415,14 +9758,17 @@ var LoginWithWebAuthnView = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _defineProperty(_assertThisInitialized(_this), "handleWebAuthnLogin", function (data) {
-      return _this.props.apiClient.loginWithWebAuthn(_objectSpread2(_objectSpread2({}, data), {}, {
-        auth: _objectSpread2(_objectSpread2({}, data.auth), _this.props.auth)
+      var specializedData = specializeIdentifierData(data);
+      return _this.props.apiClient.loginWithWebAuthn(_objectSpread2(_objectSpread2({}, specializedData), {}, {
+        auth: _objectSpread2(_objectSpread2({}, specializedData.auth), _this.props.auth)
       }));
     });
 
     _defineProperty(_assertThisInitialized(_this), "redirectToPasswordLoginView", function (data) {
+      var username = data.identifier || data.email;
+
       _this.props.goTo('login-with-password', {
-        username: data.email
+        username: username
       });
     });
 
@@ -9437,7 +9783,7 @@ var LoginWithWebAuthnView = /*#__PURE__*/function (_React$Component) {
           _this$props$session = _this$props.session,
           session = _this$props$session === void 0 ? {} : _this$props$session,
           i18n = _this$props.i18n;
-      var defaultEmail = session.lastLoginType === 'password' ? session.email : null;
+      var defaultIdentifier = session.lastLoginType === 'password' ? session.email : null;
 
       var webAuthnButtons = function webAuthnButtons(disabled, handleClick) {
         return /*#__PURE__*/React__default.createElement(WebAuthnLoginViewButtons, {
@@ -9455,10 +9801,11 @@ var LoginWithWebAuthnView = /*#__PURE__*/function (_React$Component) {
         text: i18n('or')
       }), /*#__PURE__*/React__default.createElement(LoginWithWebAuthnForm, {
         showLabels: this.props.showLabels,
-        defaultEmail: defaultEmail,
+        defaultIdentifier: defaultIdentifier,
         handler: this.handleWebAuthnLogin,
         redirect: this.redirectToPasswordLoginView,
-        webAuthnButtons: webAuthnButtons
+        webAuthnButtons: webAuthnButtons,
+        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"
       }, i18n('login.signupLink'))));
@@ -9489,8 +9836,13 @@ var LoginWithPasswordForm = createForm({
         showRememberMe = _ref.showRememberMe,
         canShowPassword = _ref.canShowPassword,
         showForgotPassword = _ref.showForgotPassword,
-        i18n = _ref.i18n;
-    return [simpleField({
+        i18n = _ref.i18n,
+        config = _ref.config;
+    return [config.sms ? identifierField({
+      key: 'identifier',
+      defaultValue: username,
+      readOnly: true
+    }, config) : simpleField({
       key: 'email',
       label: 'email',
       type: 'email',
@@ -9534,9 +9886,11 @@ var LoginView$1 = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
-    _defineProperty(_assertThisInitialized(_this), "handleLogin", function (data) {
-      return _this.props.apiClient.loginWithPassword(_objectSpread2(_objectSpread2({}, data), {}, {
-        auth: _objectSpread2(_objectSpread2({}, data.auth), _this.props.auth)
+    _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)
       }));
     });
 
@@ -9544,8 +9898,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,
@@ -9553,7 +9914,10 @@ 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"
       }, i18n('login.password.userAnotherIdentifier'))));
@@ -10173,7 +10537,7 @@ var PhoneNumberField = /*#__PURE__*/function (_React$Component) {
       _this.props.onChange({
         value: {
           country: country,
-          phone: phone,
+          raw: phone,
           formatted: formatted,
           isValid: isValid
         }
@@ -10187,12 +10551,12 @@ var PhoneNumberField = /*#__PURE__*/function (_React$Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this$props$value = this.props.value,
-          phone = _this$props$value.phone,
+          raw = _this$props$value.raw,
           country = _this$props$value.country;
 
       try {
-        var parsed = parse(phone, country);
-        var phoneValue = country === parsed.country ? format$1(parsed, 'National') : phone;
+        var parsed = parse(raw, country);
+        var phoneValue = country === parsed.country ? format$1(parsed, 'National') : raw;
         this.asYouType(phoneValue);
       } catch (e) {}
     }
@@ -10226,7 +10590,7 @@ var PhoneNumberField = /*#__PURE__*/function (_React$Component) {
         id: inputId,
         name: path,
         type: "tel",
-        value: value.phone || '',
+        value: value.raw || '',
         placeholder: placeholder,
         title: label,
         required: required,
@@ -10255,12 +10619,12 @@ function phoneNumberField(props, config) {
       bind: function bind(x) {
         return {
           country: config.countryCode,
-          phone: x,
+          raw: x,
           isValid: true
         };
       },
       unbind: function unbind(x) {
-        return x.formatted || x.phone;
+        return x.formatted || x.raw;
       }
     },
     validator: new Validator({
@@ -10756,11 +11120,13 @@ function consentField(config) {
       unbind: function unbind(x) {
         return {
           granted: x,
-          consentType: config.type
+          consentType: config.type,
+          consentVersion: config.extendedParams.version
         };
       }
     },
     validator: config.required ? checked : empty,
+    rawProperty: 'granted',
     component: ConsentField
   }));
 }
@@ -10926,15 +11292,31 @@ function customFieldComponent(customField, cfg) {
   }
 }
 
-function consentFieldComponent(consent, fieldConfig) {
+function consentFieldComponent(consent, fieldConfig, versionIdPath, language) {
   if (fieldConfig.errorArchivedConsents && consent.status === 'archived') {
     throw new UserError("The '".concat(consent.key, "' consent is archived and cannot be displayed."));
+  } // If the version ID is not defined in the path, get the latest version ID
+
+
+  var versionId = parseInt(versionIdPath || Math.max.apply(Math, _toConsumableArray(Object.values(consent.versions.map(function (v) {
+    return v.versionId;
+  })))));
+  var version = consent.versions.find(function (version) {
+    return version.versionId === versionId;
+  });
+
+  if (!version) {
+    throw new UserError("Unknown version ID n\xB0".concat(versionId, " of consent '").concat(consent.key, "'."));
   }
 
   var baseConfig = _objectSpread2(_objectSpread2({}, fieldConfig), {}, {
-    label: consent.title,
+    label: version.title,
     extendedParams: {
-      description: consent.description,
+      version: {
+        versionId: versionId,
+        language: language
+      },
+      description: version.description,
       consentCannotBeGranted: !fieldConfig.errorArchivedConsents && consent.status === 'archived'
     },
     type: consent.consentType,
@@ -10952,7 +11334,7 @@ var findCustomField = function findCustomField(config, camelPath) {
 };
 
 var findConsentField = function findConsentField(config, camelPath) {
-  return find(config.consents, function (f) {
+  return find(config.consentsVersions, function (f) {
     var fieldCamelPath = camelCase(f.key);
     return camelPath === fieldCamelPath || camelPath === "consents.".concat(fieldCamelPath);
   });
@@ -10971,10 +11353,11 @@ var resolveField = function resolveField(fieldConfig, config) {
     return customFieldComponent(customField, fieldConfig);
   }
 
-  var consentField = findConsentField(config, camelPath);
+  var camelPathSplit = camelPath.split('.v');
+  var consentField = findConsentField(config, camelPathSplit[0]);
 
   if (consentField) {
-    return consentFieldComponent(consentField, fieldConfig);
+    return consentFieldComponent(consentField, fieldConfig, camelPathSplit[1], config.language);
   }
 
   throw new UserError("Unknown field: ".concat(fieldConfig.key));
@@ -11031,8 +11414,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,
@@ -11062,8 +11447,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) {
@@ -11094,7 +11486,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");
+        }
       });
     }
   }]);
@@ -11252,10 +11646,29 @@ var skipError = function skipError(err) {
 };
 
 var enhance = 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,
@@ -11264,17 +11677,18 @@ var enhance = 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');
     },
@@ -11283,10 +11697,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'))));
@@ -11860,6 +12274,105 @@ var phoneNumberEditorWidget = createMultiViewWidget({
   }
 });
 
+/**
+ * The base implementation of `_.map` without support for iteratee shorthands.
+ *
+ * @private
+ * @param {Array|Object} collection The collection to iterate over.
+ * @param {Function} iteratee The function invoked per iteration.
+ * @returns {Array} Returns the new mapped array.
+ */
+
+function baseMap(collection, iteratee) {
+  var index = -1,
+      result = isArrayLike(collection) ? Array(collection.length) : [];
+  baseEach(collection, function (value, key, collection) {
+    result[++index] = iteratee(value, key, collection);
+  });
+  return result;
+}
+
+/**
+ * Creates an array of values by running each element in `collection` thru
+ * `iteratee`. The iteratee is invoked with three arguments:
+ * (value, index|key, collection).
+ *
+ * Many lodash methods are guarded to work as iteratees for methods like
+ * `_.every`, `_.filter`, `_.map`, `_.mapValues`, `_.reject`, and `_.some`.
+ *
+ * The guarded methods are:
+ * `ary`, `chunk`, `curry`, `curryRight`, `drop`, `dropRight`, `every`,
+ * `fill`, `invert`, `parseInt`, `random`, `range`, `rangeRight`, `repeat`,
+ * `sampleSize`, `slice`, `some`, `sortBy`, `split`, `take`, `takeRight`,
+ * `template`, `trim`, `trimEnd`, `trimStart`, and `words`
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Collection
+ * @param {Array|Object} collection The collection to iterate over.
+ * @param {Function} [iteratee=_.identity] The function invoked per iteration.
+ * @returns {Array} Returns the new mapped array.
+ * @example
+ *
+ * function square(n) {
+ *   return n * n;
+ * }
+ *
+ * _.map([4, 8], square);
+ * // => [16, 64]
+ *
+ * _.map({ 'a': 4, 'b': 8 }, square);
+ * // => [16, 64] (iteration order is not guaranteed)
+ *
+ * var users = [
+ *   { 'user': 'barney' },
+ *   { 'user': 'fred' }
+ * ];
+ *
+ * // The `_.property` iteratee shorthand.
+ * _.map(users, 'user');
+ * // => ['barney', 'fred']
+ */
+
+function map(collection, iteratee) {
+  var func = isArray(collection) ? arrayMap : baseMap;
+  return func(collection, baseIteratee(iteratee));
+}
+
+/**
+ * Creates an object composed of the `object` properties `predicate` returns
+ * truthy for. The predicate is invoked with two arguments: (value, key).
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Object
+ * @param {Object} object The source object.
+ * @param {Function} [predicate=_.identity] The function invoked per property.
+ * @returns {Object} Returns the new object.
+ * @example
+ *
+ * var object = { 'a': 1, 'b': '2', 'c': 3 };
+ *
+ * _.pickBy(object, _.isNumber);
+ * // => { 'a': 1, 'c': 3 }
+ */
+
+function pickBy(object, predicate) {
+  if (object == null) {
+    return {};
+  }
+
+  var props = arrayMap(getAllKeysIn(object), function (prop) {
+    return [prop];
+  });
+  predicate = baseIteratee(predicate);
+  return basePickBy(object, props, function (value, path) {
+    return predicate(value, path[0]);
+  });
+}
+
 function parseQueryString(value) {
   var qs = value.split('&').reduce(function (acc, param) {
     var _param$split = param.split('='),
@@ -11872,6 +12385,15 @@ function parseQueryString(value) {
   }, {});
   return camelCaseProperties(qs);
 }
+function toQueryString(obj) {
+  var snakeCase = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var params = snakeCase ? snakeCaseProperties(obj) : obj;
+  return map(pickBy(params, function (v) {
+    return v !== null && v !== undefined;
+  }), function (value, key) {
+    return value !== '' ? "".concat(key, "=").concat(encodeURIComponent(value)) : key;
+  }).join('&');
+}
 
 var MainView$2 = /*#__PURE__*/function (_React$Component) {
   _inherits(MainView, _React$Component);
@@ -11994,7 +12516,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;
       });
@@ -12008,8 +12530,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,
@@ -12024,10 +12553,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
       }));
     }
@@ -12042,7 +12575,7 @@ var VerificationCodeView$1 = /*#__PURE__*/function (_React$Component2) {
   var _super2 = _createSuper(VerificationCodeView);
 
   function VerificationCodeView() {
-    var _this2;
+    var _this3;
 
     _classCallCheck(this, VerificationCodeView);
 
@@ -12050,26 +12583,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");
+        }
       }));
     }
   }]);
@@ -15111,10 +15648,18 @@ function createClient(creationConfig) {
   var client = coreClient.remoteSettings.then(function (remoteSettings) {
     var remoteConfig = camelCaseProperties(remoteSettings);
     var language = creationConfig.language || remoteConfig.language;
-    return fetch("".concat(remoteSettings.resourceBaseUrl, "/").concat(language, ".json")).then(function (response) {
+    return fetch("https://".concat(creationConfig.domain, "/identity/v1/config/consents?").concat(toQueryString({
+      lang: language
+    }))).then(function (response) {
       return response.json();
-    }).then(function (defaultI18n) {
-      return new UiClient(_objectSpread2(_objectSpread2({}, creationConfig), remoteConfig), urlParser, coreClient, defaultI18n);
+    }).then(function (consentsVersions) {
+      return fetch("".concat(remoteSettings.resourceBaseUrl, "/").concat(language, ".json")).then(function (response) {
+        return response.json();
+      }).then(function (defaultI18n) {
+        return new UiClient(_objectSpread2(_objectSpread2(_objectSpread2({}, creationConfig), remoteConfig), {}, {
+          consentsVersions: camelCaseProperties(consentsVersions)
+        }), urlParser, coreClient, defaultI18n);
+      })["catch"](console.error);
     })["catch"](console.error);
   });
   return {