From 121e73ae7c1240fff90627678eb39c922ae664d3 Mon Sep 17 00:00:00 2001
From: Tre Moore <tre.moore@okta.com>
Date: Mon, 17 Jun 2024 09:40:49 -0700
Subject: [PATCH] Refactor ID determination

---
 src/field/captcha/third_party_captcha.jsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/field/captcha/third_party_captcha.jsx b/src/field/captcha/third_party_captcha.jsx
index 76b5afdc1..d2f006b98 100644
--- a/src/field/captcha/third_party_captcha.jsx
+++ b/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)}`} id={this.props.provider === HCAPTCHA_PROVIDER ? 'h-captcha' : ''} 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>
     );
   }