Call done callback once Arkose is ready

src/web-auth/captcha.js

@@ -90,7 +90,6 @@ function globalForCaptchaProvider(provider) {
       return window.arkose;
     case AUTH0_V2_CAPTCHA_PROVIDER:
       return window.turnstile;
-    /* istanbul ignore next */
     default:
       throw new Error('Unknown captcha provider');
   }
@@ -210,7 +209,7 @@ function injectCaptchaScript(element, opts, callback, setValue) {
   loadScript(scriptSrc, attributes);
 }
 
-function handleCaptchaProvider(element, options, challenge) {
+function handleCaptchaProvider(element, options, challenge, done) {
   var widgetId =
     element.hasAttribute('data-wid') && element.getAttribute('data-wid');
 
@@ -276,7 +275,19 @@ function handleCaptchaProvider(element, options, challenge) {
       var global = globalForCaptchaProvider(challenge.provider);
       if (challenge.provider === ARKOSE_PROVIDER) {
         var retryCount = 0;
+        var arkoseLoaded = false;
         arkose.setConfig({
+          onReady: function () {
+            if (!arkoseLoaded) {
+              done(null, {
+                triggerCaptcha: function (solvedCallback) {
+                  arkose.run();
+                  captchaSolved = solvedCallback;
+                }
+              });
+              arkoseLoaded = true;
+            }
+          },
           onCompleted: function (response) {
             setValue(response.token);
             captchaSolved();
@@ -307,6 +318,7 @@ function handleCaptchaProvider(element, options, challenge) {
             setValue();
           }
         });
+        done();
       } else {
         var renderParams = {
           callback: setValue,
@@ -338,6 +350,7 @@ function handleCaptchaProvider(element, options, challenge) {
         }
         widgetId = global.render(captchaDiv, renderParams);
         element.setAttribute('data-wid', widgetId);
+        done();
       }
     },
     setValue
@@ -382,6 +395,7 @@ function render(auth0Client, flow, element, options, callback) {
       element.style.display = '';
       if (challenge.provider === AUTH0_PROVIDER) {
         handleAuth0Provider(element, options, challenge, load);
+        done();
       } else if (
         challenge.provider === RECAPTCHA_V2_PROVIDER ||
         challenge.provider === RECAPTCHA_ENTERPRISE_PROVIDER ||
@@ -390,19 +404,10 @@ function render(auth0Client, flow, element, options, callback) {
         challenge.provider === ARKOSE_PROVIDER ||
         challenge.provider === AUTH0_V2_CAPTCHA_PROVIDER
       ) {
-        handleCaptchaProvider(element, options, challenge);
-      }
-      if (challenge.provider === ARKOSE_PROVIDER) {
-        done(null, {
-          triggerCaptcha: function (solvedCallback) {
-            globalForCaptchaProvider(challenge.provider).run();
-            captchaSolved = solvedCallback;
-          }
-        });
-      } else {
-        done();
+        handleCaptchaProvider(element, options, challenge, done);
       }
     }
+
     if (flow === Flow.PASSWORDLESS) {
       auth0Client.passwordless.getChallenge(challengeCallback);
     } else if (flow === Flow.PASSWORD_RESET) {

test/web-auth/captcha.test.js

@@ -488,7 +488,6 @@ describe('captcha rendering', function () {
         `/${'v2'}/${challenge.siteKey}/${'api.js'}`
       );
       expect(arkoseCallback).to.be.a('function');
-      expect(triggerCaptcha).to.be.a('function');
     });
 
     it('should reinject the captcha script on error', function () {
@@ -534,12 +533,15 @@ describe('captcha rendering', function () {
         runSpy = sinon.spy(arkose, 'run');
         resetSpy = sinon.spy(arkose, 'reset');
         arkoseCallback(arkose);
+        configOptions.onReady();
       });
 
       it('should setup captcha config', function () {
         expect(setConfigSpy.calledOnce).to.be.ok();
+        expect(configOptions).to.have.property('onReady');
         expect(configOptions).to.have.property('onCompleted');
         expect(configOptions).to.have.property('onError');
+        expect(triggerCaptcha).to.be.a('function');
       });
 
       it('should set the value on the input when the user completes the captcha', function () {
@@ -1091,7 +1093,6 @@ describe('passwordless captcha rendering', function () {
         `/${'v2'}/${challenge.siteKey}/${'api.js'}`
       );
       expect(arkoseCallback).to.be.a('function');
-      expect(triggerCaptcha).to.be.a('function');
     });
 
     describe('after captcha is loaded', function () {
@@ -1108,12 +1109,15 @@ describe('passwordless captcha rendering', function () {
         runSpy = sinon.spy(arkose, 'run');
         resetSpy = sinon.spy(arkose, 'reset');
         arkoseCallback(arkose);
+        configOptions.onReady();
       });
 
       it('should setup captcha config', function () {
         expect(setConfigSpy.calledOnce).to.be.ok();
+        expect(configOptions).to.have.property('onReady');
         expect(configOptions).to.have.property('onCompleted');
         expect(configOptions).to.have.property('onError');
+        expect(triggerCaptcha).to.be.a('function');
       });
 
       it('should set the value on the input when the user completes the captcha', function () {
@@ -1665,7 +1669,6 @@ describe('password reset captcha rendering', function () {
         `/${'v2'}/${challenge.siteKey}/${'api.js'}`
       );
       expect(arkoseCallback).to.be.a('function');
-      expect(triggerCaptcha).to.be.a('function');
     });
 
     describe('after captcha is loaded', function () {
@@ -1682,12 +1685,15 @@ describe('password reset captcha rendering', function () {
         runSpy = sinon.spy(arkose, 'run');
         resetSpy = sinon.spy(arkose, 'reset');
         arkoseCallback(arkose);
+        configOptions.onReady();
       });
 
       it('should setup captcha config', function () {
         expect(setConfigSpy.calledOnce).to.be.ok();
+        expect(configOptions).to.have.property('onReady');
         expect(configOptions).to.have.property('onCompleted');
         expect(configOptions).to.have.property('onError');
+        expect(triggerCaptcha).to.be.a('function');
       });
 
       it('should set the value on the input when the user completes the captcha', function () {