Files
supabase/apps/docs/content/guides/functions/examples/cloudflare-turnstile.mdx
Andrew AgostiniandChris Chinchilla a6a598f824 docs: Fix broken urls (#40457)
* docs: update link to Vecs Python source code in developers guide

* docs: update README to remove outdated GDScript links. These repos have been deleted

* docs: update links in CONTRIBUTING.md for consistency and accuracy

* docs: update Twilio verification service link

* docs: update Mixpeek Python Client link in video search guide, remove link to missing code example

* docs: update GIN index link to point to PostgreSQL 16 documentation ('current' symantic no longer exists)

* docs: update Cloudflare Turnstile links to avoid 302 redirect

* docs: update LlamaIndex SupabaseVectorStore link to the correct documentation

* docs: update link to related issue for error message translation in auth-ui guide (to avoid 302 redirect)

* docs: update link from Next.js middleware to Next.js Proxy in auth-helpers guide to follow Next.js's new naming convention

* Update DEVELOPERS.md

* Update CONTRIBUTING.md

Direct to correct URL

* Update hybrid-search.mdx

Fix URL

* docs: renam Next.js middleware to proxy

* Update DEVELOPERS.md

Co-authored-by: Chris Chinchilla <chris@chrischinchilla.com>

---------

Co-authored-by: Chris Chinchilla <chris@chrischinchilla.com>
2025-11-28 08:58:11 +00:00

82 lines
2.4 KiB
Plaintext

---
id: 'examples-cloudflare-turnstile'
title: 'CAPTCHA support with Cloudflare Turnstile'
description: 'Protecting Forms with Cloudflare Turnstile.'
tocVideo: 'OwW0znboh60'
---
[Cloudflare Turnstile](https://www.cloudflare.com/application-services/products/turnstile/) is a friendly, free CAPTCHA replacement, and it works seamlessly with Supabase Edge Functions to protect your forms. [View on GitHub](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/cloudflare-turnstile).
## Setup
- Follow these steps to set up a new site: https://developers.cloudflare.com/turnstile/get-started/
- Add the Cloudflare Turnstile widget to your site: https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/
## Code
Create a new function in your project:
```bash
supabase functions new cloudflare-turnstile
```
And add the code to the `index.ts` file:
```ts index.ts
import { corsHeaders } from '../_shared/cors.ts'
console.log('Hello from Cloudflare Trunstile!')
function ips(req: Request) {
return req.headers.get('x-forwarded-for')?.split(/\s*,\s*/)
}
Deno.serve(async (req) => {
// This is needed if you're planning to invoke your function from a browser.
if (req.method === 'OPTIONS') {
return new Response('ok', { headers: corsHeaders })
}
const { token } = await req.json()
const clientIps = ips(req) || ['']
const ip = clientIps[0]
// Validate the token by calling the
// "/siteverify" API endpoint.
let formData = new FormData()
formData.append('secret', Deno.env.get('CLOUDFLARE_SECRET_KEY') ?? '')
formData.append('response', token)
formData.append('remoteip', ip)
const url = 'https://challenges.cloudflare.com/turnstile/v0/siteverify'
const result = await fetch(url, {
body: formData,
method: 'POST',
})
const outcome = await result.json()
console.log(outcome)
if (outcome.success) {
return new Response('success', { headers: corsHeaders })
}
return new Response('failure', { headers: corsHeaders })
})
```
## Deploy the server-side validation Edge Functions
- https://developers.cloudflare.com/turnstile/get-started/server-side-validation/
```bash
supabase functions deploy cloudflare-turnstile
supabase secrets set CLOUDFLARE_SECRET_KEY=your_secret_key
```
## Invoke the function from your site
```js
const { data, error } = await supabase.functions.invoke('cloudflare-turnstile', {
body: { token },
})
```