Svelte Recaptcha V2

Overview:

The svelte-recaptcha-v2 is a Google reCAPTCHA v2 implementation specifically designed for Svelte SPA, SSR, and SvelteKit static sites. It offers various features such as compatibility with Svelte’s server-side rendering, easy integration with third-party form validation libraries, support for both invisible and checkbox reCAPTCHA, event model for intercepting different reCAPTCHA states, and more. The library provides proper DOM cleanup and includes TypeScript definitions for LSP.

Features:

• Svelte Server Side Rendering (SSR) friendly
• Works with SvelteKit SPA, SSR, and static site adapters
• Easy integration with third-party form validation libraries
• Fail-safe loader to inject reCAPTCHA
• Invisible reCAPTCHA or checkbox reCAPTCHA support
• Event model for intercepting various reCAPTCHA states
• Handle all your form logic in a single submit handler
• Proper DOM cleanup (deletes reCAPTCHA completely)
• Documented, debug.js friendly source code
• TypeScript definitions are included for LSP

Installation:

To get started with svelte-recaptcha-v2, follow these steps:

1. Import the library onto your template and update your Google Key:

import { RecaptchaProvider } from 'svelte-recaptcha-v2';

2. In your form, add the component:

<RecaptchaProvider sitekey="YOUR_SITE_KEY"></RecaptchaProvider>

3. Setup your event handlers:

import { recaptchaInstance } from 'svelte-recaptcha-v2';

// Example event handler
recaptchaInstance.on('challenge', () => {
  // Handle challenge event
});

// More event handlers can be added as needed

4. Update your form handler:

import { recaptchaInstance } from 'svelte-recaptcha-v2';

// Example form handler
const handleSubmit = async () => {
  const token = await recaptchaInstance.execute();
  // Use the token for form submission
};

Summary:

The svelte-recaptcha-v2 library provides a convenient way to implement Google reCAPTCHA v2 in Svelte applications. It offers compatibility with server-side rendering, SvelteKit, and static site adapters. The library has features like easy integration with third-party form validation libraries, support for invisible or checkbox reCAPTCHA, event model for intercepting reCAPTCHA states, and proper DOM cleanup. Additionally, it includes TypeScript definitions for better development experience.