Menu

Enable Cloudflare Turnstile

Cloudflare Turnstile is a free, user-friendly human verification solution that effectively identifies and blocks malicious bots through non-intrusive challenges.

As your SaaS grows, protecting against bots becomes crucial. Nexty integrates with Cloudflare Turnstile—follow this tutorial to enable human verification and block malicious traffic.

Integration Steps

Since Nexty's Auth uses Supabase services, and Supabase provides server-side processing logic, implementing Cloudflare Turnstile in Nexty becomes exceptionally simple.

Creating Turnstile Widget in Cloudflare

Log into Cloudflare, open the Turnstile directory in the left sidebar, and click Add Widget

add widget

Select your production environment domain and manually enter localhost for local testing

add hostnames

Select Widget Mode and pre-clearance

select mode

Widget Mode determines how visitors are identified as bots. The three options mean:

  • Managed (Recommended): Intelligently analyzes visitor behavior, trusted users pass directly while suspicious users need to click for verification
  • Non-interactive: Shows loading animation with automatic background verification, no user interaction required
  • Invisible: Completely hides the verification process, silently completes all checks in the background

Would you like to opt for pre-clearance for this site? determines whether verified users can skip parts of the verification process on subsequent visits.

  • Select No: Full verification required for each visit
  • Select Yes: Provides varying degrees of verification exemption based on selected mode

After creation, you'll receive a Site Key and Secret Key. The Site Key is used for frontend integration and should be added to the environment variable NEXT_PUBLIC_TURNSTILE_SITE_KEY. The Secret Key is used for backend verification and will be used in the next step.

turnstile key

Enable Attack Protection in Supabase

Open Supabase - Authentication - Attack Protection, and enter the Secret Key in the Captcha secret input field

supabase-attack-protection

Code Integration

Nexty has pre-integrated Cloudflare Turnstile in the email login flow, you just need to configure the environment variables to use it.

In Nexty's code, you can see the following related code in the login page:

  1. Import Turnstile component
import { Turnstile } from '@marsidev/react-turnstile'
  1. Create state
const [captchaToken, setCaptchaToken] = useState<string | undefined>();
  1. Render verification component and provide onSuccess property as success callback
{process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY && (
  <Turnstile
    siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY}
    onSuccess={(token) => {
      setCaptchaToken(token);
    }}
  />
)}

Verification Results

After configuration is complete, users will automatically trigger Turnstile verification when performing email login, effectively preventing bot attacks and enhancing website security.

turnstile demo