Sveltekit_turnstile

Turnstile Basic – SvelteKit + Cloudflare CAPTCHA

A minimal implementation of Cloudflare Turnstile in a SvelteKit project with progressive enhancement (use:enhance). This setup ensures smooth CAPTCHA validation while allowing multiple form submissions.

📖 Read more about this implementation on my Dev.to blog

🚀 Features

🛡️ Cloudflare Turnstile integration
⚡ Progressive enhancement with use:enhance
🔄 Allows multiple form submissions without page refresh
🏗️ Fake CAPTCHA environment for local development

📦 Installation

git clone https://github.com/KevinCotoCarrera/SvelteKit_Turnstile.git
cd turnstile-basic
npm install

🛠️ Setup

Create a .env file and add your Turnstile secret key:

SECRET_TURNSTILE_KEY=your_real_or_fake_key
VITE_TURNSTILE_SITEKEY=your_public_site_key

Run the development server
```
npm run dev
```

🔍 Key Implementation Details

✅ Turnstile Validation (Server-side)

async function validateToken(token: string): Promise<boolean> {
    if (SECRET_TURNSTILE_KEY === 'FAKE_SECRET_KEY') return true;

    const response = await fetch('https://challenges.cloudflare.com/turnstile/v0/siteverify', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams({
            secret: SECRET_TURNSTILE_KEY,
            response: token
        })
    });
    const data = await response.json();
    return data.success;
}

🔄 Allowing Multiple Submissions (`use:enhance`)

$effect(() => {
    if (form) {
        showCaptcha = false;
        setTimeout(() => (showCaptcha = true), 0);
        form = null;
    }
});

📖 Read More on Dev.to

For a deeper explanation, check out my full blog post:
🔗 Read the article on Dev.to

📜 License

This project is licensed under the MIT License. Feel free to use and modify it!

Would you like me to tweak the wording or format to match your style? 😊

Top categories