[IAMRISK-3554] hcaptcha bug fix (#2566)

### Changes

There's an issue with hcaptcha dissapearing and not reloading. There's a
related thread
[here](https://invisioncommunity.com/forums/topic/477281-hcaptcha-integration-not-working-as-expected/)
that goes more in depth into the problem. The fix involves resetting the
`window.hcaptcha` variable to force a reload.

### References

[Ticket](https://auth0team.atlassian.net/browse/IAMRISK-3554)

### Testing

* [x] This change adds unit test coverage
* [ ] This change adds integration test coverage
* [x] This change has been tested on the latest version of the
platform/language

### Checklist

* [x] I have read the [Auth0 general contribution
guidelines](https://github.com/auth0/open-source-template/blob/master/GENERAL-CONTRIBUTING.md)
* [x] I have read the [Auth0 Code of
Conduct](https://github.com/auth0/open-source-template/blob/master/CODE-OF-CONDUCT.md)
* [x] All code quality tools/guidelines have been run/followed
* [ ] All relevant assets have been compiled

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

@@ -6,6 +6,7 @@ exports[`Arkose should match the snapshot 1`] = `
 >
   <div
     className="auth0-lock-arkose"
+    id=""
   />
 </div>
 `;

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

@@ -6,6 +6,7 @@ exports[`Auth0 V2 should match the snapshot 1`] = `
 >
   <div
     className="auth0-lock-auth0-v2"
+    id=""
   />
 </div>
 `;

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

@@ -6,6 +6,7 @@ exports[`friendly captcha should match the snapshot 1`] = `
 >
   <div
     className="auth0-lock-friendly-captcha"
+    id=""
   />
 </div>
 `;

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

@@ -6,6 +6,7 @@ exports[`hCaptcha should match the snapshot 1`] = `
 >
   <div
     className="auth0-lock-hcaptcha"
+    id="h-captcha"
   />
 </div>
 `;

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

@@ -6,6 +6,7 @@ exports[`Recaptcha Enterprise should match the snapshot 1`] = `
 >
   <div
     className="auth0-lock-recaptchav2"
+    id=""
   />
 </div>
 `;

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

@@ -6,6 +6,7 @@ exports[`Recaptcha v2 should match the snapshot 1`] = `
 >
   <div
     className="auth0-lock-recaptchav2"
+    id=""
   />
 </div>
 `;

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

@@ -157,14 +157,24 @@ describe('ThirdPartyCaptcha', () => {
     });
 
     it('should call render with the correct renderParams', () => {
-      const renderParams = global.window.hcaptcha.render.mock.calls[0][1];
+      const renderCalls = global.window.hcaptcha.render.mock.calls;
+      const renderParams = renderCalls[0][1];
       expect(renderParams).toEqual({
         sitekey: 'mySiteKey',
         callback: expect.any(Function),
         'expired-callback': expect.any(Function),
         'error-callback': expect.any(Function)
       });
+      expect(renderCalls.length).toEqual(1);
     });
+
+    it('should call render on update', () => {
+      act(() => {
+        wrapper.setState();
+        const renderCalls = global.window.hcaptcha.render.mock.calls;
+        expect(renderCalls.length).toEqual(1);
+      })
+    })
   });
 
   describe('auth0_v2', () => {

src/field/captcha/third_party_captcha.jsx

@@ -72,6 +72,14 @@ const providerDomPrefix = (provider) => {
   }
 };
 
+const providerComponentId = (provider) => {
+  if (provider === HCAPTCHA_PROVIDER) {
+    return 'h-captcha';
+  } else {
+    return '';
+  }
+};
+
 const loadScript = (url, attributes) => {
   var script = document.createElement('script');
   for (var attr in attributes) {
@@ -302,7 +310,7 @@ export class ThirdPartyCaptcha extends React.Component {
             : `auth0-lock-${providerDomPrefix(this.props.provider)}-block auth0-lock-${providerDomPrefix(this.props.provider)}-block-error`
         }
       >
-        <div className={`auth0-lock-${providerDomPrefix(this.props.provider) === 'recaptcha' ? 'recaptchav2' : providerDomPrefix(this.props.provider)}`} ref={this.ref} />
+        <div className={`auth0-lock-${providerDomPrefix(this.props.provider) === 'recaptcha' ? 'recaptchav2' : providerDomPrefix(this.props.provider)}`} id={providerComponentId(this.props.provider)} ref={this.ref} />
       </div>
     );
   }
@@ -316,9 +324,13 @@ export class ThirdPartyCaptcha extends React.Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
+    let hCaptchaComponent = document.getElementById("h-captcha");
     if (prevProps.value !== this.props.value && this.props.value === '') {
       this.reset();
     }
+    if (this.props.provider === HCAPTCHA_PROVIDER && hCaptchaComponent && window[this.props.provider]) {
+      window[this.props.provider].render('h-captcha', this.getRenderParams());
+    }
   }
 }