Skip to main content

Cloudflare Turnstile

Turnstile is a CAPTCHA service that helps protect your website from spam and abuse. This guide will walk you through the process of setting up Turnstile with Logto.

Prerequisites​

  • A Cloudflare account

Setup​

  1. Go to the Cloudflare Dashboard and select your account.
  2. Navigate to Turnstile > Add widget.
  3. Fill out the form with the following details:
    • Widget name: Any name you want to give to the widget
    • Hostname: Logto's endpoint domain, e.g. https://[tenant-id].logto.app
    • Widget Mode: Leave as default

Get the site key and secret key​

  1. Navigate to a widget you just created, and click Manage widget.
  2. Scroll down to the bottom and copy the Site key and Secret key.

Bring your UI​

If you use Bring your UI, Logto can't inject or run Turnstile in your custom frontend automatically. After enabling CAPTCHA in Logto Console, your custom UI must load the Turnstile script, render the widget, and send the returned token to the Experience API.

Load the Turnstile script in your custom UI:

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

Add a container for the widget:

<div id="turnstile-container"></div>

Before starting the interaction, render Turnstile with your site key and pass the callback token as captchaToken in PUT /api/experience:

const captchaToken = await new Promise((resolve, reject) => {
  window.turnstile.render('#turnstile-container', {
    sitekey: '<siteKey>',
    callback: resolve,
    'error-callback': reject,
    size: 'flexible',
  });
});

await fetch('/api/experience', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    interactionEvent: 'SignIn',
    captchaToken,
  }),
});

Enable CAPTCHA​

Remember to enable CAPTCHA bot protection after you have set up the CAPTCHA provider.

Go to the Security page, find the CAPTCHA tab, and switch on the toggle button of "Enable CAPTCHA".