Svelte

Install and use the @myrasec/eu-captcha-svelte package to embed EU CAPTCHA in your Svelte or SvelteKit application.

Package	Version
@myrasec/eu-captcha-svelte	0.0.2

Server-side verification is identical regardless of frontend framework — see Server-Side Verification.

---

Installation

npm i @myrasec/eu-captcha-svelte

Basic usage

<script>
  import { EuCaptcha, isEuCaptchaDone } from "@myrasec/eu-captcha-svelte";

  function handleSubmit(event) {
    event.preventDefault();
    if (!isEuCaptchaDone()) {
      // challenge not yet complete
      return;
    }
    // proceed with form submission
  }
</script>

<form on:submit={handleSubmit}>
  <!-- your fields -->
  <EuCaptcha sitekey="EUCAPTCHA_SITE_KEY" />
  <button type="submit">Submit</button>
</form>

Props

Prop	Type	Default	Description
sitekey	string	—	Your public sitekey (required)
theme	string	"light"	Visual theme: "light" or "dark"
width	number	330	Widget width in pixels
height	number	100	Widget height in pixels
widgetId	string	—	Custom widget ID. If omitted, an ID is auto-generated. Needed when calling euCaptcha.execute().
autostart	boolean	true	Start the challenge automatically on mount. Set to false to defer until euCaptcha.execute(widgetId) is called.
onComplete	(token: string) => void	—	Called with the encoded token when the challenge completes.
onExpired	() => void	—	Called when the token expires (60 minutes after completion).
onError	() => void	—	Called when the challenge fails due to a network or server error.

Checking completion before submit

import { isEuCaptchaDone } from "@myrasec/eu-captcha-svelte";

function handleSubmit(event) {
  event.preventDefault();
  if (!isEuCaptchaDone()) {
    // challenge not yet complete
    return;
  }

  // proceed with form submission
}

Callbacks

Use onComplete, onExpired, and onError to react to widget events without listening for window messages manually:

<EuCaptcha
  sitekey="EUCAPTCHA_SITE_KEY"
  onComplete={(token) => { verified = true; }}
  onExpired={() => { verified = false; }}
  onError={() => { errorMsg = 'CAPTCHA failed. Please try again.'; }}
/>

Deferred execution

Set autostart={false} and provide a widgetId to suppress the automatic challenge, then trigger it programmatically:

<EuCaptcha
  sitekey="EUCAPTCHA_SITE_KEY"
  widgetId="login-captcha"
  autostart={false}
  onComplete={(token) => submitForm(token)}
/>

<button on:click={() => window.euCaptcha.execute('login-captcha')}>
  Verify and submit
</button>

Listening for completion

If you prefer to use the euCaptchaDone window message — for example, to enable a submit button from outside the component — listen for it with onMount/onDestroy:

<script>
  import { onMount, onDestroy } from "svelte";

  let submitEnabled = false;

  function listenForCaptchaDone(msg) {
    if (msg.data.type === "euCaptchaDone") {
      submitEnabled = true;
    }
  }

  onMount(() => window.addEventListener("message", listenForCaptchaDone, false));
  onDestroy(() => window.removeEventListener("message", listenForCaptchaDone, false));
</script>

Retrieving the token

Once complete, the widget injects a hidden input into the surrounding <form>:

<input type="hidden" name="eu-captcha-response" value="<token>" />

If you are submitting via fetch, read the token from the DOM or use the onComplete prop:

const token = document.querySelector('input[name="eu-captcha-response"]')?.value ?? "";

Pass it to your server endpoint and verify it with the verification API.