How to pass headers to edge functions in Supabase?

 

Step 1: Set Up Your Supabase Project

 

To get started, make sure you have a Supabase account and a project set up. If you haven't already, go to the Supabase website and create an account. Once your account is set up, create a new project in the Supabase dashboard. This setup will provide you with the API URL and the Anon/Public API key which will be used in your client-side code.

 

Step 2: Create an Edge Function

 

Supabase Edge Functions are deployed using the Deno runtime and allow you to write server-side logic. Navigate to the "Functions" section in the Supabase dashboard and click on "New Function" to create one.

 

Step 3: Write Your Edge Function Code

 

In the Edge Function editor, you can write your function logic. For the purpose of this tutorial, we'll write a simple function that handles incoming requests and expects certain headers. Here is a sample function code:

export default async (req) => {
  const headers = req.headers;

  const authToken = headers.get('authorization');
  const customHeader = headers.get('x-custom-header');

  if (!authToken || !customHeader) {
    return new Response('Missing headers', { status: 400 });
  }

  return new Response(`Authorization: ${authToken}, Custom Header: ${customHeader}`, { status: 200 });
}

This function retrieves the 'authorization' and 'x-custom-header' headers from the incoming request and checks if they exist. If they do, it responds with the values; otherwise, it returns a "Missing headers" error.

 

Step 4: Deploy Your Edge Function

 

After writing your code, deploy the Edge Function by clicking on the "Deploy" button within the editor. Supabase will handle the deployment and generate a unique URL for the function.

 

Step 5: Invoke the Edge Function from Your Client

 

With your Edge Function deployed, you can invoke it from your client-side application. Here is an example using JavaScript and Fetch API to make a request with custom headers:

const functionUrl = 'YOUR_FUNCTION_URL';
const authToken = 'Bearer YOUR_AUTH_TOKEN';
const customHeaderValue = 'CustomValue';

fetch(functionUrl, {
  method: 'GET',
  headers: {
    'authorization': authToken,
    'x-custom-header': customHeaderValue,
  },
})
  .then(response => response.text())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Replace YOUR_FUNCTION_URL with the URL of your deployed function and update the authorization and custom header values accordingly.

 

Step 6: Test Your Setup

 

Finally, test the setup by running your client-side code. You should see the response containing the header values you sent in the request if everything is set up correctly.

By following these steps, you can effectively pass headers to Edge Functions in Supabase. This allows for enhanced communication between your client application and server-side logic.