Skip to content

feat: integrate Cloudflare Turnstile captcha for login and signup#731

Open
AkshatVerma087 wants to merge 2 commits into
aryandas2911:mainfrom
AkshatVerma087:feature/cloudfare-captcha-integration
Open

feat: integrate Cloudflare Turnstile captcha for login and signup#731
AkshatVerma087 wants to merge 2 commits into
aryandas2911:mainfrom
AkshatVerma087:feature/cloudfare-captcha-integration

Conversation

@AkshatVerma087
Copy link
Copy Markdown

📌 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

  • Replaced custom math captcha component with a reusable Cloudflare Turnstile widget (frontend/src/components/Captcha.jsx) with auto dark/light theme detection
  • Rewrote backend/utils/captchaUtils.js to verify Turnstile tokens via Cloudflare's siteverify API (gracefully skips if secret key is not set in dev)
  • Updated authController.js — simplified to use only captchaToken (removed captchaAnswer and getCaptcha export)
  • Removed GET /captcha route from authRoutes.js (Turnstile handles challenge client-side)
  • Updated Login.jsx and Signup.jsx to use new <Captcha onVerify={...} /> flow
  • Added axios to backend dependencies (for Turnstile API calls)
  • Added react-turnstile to frontend dependencies
  • Updated both .env.example files with required Turnstile env vars

📸 Screenshots

Screenshot 2026-05-19 021512 Screenshot 2026-05-19 021525

✅ Checklist

  • Code runs locally
  • Followed project structure
  • No console errors
  • Properly tested changes
  • Linked the issue

🚀 Notes for Reviewers

  • New env vars required:
    • VITE_TURNSTILE_SITE_KEY in frontend/.env
    • TURNSTILE_CLOUDFARE_SECRET_KEY in backend/.env
  • Keys can be obtained from the Cloudflare Turnstile dashboard
  • If TURNSTILE_CLOUDFARE_SECRET_KEY is not set, captcha verification is skipped — existing dev setups won't break
  • Cloudflare test keys (for local dev): Site key 1x00000000000000000000AA, Secret key 1x0000000000000000000000000000000AA

I am GSSoC participant please give me good rating and accept my merge request @aryandas2911 .

- 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
Copilot AI review requested due to automatic review settings May 18, 2026 20:55
@YLaxmikanth
Copy link
Copy Markdown

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.

@AkshatVerma087
Copy link
Copy Markdown
Author

AkshatVerma087 commented May 19, 2026

Thanks for your insights @YLaxmikanth I'll work on that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Cloudflare Turnstile CAPTCHA Integration

3 participants