@hcaptcha/react-hcaptcha 1.13.0 → 1.14.0

package/README.md

@@ -154,6 +154,7 @@ return <HCaptcha ref={captchaRef} onLoad={onLoad} sitekey={sitekey} {...props} /
 |`onVerify`|`token, eKey`|When challenge is completed. The response `token` and an `eKey` (session id) are passed along.|
 |`onExpire`|-|When the current token expires.|
 |`onLoad`|-|When the hCaptcha API loads.|
+|`onReady`|-|When the hCaptcha is ready to be used.|
 |`onOpen`|-|When the user display of a challenge starts.|
 |`onClose`|-|When the user dismisses a challenge.|
 |`onChalExpired`|-|When the user display of a challenge times out with no answer.|

package/dist/esm/index.js

@@ -1,7 +1,5 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-var _excluded = ["userJourneys"];
 import * as React from 'react';
 import { hCaptchaLoader } from '@hcaptcha/loader';
 import { getFrame, getMountElement } from './utils.js';
@@ -39,6 +37,12 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     _this.apiScriptRequested = false;
     _this.sentryHub = null;
     _this.captchaId = '';
+
+    /**
+     * Tracks the currently pending async execute() promise.
+     * Stores { resolve, reject } so we can cancel on unmount/errors/etc.
+     */
+    _this._pendingExecute = null;
     _this.state = {
       isApiReady: false,
       isRemoved: false,
@@ -73,6 +77,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   _proto.componentWillUnmount = function componentWillUnmount() {
     var hcaptcha = this._hcaptcha;
     var captchaId = this.captchaId;
+    this._cancelPendingExecute('react-component-unmounted');
     if (!this.isReady()) {
       return;
     }
@@ -143,7 +148,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       scriptSource: scriptSource,
       secureApi: secureApi,
       cleanup: cleanup,
-      userJourneys: userJourneys
+      uj: userJourneys !== undefined ? userJourneys : false
     };
     hCaptchaLoader(mountParams).then(this.handleOnLoad, this.handleError)["catch"](this.handleError);
     this.apiScriptRequested = true;
@@ -158,13 +163,6 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     // • API is not ready
     // • Component has already been mounted
     if (!isApiReady || captchaId) return;
-
-    // It is needed to pass only the props that hCaptcha supports
-    // React are able to receive userJourneys as prop but hCaptcha not
-    // hcaptcha expects to have only "uj" parameter to enable user journeys
-    var _this$props2 = this.props,
-      userJourneys = _this$props2.userJourneys,
-      basicProps = _objectWithoutPropertiesLoose(_this$props2, _excluded);
     var renderParams = Object.assign({
       "open-callback": this.handleOpen,
       "close-callback": this.handleClose,
@@ -172,10 +170,9 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       "chalexpired-callback": this.handleChallengeExpired,
       "expired-callback": this.handleExpire,
       "callback": this.handleSubmit
-    }, basicProps, {
+    }, this.props, {
       hl: this.props.hl || this.props.languageOverride,
-      languageOverride: undefined,
-      uj: userJourneys !== undefined ? userJourneys : false
+      languageOverride: undefined
     });
     var hcaptcha = this._hcaptcha;
     //Render hCaptcha widget and provide necessary callbacks - hCaptcha
@@ -195,13 +192,16 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     if (!this.isReady()) {
       return;
     }
+
     // Reset captcha state, removes stored token and unticks checkbox
     hcaptcha.reset(captchaId);
+    this._cancelPendingExecute('hcaptcha-reset');
   };
   _proto.removeCaptcha = function removeCaptcha(callback) {
     var _this5 = this;
     var hcaptcha = this._hcaptcha;
     var captchaId = this.captchaId;
+    this._cancelPendingExecute('hcaptcha-removed');
     if (!this.isReady()) {
       return;
     }
@@ -267,6 +267,20 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       isApiReady = _this$state.isApiReady,
       isRemoved = _this$state.isRemoved;
     return isApiReady && !isRemoved;
+  }
+
+  /**
+   * Cancel any pending async execute() promise
+   * Called when the component unmounts, errors occur, resets, etc.
+   */;
+  _proto._cancelPendingExecute = function _cancelPendingExecute(reason) {
+    if (!this._pendingExecute) {
+      return;
+    }
+    var pending = this._pendingExecute;
+    this._pendingExecute = null;
+    var error = new Error(reason);
+    pending.reject(error);
   };
   _proto.handleOpen = function handleOpen() {
     if (!this.isReady() || !this.props.onOpen) {
@@ -295,25 +309,71 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     try {
       var hcaptcha = this._hcaptcha;
       var captchaId = this.captchaId;
+
+      // Is an async execute and there's already 1 pending, cancel the old one.
+      if (opts && opts.async && this._pendingExecute) {
+        this._cancelPendingExecute('hcaptcha-execute-replaced');
+      }
       if (!this.isReady()) {
-        var _opts;
-        var onReady = new Promise(function (resolve, reject) {
-          _this7._onReady = function (id) {
-            try {
-              var _hcaptcha = _this7._hcaptcha;
-              if (opts && opts.async) {
-                _hcaptcha.execute(id, opts).then(resolve)["catch"](reject);
-              } else {
-                resolve(_hcaptcha.execute(id, opts));
+        if (opts && opts.async) {
+          return new Promise(function (resolve, reject) {
+            _this7._pendingExecute = {
+              resolve: resolve,
+              reject: reject
+            };
+            _this7._onReady = function (id) {
+              if (!_this7._pendingExecute) {
+                return;
+              }
+              try {
+                var _result = hcaptcha.execute(id, opts);
+                if (_result && typeof _result.then === 'function') {
+                  _result.then(function (val) {
+                    _this7._pendingExecute = null;
+                    resolve(val);
+                  })["catch"](function (err) {
+                    _this7._pendingExecute = null;
+                    reject(err);
+                  });
+                } else {
+                  _this7._pendingExecute = null;
+                  reject(new Error('hcaptcha-execute-no-promise'));
+                }
+              } catch (e) {
+                _this7._pendingExecute = null;
+                reject(e);
               }
-            } catch (e) {
-              reject(e);
-            }
+            };
+          });
+        } else {
+          // Non-async: don't return a promise.
+          this._onReady = function (id) {
+            hcaptcha.execute(id, opts);
+          };
+          return null;
+        }
+      }
+
+      // hCaptcha is ready, execute directly.
+      var result = hcaptcha.execute(captchaId, opts);
+
+      // If it's async execute, track it.
+      if (opts && opts.async && result && typeof result.then === 'function') {
+        return new Promise(function (resolve, reject) {
+          _this7._pendingExecute = {
+            resolve: resolve,
+            reject: reject
           };
+          result.then(function (val) {
+            _this7._pendingExecute = null;
+            resolve(val);
+          })["catch"](function (err) {
+            _this7._pendingExecute = null;
+            reject(err);
+          });
         });
-        return (_opts = opts) != null && _opts.async ? onReady : null;
       }
-      return hcaptcha.execute(captchaId, opts);
+      return result;
     } catch (error) {
       if (opts && opts.async) {
         return Promise.reject(error);
@@ -324,6 +384,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   _proto.close = function close() {
     var hcaptcha = this._hcaptcha;
     var captchaId = this.captchaId;
+    this._cancelPendingExecute('hcaptcha-closed');
     if (!this.isReady()) {
       return;
     }

package/dist/index.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -17,7 +16,6 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var React = _interopRequireWildcard(require("react"));
 var _loader = require("@hcaptcha/loader");
 var _utils = require("./utils.js");
-var _excluded = ["userJourneys"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
@@ -57,6 +55,12 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     _this.apiScriptRequested = false;
     _this.sentryHub = null;
     _this.captchaId = '';
+
+    /**
+     * Tracks the currently pending async execute() promise.
+     * Stores { resolve, reject } so we can cancel on unmount/errors/etc.
+     */
+    _this._pendingExecute = null;
     _this.state = {
       isApiReady: false,
       isRemoved: false,
@@ -94,6 +98,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     value: function componentWillUnmount() {
       var hcaptcha = this._hcaptcha;
       var captchaId = this.captchaId;
+      this._cancelPendingExecute('react-component-unmounted');
       if (!this.isReady()) {
         return;
       }
@@ -170,7 +175,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
         scriptSource: scriptSource,
         secureApi: secureApi,
         cleanup: cleanup,
-        userJourneys: userJourneys
+        uj: userJourneys !== undefined ? userJourneys : false
       };
       (0, _loader.hCaptchaLoader)(mountParams).then(this.handleOnLoad, this.handleError)["catch"](this.handleError);
       this.apiScriptRequested = true;
@@ -187,13 +192,6 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       // • API is not ready
       // • Component has already been mounted
       if (!isApiReady || captchaId) return;
-
-      // It is needed to pass only the props that hCaptcha supports
-      // React are able to receive userJourneys as prop but hCaptcha not
-      // hcaptcha expects to have only "uj" parameter to enable user journeys
-      var _this$props2 = this.props,
-        userJourneys = _this$props2.userJourneys,
-        basicProps = (0, _objectWithoutProperties2["default"])(_this$props2, _excluded);
       var renderParams = Object.assign({
         "open-callback": this.handleOpen,
         "close-callback": this.handleClose,
@@ -201,10 +199,9 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
         "chalexpired-callback": this.handleChallengeExpired,
         "expired-callback": this.handleExpire,
         "callback": this.handleSubmit
-      }, basicProps, {
+      }, this.props, {
         hl: this.props.hl || this.props.languageOverride,
-        languageOverride: undefined,
-        uj: userJourneys !== undefined ? userJourneys : false
+        languageOverride: undefined
       });
       var hcaptcha = this._hcaptcha;
       //Render hCaptcha widget and provide necessary callbacks - hCaptcha
@@ -226,8 +223,10 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       if (!this.isReady()) {
         return;
       }
+
       // Reset captcha state, removes stored token and unticks checkbox
       hcaptcha.reset(captchaId);
+      this._cancelPendingExecute('hcaptcha-reset');
     }
   }, {
     key: "removeCaptcha",
@@ -235,6 +234,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       var _this5 = this;
       var hcaptcha = this._hcaptcha;
       var captchaId = this.captchaId;
+      this._cancelPendingExecute('hcaptcha-removed');
       if (!this.isReady()) {
         return;
       }
@@ -311,6 +311,22 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
         isRemoved = _this$state.isRemoved;
       return isApiReady && !isRemoved;
     }
+
+    /**
+     * Cancel any pending async execute() promise
+     * Called when the component unmounts, errors occur, resets, etc.
+     */
+  }, {
+    key: "_cancelPendingExecute",
+    value: function _cancelPendingExecute(reason) {
+      if (!this._pendingExecute) {
+        return;
+      }
+      var pending = this._pendingExecute;
+      this._pendingExecute = null;
+      var error = new Error(reason);
+      pending.reject(error);
+    }
   }, {
     key: "handleOpen",
     value: function handleOpen() {
@@ -344,25 +360,71 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       try {
         var hcaptcha = this._hcaptcha;
         var captchaId = this.captchaId;
+
+        // Is an async execute and there's already 1 pending, cancel the old one.
+        if (opts && opts.async && this._pendingExecute) {
+          this._cancelPendingExecute('hcaptcha-execute-replaced');
+        }
         if (!this.isReady()) {
-          var _opts;
-          var onReady = new Promise(function (resolve, reject) {
-            _this7._onReady = function (id) {
-              try {
-                var _hcaptcha = _this7._hcaptcha;
-                if (opts && opts.async) {
-                  _hcaptcha.execute(id, opts).then(resolve)["catch"](reject);
-                } else {
-                  resolve(_hcaptcha.execute(id, opts));
+          if (opts && opts.async) {
+            return new Promise(function (resolve, reject) {
+              _this7._pendingExecute = {
+                resolve: resolve,
+                reject: reject
+              };
+              _this7._onReady = function (id) {
+                if (!_this7._pendingExecute) {
+                  return;
                 }
-              } catch (e) {
-                reject(e);
-              }
+                try {
+                  var _result = hcaptcha.execute(id, opts);
+                  if (_result && typeof _result.then === 'function') {
+                    _result.then(function (val) {
+                      _this7._pendingExecute = null;
+                      resolve(val);
+                    })["catch"](function (err) {
+                      _this7._pendingExecute = null;
+                      reject(err);
+                    });
+                  } else {
+                    _this7._pendingExecute = null;
+                    reject(new Error('hcaptcha-execute-no-promise'));
+                  }
+                } catch (e) {
+                  _this7._pendingExecute = null;
+                  reject(e);
+                }
+              };
+            });
+          } else {
+            // Non-async: don't return a promise.
+            this._onReady = function (id) {
+              hcaptcha.execute(id, opts);
+            };
+            return null;
+          }
+        }
+
+        // hCaptcha is ready, execute directly.
+        var result = hcaptcha.execute(captchaId, opts);
+
+        // If it's async execute, track it.
+        if (opts && opts.async && result && typeof result.then === 'function') {
+          return new Promise(function (resolve, reject) {
+            _this7._pendingExecute = {
+              resolve: resolve,
+              reject: reject
             };
+            result.then(function (val) {
+              _this7._pendingExecute = null;
+              resolve(val);
+            })["catch"](function (err) {
+              _this7._pendingExecute = null;
+              reject(err);
+            });
           });
-          return (_opts = opts) !== null && _opts !== void 0 && _opts.async ? onReady : null;
         }
-        return hcaptcha.execute(captchaId, opts);
+        return result;
       } catch (error) {
         if (opts && opts.async) {
           return Promise.reject(error);
@@ -375,6 +437,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     value: function close() {
       var hcaptcha = this._hcaptcha;
       var captchaId = this.captchaId;
+      this._cancelPendingExecute('hcaptcha-closed');
       if (!this.isReady()) {
         return;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hcaptcha/react-hcaptcha",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "types": "types/index.d.ts",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
@@ -60,6 +60,6 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.9",
-    "@hcaptcha/loader": "^2.0.1"
+    "@hcaptcha/loader": "^2.2.0"
   }
 }

package/src/index.js

@@ -38,6 +38,12 @@ class HCaptcha extends React.Component {
       this.sentryHub = null;
       this.captchaId = '';
 
+      /**
+       * Tracks the currently pending async execute() promise.
+       * Stores { resolve, reject } so we can cancel on unmount/errors/etc.
+       */
+      this._pendingExecute = null;
+
       this.state = {
         isApiReady: false,
         isRemoved: false,
@@ -77,6 +83,8 @@ class HCaptcha extends React.Component {
       const hcaptcha = this._hcaptcha;
       const captchaId = this.captchaId;
 
+      this._cancelPendingExecute('react-component-unmounted');
+
       if (!this.isReady()) {
         return;
       }
@@ -132,6 +140,7 @@ class HCaptcha extends React.Component {
         cleanup = true,
         userJourneys,
       } = this.props;
+      
       const mountParams = {
         render: 'explicit',
         apihost,
@@ -149,9 +158,9 @@ class HCaptcha extends React.Component {
         scriptSource,
         secureApi,
         cleanup,
-        userJourneys
+        uj: userJourneys !== undefined ? userJourneys : false,
       };
-
+      
       hCaptchaLoader(mountParams)
           .then(this.handleOnLoad, this.handleError)
           .catch(this.handleError);
@@ -168,11 +177,6 @@ class HCaptcha extends React.Component {
       // • API is not ready
       // • Component has already been mounted
       if (!isApiReady || captchaId) return;
-
-      // It is needed to pass only the props that hCaptcha supports
-      // React are able to receive userJourneys as prop but hCaptcha not
-      // hcaptcha expects to have only "uj" parameter to enable user journeys
-      const { userJourneys, ...basicProps } = this.props;
       
       const renderParams = Object.assign({
         "open-callback"       : this.handleOpen,
@@ -181,10 +185,9 @@ class HCaptcha extends React.Component {
         "chalexpired-callback": this.handleChallengeExpired,
         "expired-callback"    : this.handleExpire,
         "callback"            : this.handleSubmit,
-      }, basicProps, {
+      }, this.props, {
         hl: this.props.hl || this.props.languageOverride,
-        languageOverride: undefined,
-        uj: userJourneys !== undefined ? userJourneys : false,
+        languageOverride: undefined
       });
 
       const hcaptcha = this._hcaptcha;
@@ -206,14 +209,19 @@ class HCaptcha extends React.Component {
       if (!this.isReady()) {
         return;
       }
+
       // Reset captcha state, removes stored token and unticks checkbox
       hcaptcha.reset(captchaId)
+
+      this._cancelPendingExecute('hcaptcha-reset');
     }
 
     removeCaptcha(callback) {
       const hcaptcha = this._hcaptcha;
       const captchaId = this.captchaId;
 
+      this._cancelPendingExecute('hcaptcha-removed');
+
       if (!this.isReady()) {
         return;
       }
@@ -222,6 +230,7 @@ class HCaptcha extends React.Component {
         this.captchaId = '';
 
         hcaptcha.remove(captchaId);
+
         callback && callback()
       });
     }
@@ -290,6 +299,22 @@ class HCaptcha extends React.Component {
       return isApiReady && !isRemoved;
     }
 
+    /**
+     * Cancel any pending async execute() promise
+     * Called when the component unmounts, errors occur, resets, etc.
+     */
+    _cancelPendingExecute(reason) {
+      if (!this._pendingExecute) {
+        return;
+      }
+
+      const pending = this._pendingExecute;
+      this._pendingExecute = null;
+
+      const error = new Error(reason);
+      pending.reject(error);
+    }
+
     handleOpen () {
       if (!this.isReady() || !this.props.onOpen) {
         return;
@@ -314,7 +339,7 @@ class HCaptcha extends React.Component {
       this.props.onChalExpired();
     }
 
-    execute (opts = null) {
+    execute(opts = null) {
 
       opts = typeof opts === 'object' ? opts : null;
 
@@ -322,28 +347,75 @@ class HCaptcha extends React.Component {
         const hcaptcha = this._hcaptcha;
         const captchaId = this.captchaId;
 
+        // Is an async execute and there's already 1 pending, cancel the old one.
+        if (opts && opts.async && this._pendingExecute) {
+          this._cancelPendingExecute('hcaptcha-execute-replaced');
+        }
+
         if (!this.isReady()) {
-          const onReady = new Promise((resolve, reject) => {
+          if (opts && opts.async) {
+            return new Promise((resolve, reject) => {
+              this._pendingExecute = { resolve, reject };
 
-            this._onReady = (id) => {
-              try {
-                const hcaptcha = this._hcaptcha;
+              this._onReady = (id) => {
+                if (!this._pendingExecute) {
+                  return;
+                }
 
-                if (opts && opts.async) {
-                  hcaptcha.execute(id, opts).then(resolve).catch(reject);
-                } else {
-                  resolve(hcaptcha.execute(id, opts));
+                try {
+                  const result = hcaptcha.execute(id, opts);
+
+                  if (result && typeof result.then === 'function') {
+                    result
+                      .then((val) => {
+                        this._pendingExecute = null;
+                        resolve(val);
+                      })
+                      .catch((err) => {
+                        this._pendingExecute = null;
+                        reject(err);
+                      });
+                  } else {
+                    this._pendingExecute = null;
+                    reject(new Error('hcaptcha-execute-no-promise'));
+                  }
+                } catch (e) {
+                  this._pendingExecute = null;
+                  reject(e);
                 }
-              } catch (e) {
-                reject(e);
-              }
+              };
+            });
+          } else {
+            // Non-async: don't return a promise.
+            this._onReady = (id) => {
+              hcaptcha.execute(id, opts);
             };
-          });
+            
+            return null;
+          }
+        }
 
-          return opts?.async ? onReady : null;
+        // hCaptcha is ready, execute directly.
+        const result = hcaptcha.execute(captchaId, opts);
+
+        // If it's async execute, track it.
+        if (opts && opts.async && result && typeof result.then === 'function') {
+          return new Promise((resolve, reject) => {
+            this._pendingExecute = { resolve, reject };
+
+            result
+              .then((val) => {
+                this._pendingExecute = null;
+                resolve(val);
+              })
+              .catch((err) => {
+                this._pendingExecute = null;
+                reject(err);
+              });
+          });
         }
 
-        return hcaptcha.execute(captchaId, opts);
+        return result;
       } catch (error) {
         if (opts && opts.async) {
           return Promise.reject(error);
@@ -356,6 +428,8 @@ class HCaptcha extends React.Component {
       const hcaptcha = this._hcaptcha;
       const captchaId = this.captchaId;
 
+      this._cancelPendingExecute('hcaptcha-closed');
+
       if (!this.isReady()) {
         return;
       }