@descope/web-components-ui 1.0.336 → 1.0.338

package/dist/cjs/index.cjs.js

@@ -13007,6 +13007,53 @@ class RawRecaptcha extends BaseClass {
     return this.enterprise ? window.grecaptcha?.enterprise : window.grecaptcha;
   }
 
+  #getNewToken(grecaptchaInstance, currentNode, recaptchaWidgetId) {
+    if (!this.isConnected) {
+      return;
+    }
+
+    grecaptchaInstance.ready(() => {
+      // clone the node and append it to the body so that it can be used by the grepcaptcha script
+      const cloneNode = currentNode
+        .querySelector('textarea[name^="g-recaptcha-response"]')
+        ?.cloneNode();
+      if (cloneNode) {
+        cloneNode.style.display = 'none';
+        document.body.appendChild(cloneNode);
+      }
+
+      // cleaning up the recaptcha element we added to the body
+      const removeCloneNode = () => {
+        cloneNode.remove();
+      };
+
+      if (!this.siteKey) {
+        return;
+      }
+      // we should pass recaptchaWidgetId, but this does not allow us to run execute multiple times
+      // also calling grecaptchaInstance.reset() does not work
+      const exec = grecaptchaInstance?.execute(recaptchaWidgetId, { action: this.action });
+      exec.then((token, e) => {
+        if (e) {
+          // eslint-disable-next-line no-console
+          console.warn('could not execute recaptcha', e);
+        } else {
+          this.updateComponentsContext({
+            risktoken: token,
+            riskaction: this.action,
+          });
+          // if the component is still connected, we should try to get a new token before the token expires (2 minutes)
+          if (this.isConnected) {
+            setTimeout(() => {
+              this.#getNewToken(grecaptchaInstance, currentNode, recaptchaWidgetId);
+            }, 110000);
+          }
+        }
+        removeCloneNode();
+      });
+    });
+  }
+
   #createOnLoadScript() {
     window.onRecaptchaLoadCallback = () => {
       const currentNode = this.recaptchaEle;
@@ -13023,48 +13070,12 @@ class RawRecaptcha extends BaseClass {
       }
 
       setTimeout(() => {
-        // returns recaptchaWidgetId
         const recaptchaWidgetId = grecaptchaInstance.render(currentNode, {
           sitekey: this.siteKey,
           badge: 'inline',
           size: 'invisible',
         });
-
-        grecaptchaInstance.ready(() => {
-          // clone the node and append it to the body so that it can be used by the grepcaptcha script
-          const cloneNode = currentNode
-            .querySelector('textarea[name^="g-recaptcha-response"]')
-            ?.cloneNode();
-          if (cloneNode) {
-            cloneNode.style.display = 'none';
-            document.body.appendChild(cloneNode);
-          }
-
-          // cleaning up the recaptcha element we added to the body
-          const removeCloneNode = () => {
-            cloneNode.remove();
-          };
-
-          if (this.siteKey) {
-            // we should pass recaptchaWidgetId, but this does not allow us to run execute multiple times
-            // also calling grecaptchaInstance.reset() does not work
-            const exec = grecaptchaInstance?.execute(recaptchaWidgetId, { action: this.action });
-            exec
-              .then((token) => {
-                this.updateComponentsContext({
-                  risktoken: token,
-                  riskaction: this.action,
-                });
-
-                removeCloneNode();
-              })
-              .catch((e) => {
-                removeCloneNode();
-                // eslint-disable-next-line no-console
-                console.warn('could not execute recaptcha', e);
-              });
-          }
-        });
+        this.#getNewToken(grecaptchaInstance, currentNode, recaptchaWidgetId);
       }, 0);
     };
   }