Svelte

The @myrasec/eu-captcha-svelte package supplies the EuCaptcha component for Svelte 5.

Requirements

The following requirements must be met:

Requirement	Value
Svelte	Version 5, also as the basis of SvelteKit
Sitekey	Public sitekey from the Details view
Server side	Endpoint that verifies the token

Install the package

Install the package:

npm i @myrasec/eu-captcha-svelte

Embed the component

Embed the component in the form to protect:

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

  const captchaSitekey = "EUCAPTCHA_SITE_KEY";

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

<form onsubmit={handleSubmit}>
  <!-- your fields -->
  <EuCaptcha sitekey={captchaSitekey} />
  <button type="submit">Submit</button>
</form>

Note

You can test the embedding with an invented sitekey. For an unknown sitekey, the CAPTCHA operates with the default values, and all traffic goes through.

Properties

These properties are available:

Property	Type	Default	Effect
sitekey	string	—	Public sitekey. The value is necessary.
theme	string	"light"	Appearance, values "light" and "dark".
width	number	330	Width of the widget in pixels.
height	number	100	Height of the widget in pixels.
widgetId	string	—	Your own identifier of the widget. Without a value, the package makes an identifier. For euCaptcha.execute(), the value is necessary.
autostart	boolean	true	Starts the challenge when the component is mounted. The false value delays the start until the euCaptcha.execute(widgetId) call.
onComplete	(token: string) => void	—	Is called with the token as soon as the challenge passed.
onExpired	() => void	—	Is called when the token expires. A token expires 60 minutes after the solution.
onError	() => void	—	Is called when a network error or a server error occurs.

Examples of the appearance:

<EuCaptcha sitekey={captchaSitekey} theme="dark" />
<EuCaptcha sitekey={captchaSitekey} width={280} />
<EuCaptcha sitekey={captchaSitekey} height={60} />

Use the callbacks

<EuCaptcha
  sitekey={captchaSitekey}
  onComplete={(token) => console.log("token:", token)}
  onExpired={() => console.log("token expired")}
  onError={() => console.log("challenge error")}
/>

Delay the start of the challenge

Set autostart to false and give an identifier:

<EuCaptcha
  sitekey={captchaSitekey}
  widgetId="my-captcha"
  autostart={false}
/>

<button onclick={() => (window as any).euCaptcha.execute("my-captcha")}>Verify</button>

Get the condition

Before the transmission, examine if the challenge passed:

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

function handleSubmit(e: SubmitEvent): void {
    e.preventDefault();
    if (!isEuCaptchaDone()) {
        // challenge not yet complete
        return;
    }
    // proceed with form submission
}

As an alternative, wait for the euCaptchaDone message at the window:

import { onMount, onDestroy } from "svelte";

function listenForCaptchaDone(msg: MessageEvent): void {
    if (msg.data.type === "euCaptchaDone") {
        // enable submit button, update reactive state, etc.
    }
}

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

SvelteKit

The component uses interfaces of the browser and does its full setup in onMount. Thus, you can also embed it in pages that are rendered on the server. No more settings are necessary. A test for browser or a dynamic import is not necessary.

Warning

The verification in the browser controls only the operation. Always also verify the token on the server. See Verify a client token.

Full example

See Svelte and Ruby.