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.

Practice

1. Why do Supabase Edge Functions run server-side logic close to users?

easy

A. To make apps faster and more secure by processing data near users

B. To store all user data permanently on the client device

C. To replace the need for any database in the app

D. To allow users to write code directly in the browser

Solution

1. Step 1: Understand the role of Edge Functions

   Edge Functions run code on servers close to users, reducing delay and improving security.

2. Step 2: Identify benefits of running logic near users

   This setup speeds up responses and keeps sensitive logic safe from client exposure.

3. Final Answer:

   To make apps faster and more secure by processing data near users -> Option A

4. Quick Check:

   Edge Functions = speed + security [OK]

Hint: Edge Functions run near users for speed and safety [OK]

Common Mistakes:

• Thinking Edge Functions store data on client devices
• Believing Edge Functions replace databases
• Assuming users write Edge Function code in browsers

2. Which is the correct way to define a simple Supabase Edge Function in JavaScript?

easy

A. async function handler() { console.log('Hello') }

B. function handler(req, res) { return 'Hello' }

C. export async function handler(req, res) { res.send('Hello') }

D. export default async function handler(req) { return 'Hello' }

Solution

1. Step 1: Recall Supabase Edge Function syntax

   Supabase Edge Functions export a default async function that receives a request and returns a response.

2. Step 2: Check each option's correctness

   export default async function handler(req) { return 'Hello' } correctly exports an async function with one parameter and returns a response. Others miss export default or proper response handling.

3. Final Answer:

   export default async function handler(req) { return 'Hello' } -> Option D

4. Quick Check:

   Default async export with req param = correct syntax [OK]

Hint: Edge Functions use 'export default async function(req)' [OK]

Common Mistakes:

• Missing 'export default' keyword
• Not using async function
• Incorrect function parameters

3. Given this Edge Function code snippet, what will be the response when called?

export default async function handler(req) {
  const user = { id: 1, name: 'Alice' };
  return new Response(JSON.stringify(user), { headers: { 'Content-Type': 'application/json' } });
}

medium

A. {"id":1,"name":"Alice"}

B. Error: user is not defined

C. undefined

D. Plain text response 'user'

Solution

1. Step 1: Analyze the function's return value

   The function returns a Response object with JSON string of the user object and proper content-type header.

2. Step 2: Determine the actual response content

   The JSON.stringify converts the user object to '{"id":1,"name":"Alice"}', which is sent as the response body.

3. Final Answer:

   {"id":1,"name":"Alice"} -> Option A

4. Quick Check:

   JSON.stringify(user) = JSON string response [OK]

Hint: JSON.stringify returns JSON text in response [OK]

Common Mistakes:

• Expecting raw object instead of JSON string
• Confusing variable scope errors
• Ignoring response headers

4. This Edge Function code throws an error when called. What is the problem?

export default async function handler(req) {
  const data = await fetch('https://api.example.com/data');
  return data.json();
}

medium

A. fetch URL is invalid syntax

B. Missing 'await' before data.json() causing a Promise to be returned

C. Function must not be async

D. Response must be a string, not JSON

Solution

1. Step 1: Identify async handling of fetch response

   fetch returns a Response object; calling data.json() returns a Promise that must be awaited.

2. Step 2: Spot missing 'await' before data.json()

   Without 'await', the function returns a Promise instead of resolved JSON, causing errors in response handling.

3. Final Answer:

   Missing 'await' before data.json() causing a Promise to be returned -> Option B

4. Quick Check:

   Await all async calls to get resolved data [OK]

Hint: Always await data.json() after fetch [OK]

Common Mistakes:

• Not awaiting JSON parsing
• Assuming fetch URL syntax error
• Thinking async keyword is wrong here

5. You want to keep user authentication logic secure and fast in your Supabase app. Why should you use Edge Functions for this instead of client-side code?

hard

A. Client-side code runs faster and is more secure than Edge Functions

B. Edge Functions store user passwords on the client device

C. Edge Functions run server-side, protecting secrets and reducing client load

D. Client-side code can access database directly without restrictions

Solution

1. Step 1: Understand security needs for authentication

   Authentication requires secret keys and sensitive logic that must not be exposed to users.

2. Step 2: Explain why Edge Functions are suitable

   Edge Functions run on the server close to users, keeping secrets safe and off the client, while improving response speed.

3. Step 3: Contrast with client-side code risks

   Client-side code is visible to users and cannot securely handle secrets or sensitive operations.

4. Final Answer:

   Edge Functions run server-side, protecting secrets and reducing client load -> Option C

5. Quick Check:

   Server-side = secure + fast auth logic [OK]

Hint: Keep secrets server-side with Edge Functions [OK]

Common Mistakes:

• Thinking client-side is more secure
• Believing Edge Functions expose passwords
• Assuming client code can safely access DB secrets