Edge Functions

CAPTCHA support with Cloudflare Turnstile

Cloudflare Turnstile is a friendly, free CAPTCHA replacement, and it works seamlessly with Supabase Edge Functions to protect your forms. View on GitHub.

Setup

Code

Create a new function in your project:

1
supabase functions new cloudflare-turnstile

And add the code to the index.ts file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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

1
2
supabase functions deploy cloudflare-turnstilesupabase secrets set CLOUDFLARE_SECRET_KEY=your_secret_key

Invoke the function from your site

1
2
3
const { data, error } = await supabase.functions.invoke('cloudflare-turnstile', {  body: { token },})