@descope/flow-scripts 1.0.4 → 1.0.5

package/dist/turnstile.js

@@ -0,0 +1,3 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):((e="undefined"!=typeof globalThis?globalThis:e||self).descope=e.descope||{},e.descope.turnstile=t())}(this,(function(){"use strict";function e(e,t,n,o){return new(n||(n=Promise))((function(r,s){function c(e){try{a(o.next(e))}catch(e){s(e)}}function i(e){try{a(o.throw(e))}catch(e){s(e)}}function a(e){var t;e.done?r(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(c,i)}a((o=o.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;
+/*! Source: (c) Descope and Cloudflare | https://developers.cloudflare.com/turnstile/ */
+const t=105e3;return(n,o,r)=>{let s=(new Date).getTime();const c=()=>globalThis.turnstile;let i,a;const l=(e,t)=>{n.siteKey&&(null==e||e.execute(a,{action:"load"}),s=(new Date).getTime())},u=(e,n)=>{try{e.ready((()=>{l(e)}))}catch(t){try{l(e)}catch(e){console.warn("could not execute turnstile",e)}}finally{i=setTimeout((()=>{u(e,n)}),t)}},d=(()=>{const e=document.createElement("div");return e.style.display="none",e.id="descope-turnstile",e.className="cf-turnstile",document.body.appendChild(e)})(),p=()=>{const e=c();e&&(e.reset(a),u(e,d))};return window.onloadTurnstileCallback=()=>{const e=d;if(e.hasChildNodes())return;const t=c();t&&setTimeout((()=>{a=t.render(e,{sitekey:n.siteKey,execution:"execute",appearance:n.appearance||"execute",callback:e=>r(e)}),u(t,e)}),0)},(()=>{const e=document.createElement("script");e.src=(()=>{const e=new URL("https://challenges.cloudflare.com");return e.pathname+="turnstile/v0/api.js",e.searchParams.append("onload","onloadTurnstileCallback"),e.searchParams.append("render","explicit"),e.toString()})(),e.async=!0,e.id="turnstile-script",e.defer=!1,document.body.appendChild(e)})(),{stop:()=>{clearTimeout(i)},start:p,refresh:()=>e(void 0,void 0,void 0,(function*(){if(Date.now()-s>t){const e=s;return p(),new Promise((t=>{const n=setTimeout((()=>{console.warn("Turnstile token refresh timed out"),t()}),5e3),o=()=>{s!==e?(clearTimeout(n),t()):setTimeout(o,150)};o()}))}return Promise.resolve()}))}}}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@descope/flow-scripts",
   "type": "module",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "repository": {
     "type": "git",
     "url": "https://github.com/descope/content"
@@ -14,21 +14,21 @@
     "test": "jest"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "28.0.2",
-    "@rollup/plugin-node-resolve": "16.0.0",
+    "@rollup/plugin-commonjs": "28.0.3",
+    "@rollup/plugin-node-resolve": "16.0.1",
     "@rollup/plugin-terser": "0.4.4",
     "@rollup/plugin-typescript": "12.1.2",
     "@testing-library/dom": "10.4.0",
-    "@testing-library/react": "16.2.0",
+    "@testing-library/react": "16.3.0",
     "@types/jest": "29.5.14",
-    "eslint": "9.23.0",
+    "eslint": "9.25.1",
     "eslint-plugin-import": "2.31.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "rollup": "4.34.7",
-    "ts-jest": "29.3.0",
+    "rollup": "4.40.0",
+    "ts-jest": "29.3.2",
     "ts-node": "10.9.2",
-    "typescript": "5.7.3"
+    "typescript": "5.8.3"
   },
   "dependencies": {
     "@fingerprintjs/fingerprintjs-pro": "3.11.8"

package/src/fingerprint.ts

@@ -51,7 +51,6 @@ export const loadFingerprint = async (
     const { requestId } = await agent.get();
     onTokenReady(requestId);
   } catch (ex) {
-    // eslint-disable-next-line no-console
     console.warn('Could not load fingerprint', ex);
   }
 };

package/src/fingerprintDescope.ts

@@ -57,7 +57,6 @@ export const loadFingerprint = async (
     const { requestId } = await agent.get();
     onTokenReady(requestId);
   } catch (ex) {
-    // eslint-disable-next-line no-console
     console.warn('Could not load descope fingerprint', ex);
   }
 };

package/src/grecaptcha.ts

@@ -59,7 +59,6 @@ const loadGRecaptcha = (
         ?.execute(recaptchaWidgetId, { action: 'load' })
         .then((token: string, e: any) => {
           if (e) {
-            // eslint-disable-next-line no-console
             console.warn('could not execute recaptcha', e);
           } else {
             onTokenReady(token);
@@ -112,7 +111,6 @@ const loadGRecaptcha = (
       return new Promise<void>((resolve) => {
         // Set a timeout to prevent indefinite waiting
         const timeout = setTimeout(() => {
-          // eslint-disable-next-line no-console
           console.warn('reCAPTCHA token refresh timed out');
           resolve(); // Resolve anyway to prevent blocking form submission
         }, 5000); // 5 second timeout for token refresh

package/src/index.spec.ts

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-namespace */
 import { waitFor } from '@testing-library/dom';
 import * as fp from '@fingerprintjs/fingerprintjs-pro';
 
@@ -13,15 +12,12 @@ async function loadSdkScript(scriptId: string) {
       res = await import('./forter');
       return res.default;
     case 'fingerprint':
-      // eslint-disable-next-line no-case-declarations
       res = await import('./fingerprint');
       return res.default;
     case 'fingerprintDescope':
-      // eslint-disable-next-line no-case-declarations
       res = await import('./fingerprintDescope');
       return res.default;
     case 'grecaptcha':
-      // eslint-disable-next-line no-case-declarations
       res = await import('./grecaptcha');
       return res.default;
     default:
@@ -45,7 +41,6 @@ describe('scripts', () => {
       // the script changes the id attribute to the siteId
       expect(script?.getAttribute('id')).toBeTruthy();
       // get textContent and ensure it contains the script id
-      // eslint-disable-next-line jest-dom/prefer-to-have-text-content
       expect(script?.textContent).toContain('some-site-id');
 
       // trigger 'ftr:tokenReady' event and ensure that the tokenChangedFn is called

package/src/turnstile.ts

@@ -0,0 +1,180 @@
+/*! Source: (c) Descope and Cloudflare | https://developers.cloudflare.com/turnstile/ */
+
+// define the global interface for the turnstile object
+declare global {
+  interface Window {
+    turnstile?: {
+      ready: (callback: () => void) => void;
+      execute: (widgetId: any, options: { action: string }) => Promise<string>;
+      render: (container: HTMLElement, parameters: any) => any;
+      reset: (widgetId: any) => void;
+    };
+    onloadTurnstileCallback: () => void;
+  }
+}
+
+// Token refresh time: 105 seconds (2 minutes minus 15 seconds)
+// Set to refresh the token shortly before expiration to ensure
+// we always have a valid token when submitting the form
+const TOKEN_REFRESH_TIME_MS = 105000;
+
+const loadTurnstile = (
+  initArgs: {
+    appearance: boolean;
+    siteKey: string;
+
+  },
+  _inputs: { baseUrl?: string },
+  onTokenReady: (token: string) => void,
+) => {
+  let lastTokenFetchTime = new Date().getTime();
+
+  const getScriptURL = () => {
+    const url = new URL('https://challenges.cloudflare.com');
+    url.pathname += 'turnstile/v0/api.js';
+    url.searchParams.append('onload', 'onloadTurnstileCallback');
+    url.searchParams.append('render', 'explicit');
+    return url.toString();
+  };
+
+  const loadScript = () => {
+    const script = document.createElement('script');
+    script.src = getScriptURL();
+    script.async = true;
+    script.id = 'turnstile-script';
+    script.defer = false;
+    document.body.appendChild(script);
+  };
+
+  const getInstance = () => globalThis.turnstile;
+
+  let timer;
+  let turnstileWidgetId;
+
+  const executeNewToken = (turnstileInstance: any, currentNode: HTMLDivElement) => {
+    if (!initArgs.siteKey) {
+      return;
+    }
+    turnstileInstance?.execute(turnstileWidgetId, { action: 'load' });
+    lastTokenFetchTime = new Date().getTime();
+  }
+
+  const getNewToken = (turnstileInstance: any, currentNode: HTMLDivElement) => {
+    // sometimes the turnstile instance may return configuration error
+    // on the first call, so we need to retry
+    try {
+      turnstileInstance.ready(() => {
+        executeNewToken(turnstileInstance, currentNode);
+      });
+    } catch (e) {
+      try {
+        executeNewToken(turnstileInstance, currentNode);
+      } catch (e) {
+        console.warn('could not execute turnstile', e);
+      }
+    } finally {
+      // Set a timeout to refresh the token before it expires
+      timer = setTimeout(() => {
+        getNewToken(turnstileInstance, currentNode);
+      }, TOKEN_REFRESH_TIME_MS);
+    }
+  };
+
+  const stopTimer = () => {
+    clearTimeout(timer);
+  };
+
+  const createTurnstileElement = () => {
+    const turnstileEle = document.createElement('div');
+    turnstileEle.style.display = 'none';
+    turnstileEle.id = 'descope-turnstile';
+    turnstileEle.className = 'cf-turnstile'
+    return document.body.appendChild(turnstileEle);
+  };
+
+  const elementRef = createTurnstileElement();
+
+  const resumeScriptExecution = () => {
+    const turnstileInstance = getInstance();
+    if (!turnstileInstance) {
+      return;
+    }
+    turnstileInstance.reset(turnstileWidgetId);
+    getNewToken(turnstileInstance, elementRef);
+  };
+
+  /**
+   * Checks if the turnstile token needs refreshing and refreshes it if necessary
+   * This is called before form submission to ensure we have a valid token
+   * @returns Promise that resolves when token is refreshed or if refresh isn't needed
+   */
+  const refreshIfTokenExpired = async (): Promise<void> => {
+    const currentTime = Date.now();
+    const timeDiff = currentTime - lastTokenFetchTime;
+
+    if (timeDiff > TOKEN_REFRESH_TIME_MS) {
+      const prev = lastTokenFetchTime;
+      resumeScriptExecution();
+
+      // Return a promise that resolves once the token is refreshed or times out
+      return new Promise<void>((resolve) => {
+        // Set a timeout to prevent indefinite waiting
+        const timeout = setTimeout(() => {
+          console.warn('Turnstile token refresh timed out');
+          resolve(); // Resolve anyway to prevent blocking form submission
+        }, 5000); // 5 second timeout for token refresh
+
+        const checkToken = () => {
+          if (lastTokenFetchTime !== prev) {
+            clearTimeout(timeout);
+            resolve();
+          } else {
+            setTimeout(checkToken, 150);
+          }
+        };
+
+        checkToken();
+      });
+    }
+
+    // If no refresh is needed, return a resolved promise
+    return Promise.resolve();
+  };
+
+  const createOnLoadScript = () => {
+    window.onloadTurnstileCallback = () => {
+      const currentNode = elementRef;
+
+      if (currentNode.hasChildNodes()) {
+        return;
+      }
+
+      const turnstileInstance = getInstance();
+
+      if (!turnstileInstance) {
+        return;
+      }
+
+      setTimeout(() => {
+        turnstileWidgetId = turnstileInstance.render(currentNode, {
+          sitekey: initArgs.siteKey,
+          execution: 'execute',
+          appearance: initArgs.appearance || 'execute',
+          callback: (token: string) => onTokenReady(token),
+        });
+        getNewToken(turnstileInstance, currentNode);
+      }, 0);
+    };
+  };
+
+  createOnLoadScript();
+  loadScript();
+
+  return {
+    stop: stopTimer,
+    start: resumeScriptExecution,
+    refresh: refreshIfTokenExpired,
+  };
+};
+
+export default loadTurnstile;