How to Pass Headers to Edge Functions in Supabase

1import { createClient } from '@supabase/supabase-js'
2
3const supabase = createClient(
4  process.env.NEXT_PUBLIC_SUPABASE_URL!,
5  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
6)
7
8// Send custom headers along with the automatic ones
9const { data, error } = await supabase.functions.invoke('process-data', {
10  body: { items: [1, 2, 3] },
11  headers: {
12    'x-region': 'us-east-1',
13    'x-api-version': '2024-01',
14    'x-request-id': crypto.randomUUID()
15  }
16})

1// supabase/functions/process-data/index.ts
2import { corsHeaders } from '../_shared/cors.ts'
3
4Deno.serve(async (req) => {
5  if (req.method === 'OPTIONS') {
6    return new Response('ok', { headers: corsHeaders })
7  }
8
9  // Read automatic headers
10  const authHeader = req.headers.get('authorization') // Bearer <jwt>
11  const apiKey = req.headers.get('apikey')
12
13  // Read custom headers
14  const region = req.headers.get('x-region')
15  const apiVersion = req.headers.get('x-api-version')
16  const requestId = req.headers.get('x-request-id')
17
18  console.log('Region:', region)
19  console.log('API Version:', apiVersion)
20  console.log('Request ID:', requestId)
21
22  // Use auth header to identify the user
23  if (!authHeader) {
24    return new Response(
25      JSON.stringify({ error: 'Missing authorization header' }),
26      { headers: { ...corsHeaders, 'Content-Type': 'application/json' }, status: 401 }
27    )
28  }
29
30  const body = await req.json()
31
32  return new Response(
33    JSON.stringify({ received: body, region, requestId }),
34    { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
35  )
36})

1import { createClient } from 'npm:@supabase/supabase-js@2'
2import { corsHeaders } from '../_shared/cors.ts'
3
4Deno.serve(async (req) => {
5  if (req.method === 'OPTIONS') {
6    return new Response('ok', { headers: corsHeaders })
7  }
8
9  // Create a Supabase client with the user's auth context
10  const supabase = createClient(
11    Deno.env.get('SUPABASE_URL')!,
12    Deno.env.get('SUPABASE_ANON_KEY')!,
13    {
14      global: {
15        headers: {
16          Authorization: req.headers.get('Authorization')!
17        }
18      }
19    }
20  )
21
22  // This query respects the user's RLS policies
23  const { data: { user } } = await supabase.auth.getUser()
24  const { data, error } = await supabase
25    .from('todos')
26    .select('*')
27    .eq('user_id', user?.id)
28
29  if (error) {
30    return new Response(
31      JSON.stringify({ error: error.message }),
32      { headers: { ...corsHeaders, 'Content-Type': 'application/json' }, status: 400 }
33    )
34  }
35
36  return new Response(
37    JSON.stringify(data),
38    { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
39  )
40})

1// supabase/functions/_shared/cors.ts
2export const corsHeaders = {
3  'Access-Control-Allow-Origin': '*',
4  'Access-Control-Allow-Headers':
5    'authorization, x-client-info, apikey, content-type, ' +
6    'x-region, x-api-version, x-request-id',
7  'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT, DELETE',
8}

1// Direct fetch call to an Edge Function
2const response = await fetch(
3  `${process.env.NEXT_PUBLIC_SUPABASE_URL}/functions/v1/process-data`,
4  {
5    method: 'POST',
6    headers: {
7      'apikey': process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
8      'Authorization': `Bearer ${session.access_token}`,
9      'Content-Type': 'application/json',
10      'x-region': 'eu-west-1',
11      'x-request-id': crypto.randomUUID()
12    },
13    body: JSON.stringify({ items: [1, 2, 3] })
14  }
15)
16
17const data = await response.json()
18
19// curl equivalent for testing:
20// curl -X POST 'https://project.supabase.co/functions/v1/process-data' \
21//   -H 'apikey: your-anon-key' \
22//   -H 'Authorization: Bearer your-anon-key' \
23//   -H 'Content-Type: application/json' \
24//   -H 'x-region: eu-west-1' \
25//   -d '{"items": [1, 2, 3]}'