Svelte Turnstile

Helper functions and component to integrate Svelte with an invisible Cloudflare Turnstile form validator

🕉 @feelinglovelynow/svelte-turnstile

💎 Install

pnpm add @feelinglovelynow/svelte-turnstile

🙏 Description

Helper functions and component to integrate Svelte w/ an invisible Cloudflare Turnstile form validator

💚 Properties

export let sitekey: string

💛 Instructions

Get Cloudflare account and in dashboard setup Turnstile
From Turnstile dashboard find Secret key
Add Secret key to .env file (CLOUDFLARE_TURNSTILE_PRIVATE_KEY)

Add turnstile script to app.html

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"></script> <!-- https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#disable-implicit-rendering -->

🧡 Example: Client side

If wondering how PUBLIC_ENVIRONMENT is set => @feelinglovelynow/env-write
If wondering where showToast comes from => @feelinglovelynow/toast ```svelte

<Turnstile on:state={ getTurnstileState } sitekey={ PUBLIC_ENVIRONMENT === 'local' ? PUBLIC_KEY_ALWAYS_PASSES : PUBLIC_KEY } />
```
### ❤️ Example: Server side
* If wondering how PUBLIC_ENVIRONMENT is set => [@feelinglovelynow/env-write](https://www.npmjs.com/package/@feelinglovelynow/env-write)
```ts
import { PUBLIC_ENVIRONMENT } from '$env/static/public'
import { CLOUDFLARE_TURNSTILE_PRIVATE_KEY } from '$env/static/private'
import { validate, CLOUDFLARE_TURNSTILE_PRIVATE_KEY_ALWAYS_PASSES } from '@feelinglovelynow/svelte-turnstile'

const fields = Object.fromEntries((await request.formData()).entries())
const secret = (PUBLIC_ENVIRONMENT === 'local') ? CLOUDFLARE_TURNSTILE_PRIVATE_KEY_ALWAYS_PASSES : CLOUDFLARE_TURNSTILE_PRIVATE_KEY

await validate(fields['cf-turnstile-response'], secret)
```
💟 Server Side Errors from validate.ts
```
if (!turnstileResponse) throw { id: 'fln__svelte-turnstile__no-turnstile-response', message: 'Please include a turnstileResponse' }
if (!secret) throw { id: 'fln__svelte-turnstile__no-secret', message: 'Please include a secret' }
if (!validationResponse.success) throw { id: 'fln__svelte-turnstile__validation-unsuccessful', message: 'For some reason our site believes you are a bot, we apologize, refresh your browser and submit again as human like as possible please' }
```
🎁 All our NPM Packages

Top categories