cloudflare-turnstile
Cloudflare Turnstile provides CAPTCHA-alternative bot protection for modern web applications. Set up the widget on your frontend, validate tokens server-side via the Siteverify API, and choose between managed, non-interactive, or invisible modes based on your security and UX needs.
Cloudflare Turnstile lets you add bot protection to web forms with server-side token validation across Workers, React, Next.js, and Hono.
AI-generated summary based on this skill's SKILL.md
Install
secondsky/claude-skills/cloudflare-turnstile · repository language: TypeScript
git clone https://github.com/secondsky/claude-skills
cp -r claude-skills/plugins/cloudflare-turnstile/skills/cloudflare-turnstile ~/.claude/skills/cloudflare-turnstilenpx skillfed install secondsky/claude-skills/cloudflare-turnstileFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I add Turnstile to my website?
Cloudflare Turnstile provides CAPTCHA-alternative bot protection for modern web applications. To add Turnstile, first create a site in the Cloudflare dashboard to obtain your Site Key and Secret Key. Then embed the Turnstile widget on your frontend by including the Cloudflare script and rendering the widget container. On form submission, retrieve the token and validate it server-side using the Siteverify API with your Secret Key. Choose between managed (interactive), non-interactive, or invisible modes based on your security and UX needs.
What does Turnstile error 300030 mean and how do I fix it?
Cloudflare Turnstile error 300030 typically indicates a token validation failure on the server side. This occurs when the Siteverify API rejects the token, often due to an expired token (valid for 5 minutes), an incorrect Secret Key, or a mismatch between the Site Key used on the frontend and the one configured in your Cloudflare dashboard. Verify your keys match, ensure tokens are validated immediately after submission, and check that your server is sending the correct token and Secret Key to the Siteverify endpoint.
How do I validate Turnstile tokens securely on the server side?
Cloudflare Turnstile tokens are validated using the Siteverify API. After the user completes the challenge and your frontend receives a token, send a POST request from your server to the Siteverify endpoint with your Secret Key and the token. The API returns a success boolean and metadata. Never expose your Secret Key on the frontend; always validate server-side. Store your Secret Key as an environment variable and use it only in your backend code to prevent unauthorized token validation.
How do I integrate Turnstile with React or Next.js?
Cloudflare Turnstile integrates with React and Next.js by including the Turnstile script in your HTML head and rendering the widget container in your component. For React, use the useEffect hook to initialize the widget after the script loads. For Next.js, add the script in your _document.js or layout file and render the widget in your form component. On form submission, retrieve the token from the widget's callback and send it to your backend for validation via the Siteverify API.
What is the Cloudflare Turnstile CSP error 200500?
Cloudflare Turnstile CSP error 200500 occurs when your Content Security Policy (CSP) headers block the Turnstile widget script or resources. To fix this, add Cloudflare's Turnstile domain to your CSP directives: allow `https://challenges.cloudflare.com` in script-src and frame-src. If using a strict CSP, also allow the Turnstile API endpoint. Update your CSP headers in your web server or application configuration to permit Cloudflare's resources.
Can I migrate from reCAPTCHA or hCaptcha to Cloudflare Turnstile?
Cloudflare Turnstile is a modern CAPTCHA alternative designed as a replacement for reCAPTCHA and hCaptcha. Migration involves obtaining your Turnstile Site Key and Secret Key from the Cloudflare dashboard, replacing your existing CAPTCHA script and widget with Turnstile's, and updating your server-side token validation to use the Siteverify API instead of your previous provider's endpoint. The integration process is similar, making migration straightforward for most applications.
SKILL.md
rendered from the published skill — quoted content, verbatim
Cloudflare Turnstile
Status: Production Ready ✅ | Last Verified: 2025-11-26
Dependencies: None (optional: @marsidev/react-turnstile for React)
Contents: [Quick
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 15 files
plugins/cloudflare-turnstile/skills/cloudflare-turnstile/SKILL.md
plugins/cloudflare-turnstile/skills/cloudflare-turnstile/references/advanced-topics.md
plugins/cloudflare-turnstile/skills/cloudflare-turnstile/references/browser-support.md
plugins/cloudflare-turnstile/skills/cloudflare-turnstile/references/common-patterns.md
plugins/cloudflare-turnstile/skills/cloudflare-turnstile/references/error-codes.md
plugins/cloudflare-turnstile/skills/cloudflare-turnstile/references/migration-guide.md
plugins/cloudflare-turnstile/skills/cloudflare-turnstile/references/mobile-implementation.md
plugins/cloudflare-turnstile/skills/cloudflare-turnstile/references/react-integration.md
plugins/cloudflare-turnstile/skills/cloudflare-turnstile/references/setup-checklist.md
plugins/cloudflare-turnstile/skills/cloudflare-turnstile/references/testing-guide.md
plugins/cloudflare-turnstile/skills/cloudflare-turnstile/references/widget-configs.md
plugins/cloudflare-turnstile/skills/cloudflare-turnstile/scripts/check-csp.sh
plugins/cloudflare-turnstile/skills/cloudflare-turnstile/templates/turnstile-hono-route.ts
plugins/cloudflare-turnstile/skills/cloudflare-turnstile/templates/turnstile-react-component.tsx
plugins/cloudflare-turnstile/skills/cloudflare-turnstile/templates/turnstile-server-validation.ts