Svelte / SvelteKit | CAPTCHACAT

Integration guide for Svelte and SvelteKit applications.

Full Example

See the complete working example on GitHub: Captchacat-Integrations/Svelte

Installation#

npm install @captchacat/svelte

Component Usage#

src/routes/+page.svelte

<script lang="ts">
  import { Captchacat } from '@captchacat/svelte';
 
  let username = '';
  let password = '';
  let isVerified = false;
  let captchaToken: string | null = null;
 
  function handleVerify(event: CustomEvent<string>) {
    isVerified = true;
    captchaToken = event.detail;
  }
 
  async function handleSubmit(e: SubmitEvent) {
    e.preventDefault();
 
    const formData = new FormData();
    formData.append('username', username);
    formData.append('password', password);
    if (captchaToken) {
      formData.append('captchacat-token', captchaToken);
    }
 
    const res = await fetch('/api/login', {
      method: 'POST',
      body: formData,
    });
 
    if (res.ok) {
      alert('Success!');
    }
  }
</script>
 
<form on:submit={handleSubmit}>
  <input bind:value={username} type="text" placeholder="Username" />
  <input bind:value={password} type="password" placeholder="Password" />
 
  <Captchacat siteKey="YOUR_SITE_KEY" on:verify={handleVerify} />
 
  <button type="submit" disabled={!isVerified}>Login</button>
</form>

Props#

Prop	Type	Required	Description
`siteKey`	`string`	Yes	Your Captchacat site key

Events#

Event	Payload	Description
`on:verify`	`string`	Dispatched when verification completes

Server Validation (SvelteKit API Route)#

src/routes/api/login/+server.ts

import { json, error } from '@sveltejs/kit';
import type { RequestHandler } from './$types';
import { validateCaptchacatToken } from '@captchacat/svelte/server';
 
export const POST: RequestHandler = async ({ request }) => {
  const formData = await request.formData();
 
  const username = formData.get('username') as string;
  const token = formData.get('captchacat-token') as string;
 
  if (!token) {
    throw error(400, { message: 'Captcha token missing' });
  }
 
  const result = await validateCaptchacatToken({
    apiKey: process.env.CAPTCHACAT_API_KEY!,
    token,
  });
 
  if (!result.valid) {
    throw error(403, { message: result.message || 'Captcha validation failed' });
  }
 
  // CAPTCHA valid - process login
  const password = formData.get('password');
  // ...
 
  return json({ success: true, username });
};

Form Integration#

The token is passed via the on:verify event. You can also use SvelteKit form actions:

src/routes/contact/+page.svelte

<script>
  import { Captchacat } from '@captchacat/svelte';
</script>
 
<form method="POST" action="?/submit">
  <input type="email" name="email" placeholder="Email" />
  <Captchacat siteKey="YOUR_SITE_KEY" />
  <button type="submit">Submit</button>
</form>

src/routes/contact/+page.server.ts

import { fail } from '@sveltejs/kit';
import { validateCaptchacatToken } from '@captchacat/svelte/server';
 
export const actions = {
  submit: async ({ request }) => {
    const data = await request.formData();
    const token = data.get('captchacat-token') as string;
 
    const result = await validateCaptchacatToken({
      apiKey: process.env.CAPTCHACAT_API_KEY!,
      token,
    });
 
    if (!result.valid) {
      return fail(400, { error: 'Captcha verification failed' });
    }
 
    // Process the form
    return { success: true };
  }
};