[IAMRISK-2916] Added support for Auth0 v2 captcha provider

css/index.styl

@@ -1414,6 +1414,18 @@ loadingSize = 30px
     transform-origin: 0px 0px;
     position: relative;
 
+.auth0-lock-auth0-v2-block
+  border-radius: 4px;
+  height: 65px;
+
+  &.auth0-lock-auth0-v2-block-error
+    border: 1px solid red;
+
+  .auth0-lock-auth0-v2
+    transform: scale(0.855);
+    transform-origin: 0px 0px;
+    position: relative;
+
 .auth0-lock-friendly-captcha-block
   border-radius: 4px;
   border: 1px solid #eee;

src/__tests__/field/captcha.test.jsx

@@ -100,6 +100,28 @@ describe('CaptchaPane', () => {
     });
   });
 
+  describe('auth0_v2', () => {
+    let wrapper;
+    beforeAll(() => {
+      const lockMock = createLockMock({
+        provider: 'auth0_v2',
+        siteKey: 'mySiteKey'
+      });
+      const i8nMock = createI18nMock();
+      const onReloadMock = jest.fn();
+
+      wrapper = mount(<CaptchaPane lock={lockMock} onReload={onReloadMock} i18n={i8nMock} />);
+    });
+
+    it('should render ThirdPartyCaptcha if provider is auth0_v2', () => {
+      expect(wrapper.find(ThirdPartyCaptcha)).toHaveLength(1);
+    });
+
+    it('should pass the sitekey', () => {
+      expect(wrapper.find(ThirdPartyCaptcha).props().sitekey).toBe('mySiteKey');
+    });
+  });
+
   describe('recaptcha enterprise', () => {
     let wrapper;
     beforeAll(() => {

src/__tests__/field/captcha/__snapshots__/auth0_v2.test.jsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Auth0 V2 should match the snapshot 1`] = `
+<div
+  className="auth0-lock-auth0-v2-block auth0-lock-auth0-v2-block-error"
+>
+  <div
+    className="auth0-lock-auth0-v2"
+  />
+</div>
+`;

src/__tests__/field/captcha/auth0_v2.test.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { expectComponent } from 'testUtils';
+import { ThirdPartyCaptcha } from '../../../field/captcha/third_party_captcha';
+
+describe('Auth0 V2', () => {
+  const component = <ThirdPartyCaptcha provider={'auth0_v2'} hl="en" sitekey={'mySiteKey'} />;
+
+  it('should match the snapshot', () => {
+    expectComponent(component).toMatchSnapshot();
+  });
+
+  it('injects the script', () => {
+    const script = [...window.document.querySelectorAll('script')].find(s =>
+      s.src.startsWith(
+        'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit&onload='
+      )
+    );
+    expect(script).not.toBeUndefined();
+  });
+});

src/__tests__/field/captcha/third_party_captcha.test.jsx

@@ -0,0 +1,231 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import I from 'immutable';
+import * as l from '../../../core/index';
+import { ThirdPartyCaptcha } from '../../../field/captcha/third_party_captcha';
+
+const createLockMock = ({
+  provider = 'auth0',
+  required = true,
+  siteKey = '',
+  clientSubdomain = ''
+} = {}) =>
+  I.fromJS({
+    id: '__lock-id__',
+    core: {
+      captcha: { provider, siteKey, clientSubdomain, required: required }
+    }
+  });
+
+describe('ThirdPartyCaptcha', () => {
+  describe('recaptchav2', () => {
+    let shallowWrapper;
+    beforeAll(() => {
+      const lockMock = createLockMock({
+        provider: 'recaptcha_v2',
+        siteKey: 'mySiteKey'
+      });
+
+      const captcha = l.captcha(lockMock);
+      shallowWrapper = shallow(
+        <ThirdPartyCaptcha
+          provider={captcha.get('provider')}
+          sitekey={captcha.get('siteKey')}
+          clientSubdomain={captcha.get('clientSubdomain')}
+          hl={'en'}
+          isValid={true}
+          value={undefined}
+        />
+      ).instance();
+      shallowWrapper.componentDidMount();
+    });
+
+    it('should have correct renderParams', () => {
+      const { renderParams } = shallowWrapper;
+      expect(renderParams).toMatchObject({
+        sitekey: 'mySiteKey',
+        callback: expect.any(Function),
+        'expired-callback': expect.any(Function),
+        'error-callback': expect.any(Function)
+      });
+      expect(renderParams.language).toBeUndefined();
+      expect(renderParams.theme).toBeUndefined();
+      expect(Object.keys(renderParams)).toHaveLength(4);
+    });
+  });
+
+  describe('friendly captcha', () => {
+    let shallowWrapper;
+    beforeAll(() => {
+      const lockMock = createLockMock({
+        provider: 'friendly_captcha',
+        siteKey: 'mySiteKey'
+      });
+
+      const captcha = l.captcha(lockMock);
+      shallowWrapper = shallow(
+        <ThirdPartyCaptcha
+          provider={captcha.get('provider')}
+          sitekey={captcha.get('siteKey')}
+          clientSubdomain={captcha.get('clientSubdomain')}
+          hl={'en'}
+          isValid={true}
+          value={undefined}
+        />
+      ).instance();
+      shallowWrapper.componentDidMount();
+    });
+
+    it('should have correct renderParams', () => {
+      const { renderParams } = shallowWrapper;
+      expect(renderParams).toMatchObject({
+        sitekey: 'mySiteKey',
+        doneCallback: expect.any(Function),
+        errorCallback: expect.any(Function),
+        language: 'en'
+      });
+      expect(renderParams.theme).toBeUndefined();
+      expect(renderParams.callback).toBeUndefined();
+      expect(renderParams['expired-callback']).toBeUndefined();
+      expect(renderParams['error-callback']).toBeUndefined();
+      expect(Object.keys(renderParams)).toHaveLength(4);
+    });
+  });
+
+  describe('hcaptcha', () => {
+    let shallowWrapper;
+    beforeAll(() => {
+      const lockMock = createLockMock({
+        provider: 'hcaptcha',
+        siteKey: 'mySiteKey'
+      });
+
+      const captcha = l.captcha(lockMock);
+      shallowWrapper = shallow(
+        <ThirdPartyCaptcha
+          provider={captcha.get('provider')}
+          sitekey={captcha.get('siteKey')}
+          clientSubdomain={captcha.get('clientSubdomain')}
+          hl={'en'}
+          isValid={true}
+          value={undefined}
+        />
+      ).instance();
+      shallowWrapper.componentDidMount();
+    });
+
+    it('should have correct renderParams', () => {
+      const { renderParams } = shallowWrapper;
+      expect(renderParams).toMatchObject({
+        sitekey: 'mySiteKey',
+        callback: expect.any(Function),
+        'expired-callback': expect.any(Function),
+        'error-callback': expect.any(Function)
+      });
+      expect(renderParams.language).toBeUndefined();
+      expect(renderParams.theme).toBeUndefined();
+      expect(Object.keys(renderParams)).toHaveLength(4);
+    });
+  });
+
+  describe('auth0_v2', () => {
+    let shallowWrapper;
+    beforeAll(() => {
+      const lockMock = createLockMock({
+        provider: 'auth0_v2',
+        siteKey: 'mySiteKey'
+      });
+
+      const captcha = l.captcha(lockMock);
+      shallowWrapper = shallow(
+        <ThirdPartyCaptcha
+          provider={captcha.get('provider')}
+          sitekey={captcha.get('siteKey')}
+          clientSubdomain={captcha.get('clientSubdomain')}
+          hl={'en'}
+          isValid={true}
+          value={undefined}
+        />
+      ).instance();
+      shallowWrapper.componentDidMount();
+    });
+
+    it('should have correct renderParams', () => {
+      const { renderParams } = shallowWrapper;
+      expect(renderParams).toMatchObject({
+        sitekey: 'mySiteKey',
+        callback: expect.any(Function),
+        'expired-callback': expect.any(Function),
+        'error-callback': expect.any(Function),
+        language: 'en',
+        theme: 'light'
+      });
+      expect(Object.keys(renderParams)).toHaveLength(6);
+    });
+  });
+
+  describe('recaptcha enterprise', () => {
+    let shallowWrapper;
+    beforeAll(() => {
+      const lockMock = createLockMock({
+        provider: 'recaptcha_enterprise',
+        siteKey: 'mySiteKey'
+      });
+
+      const captcha = l.captcha(lockMock);
+      shallowWrapper = shallow(
+        <ThirdPartyCaptcha
+          provider={captcha.get('provider')}
+          sitekey={captcha.get('siteKey')}
+          clientSubdomain={captcha.get('clientSubdomain')}
+          hl={'en'}
+          isValid={true}
+          value={undefined}
+        />
+      ).instance();
+      shallowWrapper.componentDidMount();
+    });
+
+    it('should have correct renderParams', () => {
+      const { renderParams } = shallowWrapper;
+      expect(renderParams).toMatchObject({
+        sitekey: 'mySiteKey',
+        callback: expect.any(Function),
+        'expired-callback': expect.any(Function),
+        'error-callback': expect.any(Function)
+      });
+      expect(renderParams.language).toBeUndefined();
+      expect(renderParams.theme).toBeUndefined();
+      expect(Object.keys(renderParams)).toHaveLength(4);
+    });
+  });
+
+  describe('Arkose', () => {
+    let shallowWrapper;
+    beforeAll(() => {
+      const lockMock = createLockMock({
+        provider: 'arkose',
+        siteKey: 'mySiteKey',
+        clientSubdomain: 'client-api'
+      });
+
+      const captcha = l.captcha(lockMock);
+      shallowWrapper = shallow(
+        <ThirdPartyCaptcha
+          provider={captcha.get('provider')}
+          sitekey={captcha.get('siteKey')}
+          clientSubdomain={captcha.get('clientSubdomain')}
+          hl={'en'}
+          isValid={true}
+          value={undefined}
+        />
+      ).instance();
+      shallowWrapper.componentDidMount();
+    });
+
+    it('should have correct renderParams', () => {
+      const { renderParams } = shallowWrapper;
+      expect(renderParams).toBeUndefined();
+    });
+  });
+});

src/connection/captcha.js

@@ -18,6 +18,7 @@ export function showMissingCaptcha(m, id, isPasswordless = false) {
     captchaConfig.get('provider') === 'recaptcha_v2' ||
     captchaConfig.get('provider') === 'recaptcha_enterprise' ||
     captchaConfig.get('provider') === 'hcaptcha' ||
+    captchaConfig.get('provider') === 'auth0_v2' ||
     captchaConfig.get('provider') === 'friendly_captcha' 
   ) ? 'invalid_recaptcha' : 'invalid_captcha';
 

src/connection/passwordless/actions.js

@@ -34,6 +34,7 @@ function getErrorMessage(m, id, error) {
       captchaConfig.get('provider') === 'recaptcha_v2' ||
       captchaConfig.get('provider') === 'recaptcha_enterprise' ||
       captchaConfig.get('provider') === 'hcaptcha' ||
+      captchaConfig.get('provider') === 'auth0_v2' ||
       captchaConfig.get('provider') === 'friendly_captcha'
     ) ? 'invalid_recaptcha' : 'invalid_captcha';
   }

src/core/index.js

@@ -584,6 +584,7 @@ export function loginErrorMessage(m, error, type) {
         currentCaptcha.get('provider') === 'recaptcha_v2' ||
         currentCaptcha.get('provider') === 'recaptcha_enterprise' ||
         currentCaptcha.get('provider') === 'hcaptcha' ||
+        currentCaptcha.get('provider') === 'auth0_v2' ||
         captchaConfig.get('provider') === 'friendly_captcha'
       )) {
       code = 'invalid_recaptcha';