Astro + Turnstile Template

This is a template for integrating Astro with Cloudflare Turnstile.

You can view a demo of this template at turnstile-demo.sapphic.moe.

Prerequisites

Filling out values

Rename the .env.example file to .env and fill out these two fields:

TURNSTILE_SITE_KEY=
TURNSTILE_SECRET_TOKEN=

You can get the site key and secret token values by adding your site to Cloudflare's Turnstile page.

SSR

POST requests are not available for a static site, and thus, the /verify API route in the src/pages/api/ folder is not prefetched and requires you to have an SSR adapter.

Only the API route requires SSR - the rest of the pages are prefetched using Astro's hybrid rendering feature!

In this case, the SSR adapter used here is the Vercel adapter. If you want to use this template in a Node.js, Cloudflare, or other environment, check Astro's SSR adapters page.

Usage

Commands

# install dependencies
npm install 

# create a local environment
npm run dev

# build site
npm run build

Turnstile

We add Cloudflare's Turnstile API script in order to interact with their service.

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

The is:inline directive is used to tell Astro not to process or optimize the contents. Read more in Astro's template directives references page.

The HTML is then scanned for elements that have a cf-turnstile class name.

<div class="cf-turnstile" data-sitekey={import.meta.env.TURNSTILE_SITE_KEY}></div>

If you want to configure the Turnstile widget, check the Cloudflare Turnstile Configurations page.

Form

Modify the form inputs used in src/pages/index.astro and src/pages/api/verify.ts files as needed.

License

This repository is licensed under the MIT license.

© 2024 Chloe Arciniega.