A comprehensive demonstration of Cloudflare Turnstile integration with RedwoodSDK, showcasing different Turnstile modes and server-side verification.

• Three Turnstile Modes: Managed, Non-Interactive, and Invisible
• Server-Side Verification: Secure token validation using Cloudflare's API
• Database Integration: Form submissions stored in D1 database with Prisma
• Admin Dashboard: View and manage form submissions
• Automated Cleanup: Scheduled task to clean database every 5 minutes
• Modern Stack: TypeScript, React, Vite, and Cloudflare Workers

• Automatically adapts based on visitor risk
• May show interactive challenge if needed
• Best for general form protection

• Runs browser challenges automatically
• No user interaction required
• Ideal for seamless user experience

• Completely hidden from users
• Runs challenges in background
• Perfect for login forms

• Node.js 18+
• pnpm
• Cloudflare account
• Wrangler CLI

git clone <repository-url>
cd turnstile-demo
pnpm install

pnpm dev

Visit http://localhost:5173 to see the demo.

1. Get your Turnstile site keys from Cloudflare Dashboard

2. Create three sites for different modes:

   • Managed Mode: For general form protection
   • Non-Interactive Mode: For automatic challenges
   • Invisible Mode: For background verification

3. Update the site keys in src/app/pages/Home.tsx:

   // Replace with your actual site keys
   data-sitekey="0x4AAAAAABg9V3ItLX3RFEhC"  // Managed
   data-sitekey="0x4AAAAAABg9Uu_k_pr2N2pj"  // Non-Interactive
   data-sitekey="0x4AAAAAABg9RrcUaoJCZqA3"  // Invisible

1. Create a D1 database:

   npx wrangler d1 create turnstile-demo-db

2. Update wrangler.jsonc with your database ID

Set your Turnstile secret keys in Wrangler:

npx wrangler secret put MANAGED_TURNSTILE_SECRET_KEY
npx wrangler secret put NON_INTERACTIVE_TURNSTILE_SECRET_KEY  
npx wrangler secret put INVISIBLE_TURNSTILE_SECRET_KEY

npm run release

The app includes a scheduled task that cleans the database every 5 minutes to keep the demo fresh.

src/
├── app/
│   ├── Document.tsx          # HTML document structure
│   ├── actions.ts            # Server actions for form handling
│   ├── headers.ts            # Common headers middleware
│   └── pages/
│       ├── Home.tsx          # Main demo page with forms
│       └── Admin.tsx         # Admin dashboard
├── client.tsx                # Client-side entry point
├── worker.tsx                # Worker entry point with scheduler
└── db.ts                     # Database setup and utilities

• Client-Side Script Loading: Turnstile script loaded via useEffect to prevent hydration issues
• Server-Side Verification: All tokens verified against Cloudflare's API before processing
• Error Handling: Comprehensive error handling for failed verifications
• Database Cleanup: Automated cleanup via Cloudflare Cron Triggers
• TypeScript: Full type safety throughout the application

• Cloudflare Turnstile Documentation
• RedwoodSDK Documentation
• Cloudflare Workers Documentation