hCaptcha Component Library for SvelteJS.

hCaptcha is a drop-replacement for reCAPTCHA that protects user privacy, rewards websites, and helps companies get their data labeled. It's a simple way of proving that site users are human.

Sign up at hCaptcha to get your sitekey today. You need a sitekey to use this library.

This library is heavily inspired by react-hcaptcha.

You can install this library via npm:

npm install svelte-hcaptcha --save-dev

The two requirements for usage are the sitekey prop and a parent component such as a <form />. The component HCaptcha component will automatically include and load the hCaptcha API library and append it to the parent component, ready for use.

The HCaptcha component dispatches various events which you can listen to in the parent;

• mount - the component has been mounted
• load - the hCaptcha API script has successfully loaded
• success - a user has successfully completed an hCaptcha challenge. The payload of this event contains a token which can be used to verify the captcha
• error - something went wrong when the user attempted the captcha
• close - the captcha was closed
• expired - the captcha has expired and needs to be re-verified

You can read more about these events below. In particular, errors are described here.

If you don't supply the sitekey prop to the HCaptcha component, then it will try and load this from a window.sitekey variable. This approach can be useful e.g. when the component is to be mounted on a synchronously-rendered page, as you can inject the window.sitekey variable from a server backend.

Note also that it's not possible to develop against localhost or 127.0.0.1 when using this component. A useful tool in this scenario is ngrok. On Linux, you can also add an entry into /etc/hosts like 127.0.0.1 test.mydomain.com, then you can run svelte with --host test.mydomain.com. This is explained in the HCaptcha docs.

<form>
  <HCaptcha 
    sitekey={mySitekey} 
    theme={CaptchaTheme.DARK}
    on:success={handleSuccess}
    on:error={handleError}
  />
</form>

If you want to be able to reset the component (hint: you probably want to do this, for instance, if captcha verification fails), then you'll need to bind to it in the parent. The component exposes a .reset() method;

<script>
  let captcha;

  const handleError = () => {
    captcha.reset();
  }
</script>

...

<form>
  <HCaptcha 
    bind:this={captcha}
    on:error={handleError}
  />
</form>

Pull requests, suggestions, comments, critiques - all welcome :)

Please get in touch with the maintainers if you need help or advice to get the project to run.