Menu

How to Enable Cloudflare Turnstile in Nexty

Cloudflare Turnstile is a free human verification solution provided by Cloudflare, featuring user-friendly experience and non-intrusive challenges that can effectively identify and block malicious bots.

When your SaaS product user base gradually increases, it's important to prevent automated bots and malicious behavior. Nexty provides Cloudflare Turnstile integration options, allowing you to enable human verification and block malicious traffic following this tutorial.

Integration Steps

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

Create Turnstile Widget in Cloudflare

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

add widget

Select your production environment domain and manually enter localhost, the latter is used for local testing

add hostnames

Select Widget Mode and pre-clearance

select mode

"Widget Mode" determines how to judge whether visitors are bots. The three options mean:

  • Managed (Recommended): Intelligently analyzes visitor behavior, trusted users pass directly, suspicious users need to click for verification
  • Non-interactive: Shows loading animation, automatically completes verification in the background, no user operation 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 some verification processes in subsequent visits.

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

After creation, you'll get a Site Key and Secret Key. The Site Key is used for frontend integration and needs to 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 fill the Secret Key into the Captcha secret input field

supabase-attack-protection

Code Integration

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

In Nexty's code, you can see the following relevant 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 Effect

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

turnstile demo