Supabase Edge Functions: Build Serverless Logic at the Edge

What Are Supabase Edge Functions?

Supabase Edge Functions are serverless TypeScript/JavaScript functions that run in Deno on Supabase's global edge network. They're deployed in 30+ regions worldwide, giving your users sub-100ms latency regardless of where they are. Use them for: webhook handlers, third-party API integrations, background jobs, and business logic that shouldn't run on the client.

Setting Up the Supabase CLI

npm install -g supabase
supabase login
supabase init

Creating Your First Edge Function

supabase functions new hello-world

This creates supabase/functions/hello-world/index.ts:

import { serve } from "https://deno.land/std@0.168.0/http/server.ts"

serve(async (req: Request) => {
  const { name } = await req.json()
  return new Response(
    JSON.stringify({ message: `Hello ${name}!` }),
    { headers: { "Content-Type": "application/json" } }
  )
})

Serving Locally

supabase functions serve hello-world --env-file .env.local

Real-World Pattern 1: Webhook Handler

// supabase/functions/stripe-webhook/index.ts
import { serve } from "https://deno.land/std/http/server.ts"
import { createClient } from "https://esm.sh/@supabase/supabase-js"

const supabase = createClient(
  Deno.env.get('SUPABASE_URL')!,
  Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
)

serve(async (req) => {
  const signature = req.headers.get('stripe-signature')
  const body = await req.text()

  // Verify webhook signature
  // const event = stripe.webhooks.constructEvent(body, signature, webhookSecret)

  const event = JSON.parse(body)

  if (event.type === 'payment_intent.succeeded') {
    const { error } = await supabase
      .from('orders')
      .update({ status: 'paid' })
      .eq('payment_intent_id', event.data.object.id)

    if (error) throw error
  }

  return new Response(JSON.stringify({ received: true }), { status: 200 })
})

Real-World Pattern 2: Send Email via Resend

// supabase/functions/send-email/index.ts
import { serve } from "https://deno.land/std/http/server.ts"

serve(async (req) => {
  const { to, subject, html } = await req.json()

  const response = await fetch('https://api.resend.com/emails', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${Deno.env.get('RESEND_API_KEY')}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      from: 'noreply@yourdomain.com',
      to,
      subject,
      html
    })
  })

  const data = await response.json()
  return new Response(JSON.stringify(data), {
    headers: { 'Content-Type': 'application/json' }
  })
})

Real-World Pattern 3: Database Trigger Handler

// Called via pg_net when a row is inserted
// Great for: welcome emails, notifications, async processing

serve(async (req) => {
  const payload = await req.json()
  const { record } = payload // The inserted row

  // Send welcome email when user signs up
  if (payload.type === 'INSERT' && payload.table === 'profiles') {
    await sendWelcomeEmail(record.email, record.name)
  }

  return new Response('OK')
})

Calling Edge Functions from Your App

// From client
const { data, error } = await supabase.functions.invoke('send-email', {
  body: { to: 'user@example.com', subject: 'Welcome!', html: '...' }
})

// With custom headers
const { data } = await supabase.functions.invoke('process-image', {
  body: formData,
  headers: { 'x-custom-header': 'value' }
})

Deploying to Production

# Deploy single function
supabase functions deploy hello-world

# Deploy all functions
supabase functions deploy

# Set secrets (environment variables)
supabase secrets set RESEND_API_KEY=your-key-here
supabase secrets set STRIPE_WEBHOOK_SECRET=whsec_...