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/patterns.md

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

markdown194 linesFree

references/turnstile/patterns.md

1# Common Patterns
2 
3## Form Integration
4 
5### Basic Form (Implicit Rendering)
6 
7```html
8<!DOCTYPE html>
9<html>
10<head>
11  <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
12</head>
13<body>
14  <form action="/submit" method="POST">
15    <input type="email" name="email" required>
16    <div class="cf-turnstile" data-sitekey="YOUR_SITE_KEY"></div>
17    <button type="submit">Submit</button>
18  </form>
19</body>
20</html>
21```
22 
23### Controlled Form (Explicit Rendering)
24 
25```javascript
26<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"></script>
27<script>
28let widgetId = window.turnstile.render('#container', {
29  sitekey: 'YOUR_SITE_KEY',
30  callback: (token) => console.log('Token:', token)
31});
32 
33form.addEventListener('submit', async (e) => {
34  e.preventDefault();
35  const token = window.turnstile.getResponse(widgetId);
36  if (!token) return;
37  
38  const response = await fetch('/submit', {
39    method: 'POST',
40    body: JSON.stringify({ 'cf-turnstile-response': token })
41  });
42  
43  if (!response.ok) window.turnstile.reset(widgetId);
44});
45</script>
46```
47 
48## Framework Patterns
49 
50### React
51 
52```tsx
53import { useState } from 'react';
54import Turnstile from '@marsidev/react-turnstile';
55 
56export default function Form() {
57  const [token, setToken] = useState<string | null>(null);
58 
59  return (
60    <form onSubmit={async (e) => {
61      e.preventDefault();
62      if (!token) return;
63      await fetch('/api/submit', { 
64        method: 'POST',
65        body: JSON.stringify({ 'cf-turnstile-response': token })
66      });
67    }}>
68      <Turnstile siteKey="YOUR_SITE_KEY" onSuccess={setToken} />
69      <button disabled={!token}>Submit</button>
70    </form>
71  );
72}
73```
74 
75### Vue / Svelte
76 
77```vue
78<!-- Vue: npm install vue-turnstile -->
79<VueTurnstile :site-key="SITE_KEY" @success="token = $event" />
80 
81<!-- Svelte: npm install svelte-turnstile -->
82<Turnstile siteKey={SITE_KEY} on:turnstile-callback={(e) => token = e.detail.token} />
83```
84 
85## Server Validation
86 
87### Cloudflare Workers
88 
89```typescript
90interface Env {
91  TURNSTILE_SECRET: string;
92}
93 
94export default {
95  async fetch(request: Request, env: Env): Promise<Response> {
96    if (request.method !== 'POST') {
97      return new Response('Method not allowed', { status: 405 });
98    }
99    
100    const formData = await request.formData();
101    const token = formData.get('cf-turnstile-response');
102    
103    if (!token) {
104      return new Response('Missing token', { status: 400 });
105    }
106    
107    // Validate token
108    const ip = request.headers.get('CF-Connecting-IP');
109    const result = await fetch('https://challenges.cloudflare.com/turnstile/v0/siteverify', {
110      method: 'POST',
111      headers: { 'Content-Type': 'application/json' },
112      body: JSON.stringify({
113        secret: env.TURNSTILE_SECRET,
114        response: token,
115        remoteip: ip
116      })
117    });
118    
119    const validation = await result.json();
120    
121    if (!validation.success) {
122      return new Response('CAPTCHA validation failed', { status: 403 });
123    }
124    
125    // Process form...
126    return new Response('Success');
127  }
128};
129```
130 
131### Pages Functions
132 
133```typescript
134// functions/submit.ts - same pattern as Workers, use ctx.env and ctx.request
135export const onRequestPost: PagesFunction<{ TURNSTILE_SECRET: string }> = async (ctx) => {
136  const token = (await ctx.request.formData()).get('cf-turnstile-response');
137  // Validate with ctx.env.TURNSTILE_SECRET (same as Workers pattern above)
138};
139```
140 
141## Advanced Patterns
142 
143### Pre-Clearance (Invisible)
144 
145```html
146<div id="turnstile-precheck"></div>
147<form id="protected-form" style="display: none;">
148  <button type="submit">Submit</button>
149</form>
150 
151<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"></script>
152<script>
153let cachedToken = null;
154 
155window.onload = () => {
156  window.turnstile.render('#turnstile-precheck', {
157    sitekey: 'YOUR_SITE_KEY',
158    size: 'invisible',
159    callback: (token) => {
160      cachedToken = token;
161      document.getElementById('protected-form').style.display = 'block';
162    }
163  });
164};
165</script>
166```
167 
168### Token Refresh on Expiry
169 
170```javascript
171let widgetId = window.turnstile.render('#container', {
172  sitekey: 'YOUR_SITE_KEY',
173  'refresh-expired': 'manual',
174  'expired-callback': () => {
175    console.log('Token expired, refreshing...');
176    window.turnstile.reset(widgetId);
177  }
178});
179```
180 
181## Testing
182 
183### Environment-Based Keys
184 
185```javascript
186const SITE_KEY = process.env.NODE_ENV === 'production'
187  ? 'YOUR_PRODUCTION_SITE_KEY'
188  : '1x00000000000000000000AA'; // Always passes
189 
190const SECRET_KEY = process.env.NODE_ENV === 'production'
191  ? process.env.TURNSTILE_SECRET
192  : '1x0000000000000000000000000000000AA';
193```
194

Cloudflare Platform Skill

references/turnstile/patterns.md

Preparing the source view

Cloudflare Platform Skill

references/turnstile/patterns.md