auth0-lock 14.2.1 → 14.2.3

package/lib/i18n/sl.js

@@ -41,7 +41,8 @@ var _default = exports.default = {
       'bad.phone_number': 'Napačna telefonska številka',
       'lock.fallback': 'Žal je prišlo do napake',
       invalid_captcha: 'Rešite izzivno vprašanje in preverite, ali niste robot.',
-      invalid_recaptcha: 'Izberite potrditveno polje, da preverite, da niste robot.'
+      invalid_recaptcha: 'Izberite potrditveno polje, da preverite, da niste robot.',
+      too_many_attempts: 'Po več zaporednih poskusih napačne prijave je bil vaš račun blokiran.'
     },
     signUp: {
       invalid_password: 'Napačno geslo.',

package/lib/i18n/sr.js

@@ -41,7 +41,8 @@ var _default = exports.default = {
       'bad.phone_number': 'Broj telefona je nevažeći',
       'lock.fallback': 'Žao nam je, došlo je do greške',
       invalid_captcha: 'Решите изазовно питање да бисте потврдили да нисте робот.',
-      invalid_recaptcha: 'Потврдите избор у пољу за потврду да нисте робот.'
+      invalid_recaptcha: 'Потврдите избор у пољу за потврду да нисте робот.',
+      too_many_attempts: 'Vaš nalog je blokiran nakon više uzastopnih pokušaja prijavljivanja.'
     },
     signUp: {
       invalid_password: 'Lozinka je nevažeća.',

package/lib/i18n/sv.js

@@ -41,7 +41,8 @@ var _default = exports.default = {
       'bad.phone_number': 'Ditt telefonnummer är ogiltigt.',
       'lock.fallback': 'Något gick fel.',
       invalid_captcha: 'Lös utmaningsfrågan för att verifiera att du inte är en robot.',
-      invalid_recaptcha: 'Markera kryssrutan för att verifiera att du inte är en robot.'
+      invalid_recaptcha: 'Markera kryssrutan för att verifiera att du inte är en robot.',
+      too_many_attempts: 'Ditt konto har blivit spärrat efter flera felaktiga inloggningsförsök.'
     },
     signUp: {
       invalid_password: 'Lösenordet är ogiltigt.',

package/lib/i18n/tr.js

@@ -41,7 +41,8 @@ var _default = exports.default = {
       'bad.phone_number': 'Telefon numarası geçerli değil',
       'lock.fallback': 'Özür dileriz, bir hata oluştu',
       invalid_captcha: 'Robot olmadığınızı doğrulamak için meydan okuma sorusunu çözün.',
-      invalid_recaptcha: 'Robot olmadığınızı doğrulamak için onay kutusunu seçin.'
+      invalid_recaptcha: 'Robot olmadığınızı doğrulamak için onay kutusunu seçin.',
+      too_many_attempts: 'Çok fazla giriş denemesi sonucunda hesabınız bloke oldu.'
     },
     signUp: {
       invalid_password: 'Şifre geçersiz.',

package/lib/i18n/ua.js

@@ -41,7 +41,8 @@ var _default = exports.default = {
       'bad.phone_number': 'Недійсний номер телефону',
       'lock.fallback': 'Йой! Виникла непередбачувана помилка при спробі авторизації. Перепрошуємо.',
       invalid_captcha: 'Вирішіть складне питання, щоб переконатися, що ви не робот.',
-      invalid_recaptcha: 'Установіть прапорець, щоб переконатися, що ви не робот.'
+      invalid_recaptcha: 'Установіть прапорець, щоб переконатися, що ви не робот.',
+      too_many_attempts: 'Ваш обліковий запис був заблокований після декількох послідовних спроб входу до системи.'
     },
     signUp: {
       invalid_password: 'Невірний пароль.',

package/lib/i18n/uk.js

@@ -41,7 +41,8 @@ var _default = exports.default = {
       'bad.phone_number': 'Неправильний номер телефону',
       'lock.fallback': 'На жаль, сталася помилка',
       invalid_captcha: 'Вирішіть складне питання, щоб переконатися, що ви не робот.',
-      invalid_recaptcha: 'Установіть прапорець, щоб переконатися, що ви не робот.'
+      invalid_recaptcha: 'Установіть прапорець, щоб переконатися, що ви не робот.',
+      too_many_attempts: 'Ваш обліковий запис заблоковано після декількох послідовних спроб входу в систему.'
     },
     signUp: {
       invalid_password: 'Неправильний пароль.',

package/lib/i18n/vi.js

@@ -41,7 +41,8 @@ var _default = exports.default = {
       'bad.phone_number': 'Số điện thoại không hợp lệ.',
       'lock.fallback': 'Đã có lỗi xãy ra, chúng tôi rất lấy làm tiếc.',
       invalid_captcha: 'Giải quyết câu hỏi thử thách để xác minh bạn không phải là robot.',
-      invalid_recaptcha: 'Chọn hộp kiểm để xác minh bạn không phải là robot.'
+      invalid_recaptcha: 'Chọn hộp kiểm để xác minh bạn không phải là robot.',
+      too_many_attempts: 'Tài khoản của bạn đã bị khóa do liên tục đăng nhập thất bại nhiều lần.'
     },
     signUp: {
       invalid_password: 'Mật khẩu không hợp lệ.',

package/lib/i18n/zh-tw.js

@@ -41,7 +41,8 @@ var _default = exports.default = {
       'bad.phone_number': '手機號碼錯誤。',
       'lock.fallback': '對不起，發生錯誤。',
       invalid_captcha: '解決挑戰問題以驗證您不是機器人。',
-      invalid_recaptcha: '選中復選框以確認您不是機器人。'
+      invalid_recaptcha: '選中復選框以確認您不是機器人。',
+      too_many_attempts: '由於登入異常頻繁，您的帳號已被鎖定。'
     },
     signUp: {
       invalid_password: '密碼錯誤',

package/lib/i18n/zh.js

@@ -41,7 +41,8 @@ var _default = exports.default = {
       'bad.phone_number': '手机号码格式不正确。',
       'lock.fallback': '对不起，出现错误。',
       invalid_captcha: '解决挑战问题以验证您不是机器人。',
-      invalid_recaptcha: '选中复选框以确认您不是机器人。'
+      invalid_recaptcha: '选中复选框以确认您不是机器人。',
+      too_many_attempts: '由于登录操作太频繁，您的帐号已被锁定。'
     },
     signUp: {
       invalid_password: '密码错误',

package/lib/i18n.js

@@ -90,7 +90,7 @@ function assertLanguage(m, language, base) {
 function syncLang(m, language, _cb) {
   (0, _cdn_utils.load)({
     method: 'registerLanguageDictionary',
-    url: "".concat(l.languageBaseUrl(m), "/js/lock/").concat("14.2.1", "/").concat(language, ".js"),
+    url: "".concat(l.languageBaseUrl(m), "/js/lock/").concat("14.2.3", "/").concat(language, ".js"),
     check: function check(str) {
       return str && str === language;
     },

package/lib/lock.js

@@ -36,7 +36,7 @@ var Auth0Lock = exports.default = /*#__PURE__*/function (_Core) {
   _inherits(Auth0Lock, _Core);
   return _createClass(Auth0Lock);
 }(_core.default); // telemetry
-Auth0Lock.version = "14.2.1";
+Auth0Lock.version = "14.2.3";
 
 // TODO: should we have different telemetry for classic/passwordless?
 // TODO: should we set telemetry info before each request?

package/lib/passwordless.js

@@ -36,4 +36,4 @@ var Auth0LockPasswordless = exports.default = /*#__PURE__*/function (_Core) {
   _inherits(Auth0LockPasswordless, _Core);
   return _createClass(Auth0LockPasswordless);
 }(_core.default);
-Auth0LockPasswordless.version = "14.2.1";
+Auth0LockPasswordless.version = "14.2.3";

package/lib/ui/box/chrome.js

@@ -101,9 +101,12 @@ var SubmitTextSvg = function SubmitTextSvg() {
   }))));
 };
 var SubmitButton = /*#__PURE__*/function (_React$Component) {
-  function SubmitButton() {
+  function SubmitButton(props) {
+    var _this;
     _classCallCheck(this, SubmitButton);
-    return _callSuper(this, SubmitButton, arguments);
+    _this = _callSuper(this, SubmitButton, [props]);
+    _this.buttonRef = /*#__PURE__*/_react.default.createRef();
+    return _this;
   }
   _inherits(SubmitButton, _React$Component);
   return _createClass(SubmitButton, [{
@@ -132,7 +135,9 @@ var SubmitButton = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "focus",
     value: function focus() {
-      _reactDom.default.findDOMNode(this).focus();
+      if (this.buttonRef.current) {
+        this.buttonRef.current.focus();
+      }
     }
   }, {
     key: "render",
@@ -148,6 +153,7 @@ var SubmitButton = /*#__PURE__*/function (_React$Component) {
         className: "auth0-label-submit"
       }, label, /*#__PURE__*/_react.default.createElement(SubmitTextSvg, null)) : /*#__PURE__*/_react.default.createElement(SubmitSvg, null);
       return /*#__PURE__*/_react.default.createElement("button", {
+        ref: this.buttonRef,
         id: "".concat(l.id(model), "-submit"),
         className: "auth0-lock-submit",
         disabled: disabled,
@@ -180,15 +186,18 @@ var MESSAGE_ANIMATION_DURATION = 250;
 var AUXILIARY_ANIMATION_DURATION = 350;
 var Chrome = exports.default = /*#__PURE__*/function (_React$Component2) {
   function Chrome(props) {
-    var _this;
+    var _this2;
     _classCallCheck(this, Chrome);
-    _this = _callSuper(this, Chrome, [props]);
-    _this.state = {
+    _this2 = _callSuper(this, Chrome, [props]);
+    _this2.state = {
       moving: false,
       reverse: false,
       headerHeight: 0
     };
-    return _this;
+    _this2.screenRef = /*#__PURE__*/_react.default.createRef();
+    _this2.globalMessageRef = /*#__PURE__*/_react.default.createRef();
+    _this2.auxiliaryPaneRef = /*#__PURE__*/_react.default.createRef();
+    return _this2;
   }
 
   // eslint-disable-next-line react/no-deprecated
@@ -196,7 +205,7 @@ var Chrome = exports.default = /*#__PURE__*/function (_React$Component2) {
   return _createClass(Chrome, [{
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var _this2 = this;
+      var _this3 = this;
       var _this$props3 = this.props,
         auxiliaryPane = _this$props3.auxiliaryPane,
         showSubmitButton = _this$props3.showSubmitButton;
@@ -215,7 +224,7 @@ var Chrome = exports.default = /*#__PURE__*/function (_React$Component2) {
       if (auxiliaryPane && !nextProps.auxiliaryPane) {
         // TODO clear timeout
         setTimeout(function () {
-          return _this2.setState({
+          return _this3.setState({
             moving: false
           });
         }, AUXILIARY_ANIMATION_DURATION + 50);
@@ -224,7 +233,7 @@ var Chrome = exports.default = /*#__PURE__*/function (_React$Component2) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this3 = this;
+      var _this4 = this;
       var _this$props4 = this.props,
         autofocus = _this$props4.autofocus,
         auxiliaryPane = _this$props4.auxiliaryPane,
@@ -232,7 +241,7 @@ var Chrome = exports.default = /*#__PURE__*/function (_React$Component2) {
         screenName = _this$props4.screenName;
       if (!autofocus) return;
       if (auxiliaryPane && !prevProps.auxiliaryPane) {
-        var input = this.findAutofocusInput(this.refs.auxiliary);
+        var input = this.findAutofocusInput(this.auxiliaryPaneRef.current);
         if (input) {
           // TODO clear timeout
           setTimeout(function () {
@@ -245,7 +254,7 @@ var Chrome = exports.default = /*#__PURE__*/function (_React$Component2) {
         if (this.auxiliaryPaneTriggerInput) {
           // TODO clear timeout
           setTimeout(function () {
-            return _this3.auxiliaryPaneTriggerInput.focus();
+            return _this4.auxiliaryPaneTriggerInput.focus();
           }, AUXILIARY_ANIMATION_DURATION);
         }
         return;
@@ -304,12 +313,13 @@ var Chrome = exports.default = /*#__PURE__*/function (_React$Component2) {
   }, {
     key: "findAutofocusInput",
     value: function findAutofocusInput(ref) {
-      return _reactDom.default.findDOMNode(ref || this.refs.screen).querySelector('input');
+      var node = ref || this.screenRef.current;
+      return node.querySelector('input');
     }
   }, {
     key: "focusError",
     value: function focusError() {
-      var node = _reactDom.default.findDOMNode(this.refs.screen);
+      var node = this.screenRef.current;
       // TODO: make the error input selector configurable via props.
       var error = node.querySelector('.auth0-lock-error input');
       if (error) {
@@ -319,7 +329,7 @@ var Chrome = exports.default = /*#__PURE__*/function (_React$Component2) {
   }, {
     key: "render",
     value: function render() {
-      var _this4 = this;
+      var _this5 = this;
       var _this$props5 = this.props,
         avatar = _this$props5.avatar,
         auxiliaryPane = _this$props5.auxiliaryPane,
@@ -411,13 +421,16 @@ var Chrome = exports.default = /*#__PURE__*/function (_React$Component2) {
           marginTop: this.state.headerHeight
         }
       }, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
+        nodeRef: this.globalMessageRef,
         classNames: "global-message",
         timeout: MESSAGE_ANIMATION_DURATION
-      }, /*#__PURE__*/_react.default.createElement("div", null, globalSuccess, globalError, globalInfo))), /*#__PURE__*/_react.default.createElement("div", {
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        ref: this.globalMessageRef
+      }, globalSuccess, globalError, globalInfo))), /*#__PURE__*/_react.default.createElement("div", {
         style: {
           position: 'relative'
         },
-        ref: "screen"
+        ref: this.screenRef
       }, /*#__PURE__*/_react.default.createElement(_multisize_slide.default, {
         delay: 550,
         onDidAppear: this.onDidAppear.bind(this),
@@ -449,14 +462,16 @@ var Chrome = exports.default = /*#__PURE__*/function (_React$Component2) {
         contentProps: contentProps,
         label: submitButtonLabel,
         ref: function ref(el) {
-          return _this4.submitButton = el;
+          return _this5.submitButton = el;
         },
         display: shouldShowSubmitButton ? 'block' : 'none'
       }), auxiliaryPane && /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
-        ref: "auxiliary",
+        nodeRef: this.auxiliaryPaneRef,
         classNames: "slide",
         timeout: AUXILIARY_ANIMATION_DURATION
-      }, auxiliaryPane))));
+      }, /*#__PURE__*/_react.default.cloneElement(auxiliaryPane, {
+        ref: this.auxiliaryPaneRef
+      })))));
     }
   }, {
     key: "focusSubmit",

package/lib/ui/box/container.js

@@ -104,6 +104,7 @@ var Container = exports.default = /*#__PURE__*/function (_React$Component) {
     _this.state = {
       isOpen: false
     };
+    _this.chromeRef = /*#__PURE__*/_react.default.createRef();
     return _this;
   }
   _inherits(Container, _React$Component);
@@ -176,7 +177,7 @@ var Container = exports.default = /*#__PURE__*/function (_React$Component) {
         if (submitHandler) {
           setTimeout(function () {
             if (!_this3.props.isSubmitting) {
-              _this3.refs.chrome.focusError();
+              _this3.chromeRef.current.focusError();
             }
           }, 17);
           submitHandler();
@@ -307,7 +308,7 @@ var Container = exports.default = /*#__PURE__*/function (_React$Component) {
         logo: logo,
         screenName: screenName,
         primaryColor: primaryColor,
-        ref: "chrome",
+        ref: this.chromeRef,
         showSubmitButton: !!submitHandler,
         submitButtonLabel: submitButtonLabel,
         success: success,

package/lib/ui/box/header.js

@@ -24,15 +24,18 @@ function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? O
 function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
 function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
 var Header = exports.default = /*#__PURE__*/function (_React$Component) {
-  function Header() {
+  function Header(props) {
+    var _this;
     _classCallCheck(this, Header);
-    return _callSuper(this, Header, arguments);
+    _this = _callSuper(this, Header, [props]);
+    _this.headerRef = /*#__PURE__*/_react.default.createRef();
+    return _this;
   }
   _inherits(Header, _React$Component);
   return _createClass(Header, [{
     key: "getDOMNode",
     value: function getDOMNode() {
-      return _reactDom.default.findDOMNode(this);
+      return this.headerRef.current;
     }
   }, {
     key: "render",
@@ -45,6 +48,7 @@ var Header = exports.default = /*#__PURE__*/function (_React$Component) {
         name = _this$props.name,
         title = _this$props.title;
       return /*#__PURE__*/_react.default.createElement("div", {
+        ref: this.headerRef,
         className: "auth0-lock-header"
       }, backHandler && /*#__PURE__*/_react.default.createElement(_button.BackButton, {
         onClick: backHandler
@@ -67,19 +71,19 @@ Header.propTypes = {
 };
 var Welcome = /*#__PURE__*/function (_React$Component2) {
   function Welcome() {
-    var _this;
+    var _this2;
     _classCallCheck(this, Welcome);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _callSuper(this, Welcome, [].concat(args));
+    _this2 = _callSuper(this, Welcome, [].concat(args));
     // Cause a reflow when the image is loaded to fix an issue with the Lock content sometimes
     // not rendering in a popup on first load.
     // https://github.com/auth0/lock/issues/1942
-    _defineProperty(_this, "onImageLoad", function () {
+    _defineProperty(_this2, "onImageLoad", function () {
       return document.querySelector('.auth0-lock').style.fontSize = '1rem';
     });
-    return _this;
+    return _this2;
   }
   _inherits(Welcome, _React$Component2);
   return _createClass(Welcome, [{

package/lib/ui/box/multisize_slide.js

@@ -33,6 +33,7 @@ var Slider = exports.default = /*#__PURE__*/function (_React$Component) {
         current: props.children
       }
     };
+    _this.childRefs = {};
     return _this;
   }
 
@@ -73,11 +74,12 @@ var Slider = exports.default = /*#__PURE__*/function (_React$Component) {
           current = _this$state$children.current,
           prev = _this$state$children.prev;
         var reverse = this.props.reverse;
-        var currentComponent = this.refs[current.key];
-        var prevComponent = this.refs[prev.key];
+        var currentComponent = this.childRefs[current.key] && this.childRefs[current.key].current;
+        var prevComponent = this.childRefs[prev.key] && this.childRefs[prev.key].current;
         var transition = function transition(component, className, delay) {
-          // eslint-disable-next-line
-          var node = _reactDom.default.findDOMNode(component);
+          // Get the DOM node directly from the component's node property
+          var node = component === null || component === void 0 ? void 0 : component.node;
+          if (!node) return;
           var activeClassName = "".concat(className, "-active");
           _CSSCore.default.addClass(node, className);
           setTimeout(function () {
@@ -120,13 +122,18 @@ var Slider = exports.default = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
+      var _this3 = this;
       var _this$state$children2 = this.state.children,
         current = _this$state$children2.current,
         prev = _this$state$children2.prev;
       var children = prev ? [current, prev] : [current];
       var childrenToRender = children.map(function (child) {
+        // Create a ref for this child if it doesn't exist
+        if (!_this3.childRefs[child.key]) {
+          _this3.childRefs[child.key] = /*#__PURE__*/_react.default.createRef();
+        }
         return /*#__PURE__*/_react.default.cloneElement(/*#__PURE__*/_react.default.createElement(Child, {}, child), {
-          ref: child.key,
+          ref: _this3.childRefs[child.key],
           key: child.key
         });
       });
@@ -153,21 +160,22 @@ Slider.defaultProps = {
 };
 var Child = /*#__PURE__*/function (_React$Component2) {
   function Child(props) {
-    var _this3;
+    var _this4;
     _classCallCheck(this, Child);
-    _this3 = _callSuper(this, Child, [props]);
-    _defineProperty(_this3, "node", void 0);
-    _this3.state = {
+    _this4 = _callSuper(this, Child, [props]);
+    _defineProperty(_this4, "node", void 0);
+    _this4.state = {
       height: '',
       originalHeight: '',
       show: true
     };
-    return _this3;
+    return _this4;
   }
   _inherits(Child, _React$Component2);
   return _createClass(Child, [{
     key: "componentWillSlideIn",
     value: function componentWillSlideIn(slide) {
+      if (!this.node) return;
       this.setState({
         height: slide.height,
         originalHeight: parseInt(window.getComputedStyle(this.node, null).height, 10),
@@ -177,7 +185,7 @@ var Child = /*#__PURE__*/function (_React$Component2) {
   }, {
     key: "componentDidSlideIn",
     value: function componentDidSlideIn(cb) {
-      var _this4 = this;
+      var _this5 = this;
       var _this$state = this.state,
         height = _this$state.height,
         originalHeight = _this$state.originalHeight;
@@ -200,20 +208,20 @@ var Child = /*#__PURE__*/function (_React$Component2) {
         // TODO: rAF
         this.t = setInterval(function () {
           if (count < frames - 1) {
-            _this4.setState({
+            _this5.setState({
               height: current,
               animating: true
             });
             current += dh;
             count++;
           } else {
-            clearInterval(_this4.t);
-            delete _this4.t;
-            _this4.setState({
+            clearInterval(_this5.t);
+            delete _this5.t;
+            _this5.setState({
               height: '',
               show: true
             });
-            _this4.cb();
+            _this5.cb();
           }
         }, 17);
       }
@@ -221,6 +229,7 @@ var Child = /*#__PURE__*/function (_React$Component2) {
   }, {
     key: "componentWillSlideOut",
     value: function componentWillSlideOut(cb) {
+      if (!this.node) return;
       var size = window.getComputedStyle(this.node, null).height;
       cb({
         height: parseInt(size, 10),
@@ -238,14 +247,14 @@ var Child = /*#__PURE__*/function (_React$Component2) {
   }, {
     key: "render",
     value: function render() {
-      var _this5 = this;
+      var _this6 = this;
       var children = this.props.children;
       var _this$state2 = this.state,
         height = _this$state2.height,
         show = _this$state2.show;
       return /*#__PURE__*/_react.default.createElement("div", {
         ref: function ref(node) {
-          return _this5.node = node;
+          return _this6.node = node;
         },
         style: height ? {
           height: height + 'px'

package/lib/ui/input/captcha_input.js

@@ -96,6 +96,7 @@ var CaptchaInput = exports.default = /*#__PURE__*/function (_React$Component) {
       });
     });
     _this.state = {};
+    _this.inputRef = /*#__PURE__*/_react.default.createRef();
     return _this;
   }
   _inherits(CaptchaInput, _React$Component);
@@ -142,7 +143,7 @@ var CaptchaInput = exports.default = /*#__PURE__*/function (_React$Component) {
         icon: InputIconSvg
       }, /*#__PURE__*/_react.default.createElement("input", _extends({
         id: "".concat(lockId, "-captcha"),
-        ref: "input",
+        ref: this.inputRef,
         type: "text",
         inputMode: "text",
         name: "captcha",

package/lib/ui/input/email_input.js

@@ -57,6 +57,7 @@ var EmailInput = exports.default = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, EmailInput);
     _this = _callSuper(this, EmailInput, [props]);
     _this.state = {};
+    _this.inputRef = /*#__PURE__*/_react.default.createRef();
     return _this;
   }
   _inherits(EmailInput, _React$Component);
@@ -90,7 +91,7 @@ var EmailInput = exports.default = /*#__PURE__*/function (_React$Component) {
         icon: SVG
       }, /*#__PURE__*/_react.default.createElement("input", _extends({
         id: "".concat(lockId, "-email"),
-        ref: "input",
+        ref: this.inputRef,
         type: "email",
         inputMode: "email",
         name: "email",

package/lib/ui/input/mfa_code_input.js

@@ -33,13 +33,14 @@ var MFACodeInput = exports.default = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, MFACodeInput);
     _this = _callSuper(this, MFACodeInput, [props]);
     _this.state = {};
+    _this.inputRef = /*#__PURE__*/_react.default.createRef();
     return _this;
   }
   _inherits(MFACodeInput, _React$Component);
   return _createClass(MFACodeInput, [{
     key: "focus",
     value: function focus() {
-      this.refs.input && this.refs.input.focus();
+      this.inputRef.current && this.inputRef.current.focus();
     }
   }, {
     key: "hasFocus",
@@ -65,7 +66,7 @@ var MFACodeInput = exports.default = /*#__PURE__*/function (_React$Component) {
         icon: _password_input.IconSvg
       }, /*#__PURE__*/_react.default.createElement("input", _extends({
         id: "".concat(lockId, "-mfa_code"),
-        ref: "input",
+        ref: this.inputRef,
         type: "text",
         name: "mfa_code",
         className: "auth0-lock-input",

package/lib/ui/input/password_input.js

@@ -56,13 +56,14 @@ var PasswordInput = exports.default = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, PasswordInput);
     _this = _callSuper(this, PasswordInput, [props]);
     _this.state = {};
+    _this.inputRef = /*#__PURE__*/_react.default.createRef();
     return _this;
   }
   _inherits(PasswordInput, _React$Component);
   return _createClass(PasswordInput, [{
     key: "focus",
     value: function focus() {
-      this.refs.input && this.refs.input.focus();
+      this.inputRef.current && this.inputRef.current.focus();
     }
   }, {
     key: "hasFocus",
@@ -100,7 +101,7 @@ var PasswordInput = exports.default = /*#__PURE__*/function (_React$Component) {
         name: "password",
         icon: IconSvg
       }, /*#__PURE__*/_react.default.createElement("input", _extends({
-        ref: "input",
+        ref: this.inputRef,
         type: showPassword ? 'text' : 'password',
         id: "".concat(l.id(lock), "-password"),
         name: "password",

package/lib/ui/input/phone_number_input.js

@@ -57,6 +57,7 @@ var PhoneNumberInput = exports.default = /*#__PURE__*/function (_React$Component
     _classCallCheck(this, PhoneNumberInput);
     _this = _callSuper(this, PhoneNumberInput, [props]);
     _this.state = {};
+    _this.inputRef = /*#__PURE__*/_react.default.createRef();
     return _this;
   }
   _inherits(PhoneNumberInput, _React$Component);
@@ -75,7 +76,7 @@ var PhoneNumberInput = exports.default = /*#__PURE__*/function (_React$Component
         name: "phone-number",
         icon: IconSvg
       }, /*#__PURE__*/_react.default.createElement("input", _extends({
-        ref: "input",
+        ref: this.inputRef,
         type: "tel",
         name: "phoneNumber",
         className: "auth0-lock-input auth0-lock-input-number",
@@ -92,8 +93,8 @@ var PhoneNumberInput = exports.default = /*#__PURE__*/function (_React$Component
   }, {
     key: "focus",
     value: function focus() {
-      if (!this.refs.input) return;
-      this.refs.input.focus();
+      if (!this.inputRef.current) return;
+      this.inputRef.current.focus();
       this.handleFocus();
     }
   }, {

package/lib/ui/input/text_input.js

@@ -30,6 +30,7 @@ var TextInput = exports.default = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, TextInput);
     _this = _callSuper(this, TextInput, [props]);
     _this.state = {};
+    _this.inputRef = /*#__PURE__*/_react.default.createRef();
     return _this;
   }
   _inherits(TextInput, _React$Component);
@@ -68,7 +69,7 @@ var TextInput = exports.default = /*#__PURE__*/function (_React$Component) {
         icon: icon
       }, /*#__PURE__*/_react.default.createElement("input", _extends({
         id: "".concat(lockId, "-").concat(name),
-        ref: "input",
+        ref: this.inputRef,
         type: "text",
         name: name,
         className: "auth0-lock-input",

package/lib/ui/input/username_input.js

@@ -51,6 +51,7 @@ var UsernameInput = exports.default = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, UsernameInput);
     _this = _callSuper(this, UsernameInput, [props]);
     _this.state = {};
+    _this.inputRef = /*#__PURE__*/_react.default.createRef();
     return _this;
   }
   _inherits(UsernameInput, _React$Component);
@@ -83,7 +84,7 @@ var UsernameInput = exports.default = /*#__PURE__*/function (_React$Component) {
         name: "username",
         icon: IconSvg
       }, /*#__PURE__*/_react.default.createElement("input", _extends({
-        ref: "input",
+        ref: this.inputRef,
         type: "text",
         name: "username",
         className: "auth0-lock-input",