Cloudflare Turnstile · Angular SSR · FastAPI
Cloudflare Turnstile with Angular and FastAPI to protect a bot interaction
Turnstile is useful when a public Angular page must send a message, launch a bot workflow or call a sensitive backend action without opening the door to automated abuse.
The safe architecture is simple: Angular renders the widget and sends the temporary token; FastAPI validates that token with Cloudflare before the bot does anything.
The secret key never belongs in Angular, Git, screenshots or tutorials. If a secret has been shared, rotate it in Cloudflare and deploy the new value only as a backend environment variable.
1. Architecture
The browser is not trusted. It can only obtain a short-lived Turnstile token. FastAPI verifies that token server-side, applies rate limits and then runs the bot action.
Angular frontend
Public site key used in the Angular example: 0x4AAAAAADL_SO30Hjut98cd
FastAPI backend
Receives turnstile_token, validates length, rate limits and the internal header.
Cloudflare Siteverify
Confirms that the token is authentic, not expired and not reused.
Protected bot action
Runs only after FastAPI receives a success response.
2. Angular integration
In Angular SSR, load the Turnstile script only in the browser. The widget returns a token through a callback; that token is submitted together with the form payload.
environment
TurnstileLoaderService
Form component
HTML template
3. FastAPI validation
The backend posts the token to Cloudflare Siteverify. A success response is required before the protected bot endpoint returns useful data.
Environment variables
4. Backend perimeter: Nginx, Cloudflare and alternatives
This part only works when the request really passes through your trusted server before reaching FastAPI. If Angular calls a separate API hostname directly, the Nginx rule on the website cannot inject any private header.
Cloudflare sits before your origin. Nginx only sees traffic that Cloudflare forwards to that origin. Therefore, the safe pattern is: browser calls the same public site path, Cloudflare forwards it to your origin, and your origin proxy forwards only that API path to FastAPI while adding the internal header. If the browser calls api.example.com directly, that separate origin needs its own protection.
API privada con Nginx y FastAPI. Turnstile and the proxy solve different problems: Turnstile proves that a browser interaction passed Cloudflare validation; the proxy/internal header keeps private backend routes from being called directly.
Options compared
Turnstile only on FastAPI
Best for public forms and bot triggers. FastAPI is reachable, but every sensitive POST must validate the Turnstile token, rate limit and check hostname/action.
Nginx reverse proxy on the same VPS
Best when Angular SSR and FastAPI live on the same server or network. The browser calls /api/... and Nginx injects X-Internal-Api-Key before forwarding to localhost:8000.
Cloudflare Tunnel plus Access
Best when the API should not be public at all. Access can protect a self-hosted app and service tokens are suitable for server-to-server calls, not browser code.
Cloudflare WAF and rate limiting
Useful as an outer layer for abusive IPs, countries, methods or paths, but it does not replace Siteverify validation in FastAPI.
Cloudflare Worker as API gateway
Useful when you want Cloudflare to be the trusted gateway. The Worker can keep secrets in environment variables and forward only valid requests to the origin.
Cloudflare Worker gateway example
A Worker is useful when the request does not pass through your Nginx origin first. The browser calls the Worker route, the Worker keeps the internal key in Cloudflare environment variables and FastAPI still performs Turnstile validation.
Recommended setup for this tutorial
For a public bot form, keep Turnstile verification in FastAPI and expose only one POST route. If you also want the API private, make Angular call /api/bot/turnstile-demo on the same domain and let Nginx, a Worker or Cloudflare Access protect the origin. Never put the internal API key or Access service token in Angular.
5. Production checklist
1. Rotate secrets
If the secret key has been shared in a chat, ticket or commit, create a new one in Cloudflare and deploy it as TURNSTILE_SECRET_KEY.
2. Always validate server-side
The browser widget is not enough. FastAPI must call Siteverify before the bot runs.
3. Limit abuse
Keep slowapi, limit message length, avoid token logging and return generic errors.
4. Check the hostname
Configure TURNSTILE_EXPECTED_HOSTNAME to accept tokens from the intended domain.
5. Separate responsibilities
Turnstile does not replace login, permissions or the internal proxy key when the API should remain private.
6. Test the full flow
Verify valid tokens, expired tokens, missing tokens, rate limits and direct calls without the internal header.
Conclusion
Turnstile is not magic authentication, but it is a strong friction layer for forms and bot triggers when combined with server-side verification, rate limits and a private API perimeter.
After publishing, request indexing for both language versions because the page has a unique title, canonical, description, H1 and substantial SSR content.
Related readings
These articles complete the security and Angular SSR context: