Source from repo
Cloudflare Platform Skill

Comprehensive Cloudflare platform skill covering Workers, D1, R2, KV, AI, Durable Objects, and security.
cloudflareGitHub cloudflareSource repo Original GitHub link Publisher page
Files
321
Skill
n/a
Size
1.4 MB
Entrypoint
SKILL.md
Format
git-repo
Open file
references/turnstile/configuration.md

Syntax-highlighted preview of this file as included in the skill package.
Rendered Source
markdown222 linesFree
references/turnstile/configuration.md
1# Configuration
2 
3## Script Loading
4 
5### Basic (Implicit Rendering)
6```html
7<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
8```
9Automatically renders widgets with `class="cf-turnstile"` on page load.
10 
11### Explicit Rendering
12```html
13<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"></script>
14```
15Manual control over when/where widgets render via `window.turnstile.render()`.
16 
17### With Load Callback
18```html
19<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=myCallback"></script>
20<script>
21function myCallback() {
22  // API ready
23  window.turnstile.render('#container', { sitekey: 'YOUR_SITE_KEY' });
24}
25</script>
26```
27 
28### Compatibility Mode
29```html
30<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?compat=recaptcha"></script>
31```
32Provides `grecaptcha` API for Google reCAPTCHA drop-in replacement.
33 
34## Widget Configuration
35 
36### Complete Options Object
37 
38```javascript
39{
40  // Required
41  sitekey: 'YOUR_SITE_KEY',        // Widget sitekey from dashboard
42 
43  // Callbacks
44  callback: (token) => {},          // Success - token ready
45  'error-callback': (code) => {},   // Error occurred
46  'expired-callback': () => {},     // Token expired (>5min)
47  'timeout-callback': () => {},     // Challenge timeout
48  'before-interactive-callback': () => {}, // Before showing checkbox
49  'after-interactive-callback': () => {},  // After user interacts
50  'unsupported-callback': () => {}, // Browser doesn't support Turnstile
51 
52  // Appearance
53  theme: 'auto',                    // 'light' | 'dark' | 'auto'
54  size: 'normal',                   // 'normal' | 'compact' | 'flexible'
55  tabindex: 0,                      // Tab order (accessibility)
56  language: 'auto',                 // ISO 639-1 code or 'auto'
57 
58  // Behavior
59  execution: 'render',              // 'render' (auto) | 'execute' (manual)
60  appearance: 'always',             // 'always' | 'execute' | 'interaction-only'
61  retry: 'auto',                    // 'auto' | 'never'
62  'retry-interval': 8000,           // Retry interval (ms), default 8000
63  'refresh-expired': 'auto',        // 'auto' | 'manual' | 'never'
64 
65  // Form Integration
66  'response-field': true,           // Add hidden input (default: true)
67  'response-field-name': 'cf-turnstile-response', // Hidden input name
68 
69  // Analytics & Data
70  action: 'login',                  // Action name (for analytics)
71  cData: 'user-session-123',        // Custom data (returned in siteverify)
72}
73```
74 
75### Key Options Explained
76 
77**`execution`:**
78- `'render'` (default): Challenge starts immediately on render
79- `'execute'`: Wait for `turnstile.execute()` call
80 
81**`appearance`:**
82- `'always'` (default): Widget always visible
83- `'execute'`: Hidden until `execute()` called
84- `'interaction-only'`: Hidden until user interaction needed
85 
86**`refresh-expired`:**
87- `'auto'` (default): Auto-refresh expired tokens
88- `'manual'`: App must call `reset()` after expiry
89- `'never'`: No refresh, expired-callback triggered
90 
91**`retry`:**
92- `'auto'` (default): Auto-retry failed challenges
93- `'never'`: Don't retry, trigger error-callback
94 
95## HTML Data Attributes
96 
97For implicit rendering, use data attributes on `<div class="cf-turnstile">`:
98 
99| JavaScript Property | HTML Data Attribute | Example |
100|---------------------|---------------------|---------|
101| `sitekey` | `data-sitekey` | `data-sitekey="YOUR_KEY"` |
102| `action` | `data-action` | `data-action="login"` |
103| `cData` | `data-cdata` | `data-cdata="session-123"` |
104| `callback` | `data-callback` | `data-callback="onSuccess"` |
105| `error-callback` | `data-error-callback` | `data-error-callback="onError"` |
106| `expired-callback` | `data-expired-callback` | `data-expired-callback="onExpired"` |
107| `timeout-callback` | `data-timeout-callback` | `data-timeout-callback="onTimeout"` |
108| `theme` | `data-theme` | `data-theme="dark"` |
109| `size` | `data-size` | `data-size="compact"` |
110| `tabindex` | `data-tabindex` | `data-tabindex="0"` |
111| `response-field` | `data-response-field` | `data-response-field="false"` |
112| `response-field-name` | `data-response-field-name` | `data-response-field-name="token"` |
113| `retry` | `data-retry` | `data-retry="never"` |
114| `retry-interval` | `data-retry-interval` | `data-retry-interval="5000"` |
115| `language` | `data-language` | `data-language="en"` |
116| `execution` | `data-execution` | `data-execution="execute"` |
117| `appearance` | `data-appearance` | `data-appearance="interaction-only"` |
118| `refresh-expired` | `data-refresh-expired` | `data-refresh-expired="manual"` |
119 
120**Example:**
121```html
122<div class="cf-turnstile"
123     data-sitekey="YOUR_SITE_KEY"
124     data-theme="dark"
125     data-callback="onTurnstileSuccess"
126     data-error-callback="onTurnstileError"></div>
127```
128 
129## Content Security Policy
130 
131Add these directives to CSP header/meta tag:
132 
133```
134script-src https://challenges.cloudflare.com;
135frame-src https://challenges.cloudflare.com;
136```
137 
138**Full Example:**
139```html
140<meta http-equiv="Content-Security-Policy" 
141      content="default-src 'self'; 
142               script-src 'self' https://challenges.cloudflare.com; 
143               frame-src https://challenges.cloudflare.com;">
144```
145 
146## Framework-Specific Setup
147 
148### React
149```bash
150npm install @marsidev/react-turnstile
151```
152```jsx
153import Turnstile from '@marsidev/react-turnstile';
154 
155<Turnstile
156  siteKey="YOUR_SITE_KEY"
157  onSuccess={(token) => console.log(token)}
158/>
159```
160 
161### Vue
162```bash
163npm install vue-turnstile
164```
165```vue
166<template>
167  <VueTurnstile site-key="YOUR_SITE_KEY" @success="onSuccess" />
168</template>
169<script setup>
170import VueTurnstile from 'vue-turnstile';
171</script>
172```
173 
174### Svelte
175```bash
176npm install svelte-turnstile
177```
178```svelte
179<script>
180import Turnstile from 'svelte-turnstile';
181</script>
182<Turnstile siteKey="YOUR_SITE_KEY" on:turnstile-callback={handleToken} />
183```
184 
185### Next.js (App Router)
186```tsx
187// app/components/TurnstileWidget.tsx
188'use client';
189import { useEffect, useRef } from 'react';
190 
191export default function TurnstileWidget({ sitekey, onSuccess }) {
192  const ref = useRef<HTMLDivElement>(null);
193  
194  useEffect(() => {
195    if (ref.current && window.turnstile) {
196      const widgetId = window.turnstile.render(ref.current, {
197        sitekey,
198        callback: onSuccess
199      });
200      return () => window.turnstile.remove(widgetId);
201    }
202  }, [sitekey, onSuccess]);
203  
204  return <div ref={ref} />;
205}
206```
207 
208## Cloudflare Pages Plugin
209 
210```bash
211npm install @cloudflare/pages-plugin-turnstile
212```
213 
214```typescript
215// functions/_middleware.ts
216import turnstilePlugin from '@cloudflare/pages-plugin-turnstile';
217 
218export const onRequest = turnstilePlugin({
219  secret: 'YOUR_SECRET_KEY',
220  onError: () => new Response('CAPTCHA failed', { status: 403 })
221});
222```
Cloudflare Platform Skill

references/turnstile/configuration.md

Preparing the source view

Cloudflare Platform Skill

references/turnstile/configuration.md
