How to properly add Cloudfare Turnstile to Directus and Nextjs?

Help
, , ,
1

Hi. I have read docs regarding Cloudfare Turnstile integration with Nextjs and Supabase where we have to create an edge function and then verify the cloudfare token from Nextjs app. But I couldn’t find a guide on implementing this in Directus. I thought of using auth filter type Flows then validating the token by using the cloudfare URL. But I have a few other collections that allows authenticated roles to create items there where I am thinking of adding it as well.

Given that the project only allows Authenticated roles to submit forms which means they need to verify emails to access the app and rate limit is enabled to a certain number of requests per second, should this setup be fine in terms of security or its a good idea to add Turnstile? Thanks in advance.

1 Answer

1
2

Hi @Sadman_Yasar_Sayem ,

Your forms should submit to your Nextjs app where you handle the authentication check and turnstile integration. Are you trying to submit the form directly to your Directus project?

If both of these pass, you can then use the Directus API to load in the form content and if not, you return an error.

You could follow this guide on validating the token inside your NextJS app. Validate the token · Cloudflare Turnstile docs

If you’re doing and Auth check on any form submissions, this may be sufficient. But if it’s easy to create accounts, you may still want to use some form of anti-bot check.

Hi Alex. Thanks for your response. My current setup is client side forms in Nextjs that submit data by Directus API. So I wanted to add Turnstile in the form itself where the widget shows before submission. But this requires server side validation in Directus for the Turnstile token which is what I am unable to figure out. If we show the form content after turnstile check, this would work but only on the UI side as someone can use the API to submit the form using tools like Postman.

 –