hCaptcha, a bot detection tool, usage in Supabase and Chatwoot

<div className="self-center">
 <HCaptcha
   ref={captchaRef}
   sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY!}
   size="invisible"
   onVerify={(token) => {
     setCaptchaToken(token)
   }}
   onExpire={() => {
     setCaptchaToken(null)
   }}
 />
</div>

import HCaptcha from '@hcaptcha/react-hcaptcha'

const [captchaToken, setCaptchaToken] = useState<string | null>(null)
const captchaRef = useRef<HCaptcha>(null)
…
let token = captchaToken
 
if (!token) {
 const captchaResponse = await captchaRef.current?.execute({ async: true })
 token = captchaResponse?.response ?? null
}
 
const { error } = await auth.signInWithPassword({
 email,
 password,
 options: { captchaToken: token ?? undefined },
})

<div v-if="globalConfig.hCaptchaSiteKey" class="mb-3">
  <VueHcaptcha
    ref="hCaptcha"
    :class="{ error: !hasAValidCaptcha && didCaptchaReset }"
    :sitekey="globalConfig.hCaptchaSiteKey"
    @verify="onRecaptchaVerified"
  />
  <span
    v-if="!hasAValidCaptcha && didCaptchaReset"
    class="text-xs text-red-400"
  >
    {{ $t('SET_NEW_PASSWORD.CAPTCHA.ERROR') }}
  </span>
</div>

methods: {
    async submit() {
      this.v$.$touch();
      if (this.v$.$invalid) {
        this.resetCaptcha();
        return;
      }
      this.isSignupInProgress = true;
      try {
        await register(this.credentials);
        window.location = DEFAULT_REDIRECT_URL;
      } catch (error) {
        let errorMessage =
          error?.message || this.$t('REGISTER.API.ERROR_MESSAGE');
        this.resetCaptcha();
        useAlert(errorMessage);
      } finally {
        this.isSignupInProgress = false;
      }
    },
    onRecaptchaVerified(token) {
      this.credentials.hCaptchaClientResponse = token;
      this.didCaptchaReset = false;
    },
    resetCaptcha() {
      if (!this.globalConfig.hCaptchaSiteKey) {
        return;
      }
      this.$refs.hCaptcha.reset();
      this.credentials.hCaptchaClientResponse = '';
      this.didCaptchaReset = true;
    },
  },
};