mirror of
https://github.com/supabase/supabase.git
synced 2026-10-13 05:09:12 +03:00
Vaibhav
549c1fb6ca
## TL;DR aligns the remaining Phase 2 Edge Functions docs snippets with `@supabase/server` ## Whats Fixed? updated outdated imports and version references, and refreshed JSON examples to use Response.json() where it makes sense. left non-JSON responses as is where the integration or format actually needs them ## Ref: - towards COM-269 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Documentation** * Updated numerous Edge Function guides and examples to use modern `npm:`/`jsr:` import specifiers instead of legacy Deno URL imports. * Standardized success and error responses to return JSON consistently (using `Response.json()` and equivalent helpers) and added/clarified appropriate HTTP status codes. * Improved example error payload shapes in several guides for clearer, structured failures. * **Chores** * Refreshed version ranges in documentation and examples across SDKs and client libraries. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
80 lines
2.4 KiB
Plaintext
80 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 { withSupabase } from 'npm:@supabase/server@^1'
|
|
|
|
console.log('Hello from Cloudflare Trunstile!')
|
|
|
|
function ips(req: Request) {
|
|
return req.headers.get('x-forwarded-for')?.split(/\s*,\s*/)
|
|
}
|
|
|
|
// `withSupabase` handles CORS and preflight requests for you.
|
|
export default {
|
|
fetch: withSupabase({ auth: 'none' }, async (req) => {
|
|
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 Response.json({ success: true })
|
|
}
|
|
return Response.json({ success: false })
|
|
}),
|
|
}
|
|
```
|
|
|
|
## Deploy the server-side validation Edge Functions
|
|
|
|
- https://developers.cloudflare.com/turnstile/get-started/server-side-validation/
|
|
|
|
```bash
|
|
supabase functions deploy cloudflare-turnstile --no-verify-jwt
|
|
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 },
|
|
})
|
|
```
|