feat: integrate Cloudflare Turnstile captcha for login and signup#731
feat: integrate Cloudflare Turnstile captcha for login and signup#731AkshatVerma087 wants to merge 2 commits into
Conversation
- Replace custom math-based captcha with Cloudflare Turnstile widget - Add reusable Captcha component with auto dark/light theme detection - Add server-side token verification via Cloudflare siteverify API - Update Login and Signup pages to use Turnstile onVerify flow - Remove /captcha endpoint (Turnstile handles challenge client-side) - Add axios to backend for Turnstile API calls - Add react-turnstile to frontend dependencies - Update .env.example files with required Turnstile env vars
|
Great refactor overall — replacing the custom math captcha with Cloudflare Turnstile significantly improves the authentication flow and reduces unnecessary backend/frontend complexity. The reusable captcha component, cleanup of old routes, and environment variable updates are all well structured. One suggestion: the current fallback behavior that skips captcha verification when the secret key is missing should ideally be restricted to development environments only, to avoid accidental production misconfiguration. Also, consider adding clearer UI feedback for expired or failed captcha verification to improve user experience further. Overall, this looks like a solid and production-friendly enhancement. |
|
Thanks for your insights @YLaxmikanth I'll work on that. |
📌 Description
Replaced the custom math-based captcha with Cloudflare Turnstile — a privacy-friendly, managed captcha widget. The old approach required a server-generated math question, a JWT-signed answer token, and manual user input. Turnstile handles the entire challenge client-side and verifies server-side with a single API call, resulting in a cleaner UX and simpler codebase.
🔗 Related Issue
Closes #352
🛠 Changes Made
frontend/src/components/Captcha.jsx) with auto dark/light theme detectionbackend/utils/captchaUtils.jsto verify Turnstile tokens via Cloudflare'ssiteverifyAPI (gracefully skips if secret key is not set in dev)authController.js— simplified to use onlycaptchaToken(removedcaptchaAnswerandgetCaptchaexport)GET /captcharoute fromauthRoutes.js(Turnstile handles challenge client-side)Login.jsxandSignup.jsxto use new<Captcha onVerify={...} />flowaxiosto backend dependencies (for Turnstile API calls)react-turnstileto frontend dependencies.env.examplefiles with required Turnstile env vars📸 Screenshots
✅ Checklist
🚀 Notes for Reviewers
VITE_TURNSTILE_SITE_KEYinfrontend/.envTURNSTILE_CLOUDFARE_SECRET_KEYinbackend/.envTURNSTILE_CLOUDFARE_SECRET_KEYis not set, captcha verification is skipped — existing dev setups won't break1x00000000000000000000AA, Secret key1x0000000000000000000000000000000AAI am GSSoC participant please give me good rating and accept my merge request @aryandas2911 .