A lightweight SvelteKit utility that adds CAPTCHA protection to your forms with progressive enhancement. Supports reCAPTCHA v3, hCaptcha, and Cloudflare Turnstile.
npm install svelte-captcha-enhanceA lightweight SvelteKit utility that adds CAPTCHA protection to your forms with progressive enhancement. Supports reCAPTCHA v3, hCaptcha, and Cloudflare Turnstile.
- ð Multiple CAPTCHA providers: reCAPTCHA v3, hCaptcha, and Cloudflare Turnstile
- ðĶ Easy integration: Extends SvelteKit's enhance function with CAPTCHA support
- ðŊ TypeScript support: Fully typed for better developer experience
- ðŠķ Lightweight: Minimal bundle size impact
``bash`
npm install svelte-captcha-enhance
`svelte
$3
`svelte
method="post"
use:enhance={{
type: 'hcaptcha',
submit: ({ formData }) => ({ result }) => {
console.log('Form submitted:', result);
}
}}
>
`$3
`svelte
method="post"
use:enhance={{
type: 'turnstile',
sitekey: env.PUBLIC_TURNSTILE_SITEKEY,
submit: ({ formData }) => ({ result }) => {
console.log('Form submitted:', result);
}
}}
>
`API Reference
$3
#### Common Options
| Option | Type | Description |
|--------|------|-------------|
|
submit | SubmitFunction | Optional callback function (same as SvelteKit's enhance) |#### reCAPTCHA Options
| Option | Type | Required | Description |
|--------|------|----------|-------------|
|
type | 'recaptcha' | â
| CAPTCHA provider type |
| sitekey | string | â
| Your reCAPTCHA site key |
| action | string | â | Action name for reCAPTCHA v3 (default: 'submit') |#### hCaptcha Options
| Option | Type | Required | Description |
|--------|------|----------|-------------|
|
type | 'hcaptcha' | â
| CAPTCHA provider type |
| widget | string | â | Widget ID (uses first widget if unspecified) |#### Turnstile Options
| Option | Type | Required | Description |
|--------|------|----------|-------------|
|
type | 'turnstile' | â
| CAPTCHA provider type |
| sitekey | string | â
| Your Turnstile site key |
| container | string \| HTMLElement | â | Container element (uses form if unspecified) |
| theme | 'light' \| 'dark' \| 'auto' | â | Theme (default: 'auto') |
| size | 'normal' \| 'invisible' \| 'compact' | â | Size (default: 'normal') |
| language | string \| 'auto' | â | Language (default: 'auto') |#### Bypass Mode
For development or testing purposes:
`svelte
method="post"
use:enhance={{
type: 'bypass',
submit: ({ formData }) => ({ result }) => {
console.log('Form submitted without CAPTCHA');
}
}}
>
`Server-Side Validation
This library handles the client-side CAPTCHA integration only. You'll need to implement server-side validation yourself using your CAPTCHA provider's verification API. The CAPTCHA responses will be available in your form data as:
-
g-recaptcha-response (reCAPTCHA)
- h-captcha-response (hCaptcha)
- cf-turnstile-response` (Turnstile)Check out the examples directory for complete working examples of each CAPTCHA provider.