Why Edge Functions handle server-side logic in Supabase - See It in Action

Why Edge Functions Handle Server-Side Logic

📖 Scenario: You are building a simple web app that needs to securely process user data before saving it to the database. You want to use Supabase Edge Functions to handle this server-side logic close to the user for fast response and security.

🎯 Goal: Build a Supabase Edge Function that receives user input, processes it on the server side, and returns a safe response without exposing sensitive logic to the browser.

📋 What You'll Learn

Create a basic Edge Function handler

Add a configuration variable for a secret key

Implement server-side logic to process input securely

Return a JSON response from the Edge Function

💡 Why This Matters

🌍 Real World

Edge Functions run close to users to handle sensitive logic like authentication, data validation, and processing without exposing secrets or slowing down the app.

💼 Career

Understanding how to write secure server-side logic with Edge Functions is essential for modern cloud developers working with serverless platforms like Supabase.

1

Create the Edge Function handler

Create a file named index.ts and write an async function called handler that takes a Request object and returns a new Response with the text 'Edge Function running'.

Supabase

// Your code here

Hint

Think of the Edge Function as a small server that responds to requests. Start by returning a simple text response.

2

Add a secret key configuration

Inside index.ts, add a constant called SECRET_KEY and set it to the string 'mysecret123' to simulate a server-side secret.

Supabase

export const SECRET_KEY = ''

export async function handler(request: Request): Promise {
  return new Response('Edge Function running');
}

// Your code here

Hint

This secret key will be used only inside the Edge Function and never exposed to the browser.

3

Process input securely in the Edge Function

Modify the handler function to read JSON from the request body, extract a field called message, append the SECRET_KEY to it, and return the combined string in a JSON response with key result.

Supabase

export const SECRET_KEY = 'mysecret123'

export async function handler(request: Request): Promise {
  // Your code here
}

Hint

Use await request.json() to get the input data and return JSON with Content-Type header.

4

Complete the Edge Function with proper JSON response headers

Ensure the handler function returns a Response with the JSON stringified result and sets the 'Content-Type' header to 'application/json'.

Supabase

export const SECRET_KEY = 'mysecret123'

export async function handler(request: Request): Promise {
  const data = await request.json();
  const message = data.message;
  const result = message + SECRET_KEY;
  // Your code here
}

Hint

Setting the correct header tells the client to expect JSON data.