Invoking Edge Functions from client in Supabase - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ service_behavior

intermediate

What is the expected response when calling a Supabase Edge Function without authentication?

You have an Edge Function deployed on Supabase that requires user authentication. What will happen if a client calls this function without providing any authentication token?

A The function returns a 404 Not Found error.

B The function executes normally and returns the expected data.

C The function returns a 500 Internal Server Error.

D The function returns a 401 Unauthorized error response.

💡 Hint

Think about what happens when a protected resource is accessed without credentials.

Edge Functions that require authentication will reject requests without valid tokens, returning a 401 Unauthorized error to indicate the client must authenticate.

❓ Configuration

intermediate

Which client code correctly calls a Supabase Edge Function named 'hello' with a JSON body?

You want to call an Edge Function named hello from your client app using Supabase's JavaScript client. Which code snippet correctly sends a POST request with a JSON body {"name": "Alice"}?

A const { data, error } = await supabase.functions.invoke('hello', { method: 'POST', body: { name: 'Alice' } });

B const { data, error } = await supabase.functions.invoke('hello', { method: 'POST', body: JSON.stringify({ name: 'Alice' }) });

C const { data, error } = await supabase.functions.invoke('hello', { body: JSON.stringify({ name: 'Alice' }) });

D const { data, error } = await supabase.functions.invoke('hello', { method: 'GET', body: JSON.stringify({ name: 'Alice' }) });

💡 Hint

Remember to specify the HTTP method and convert the body to a string.

The invoke method requires the HTTP method to be set to POST when sending a body, and the body must be a JSON string.

❓ Architecture

advanced

What is the best way to secure sensitive data when invoking Supabase Edge Functions from a public client?

You have an Edge Function that accesses sensitive data. Your client app is public and runs in users' browsers. How should you protect the sensitive data when invoking the Edge Function?

A Embed the sensitive data directly in the client code and send it with the request.

B Make the Edge Function public and rely on client-side validation to protect data.

C Require authentication and verify user identity inside the Edge Function before returning sensitive data.

D Use a secret API key hardcoded in the client to authenticate requests to the Edge Function.

💡 Hint

Think about where sensitive data should be checked and who should have access.

Authentication and authorization should be enforced server-side in the Edge Function to ensure only authorized users access sensitive data. Client-side secrets can be exposed and are not secure.

🧠 Conceptual

advanced

What happens if a Supabase Edge Function takes longer than 10 seconds to respond when invoked from the client?

Supabase Edge Functions have a maximum execution time limit. What is the expected behavior if a function exceeds this limit when called from a client?

A The function is terminated and the client receives a timeout error response.

B The function continues running in the background and the client receives a success response.

C The function retries automatically until it completes successfully.

D The client waits indefinitely until the function finishes.

💡 Hint

Consider what happens when a serverless function exceeds its time limit.

Supabase Edge Functions have a hard timeout (usually 10 seconds). If exceeded, the function is stopped and the client receives a timeout error.

❓ security

expert

Which option correctly prevents Cross-Site Request Forgery (CSRF) attacks when invoking Supabase Edge Functions from a browser client?

You want to protect your Supabase Edge Functions from CSRF attacks when called from a browser. Which approach is the most effective?

A Use HTTP-only cookies for authentication and validate CSRF tokens in the Edge Function.

B Rely on CORS settings alone to block unauthorized domains.

C Include a secret API key in the client JavaScript code and check it in the Edge Function.

D Disable authentication on the Edge Function to avoid token issues.

💡 Hint

Think about how CSRF tokens and cookies work together to prevent attacks.

Using HTTP-only cookies with CSRF tokens validated server-side is a standard and effective way to prevent CSRF attacks. CORS alone does not prevent CSRF.

Practice

1. What is the main purpose of using supabase.functions.invoke() in a client application?

easy

A. To create new user accounts automatically

B. To directly access the database without authentication

C. To upload files to Supabase storage

D. To call Edge Functions and get fast responses near the user

Solution

1. Step 1: Understand what Edge Functions do

   Edge Functions run code close to users to reduce delay and improve speed.

2. Step 2: Identify the role of supabase.functions.invoke()

   This method is used to call those Edge Functions from the client side.

3. Final Answer:

   To call Edge Functions and get fast responses near the user -> Option D

4. Quick Check:

   Invoke calls Edge Functions [OK]

Hint: Invoke calls Edge Functions for fast user responses [OK]

Common Mistakes:

• Thinking it accesses database directly
• Confusing with file upload methods
• Assuming it creates users automatically

2. Which of the following is the correct syntax to invoke an Edge Function named hello using Supabase client in JavaScript?

easy

A. await supabase.functions.invoke('hello')

B. supabase.invoke.functions('hello')

C. await supabase.functions.call('hello')

D. supabase.functions.run('hello')

Solution

1. Step 1: Recall the correct method name

   The method to call Edge Functions is supabase.functions.invoke().

2. Step 2: Check the syntax for calling a function named 'hello'

   The correct syntax is await supabase.functions.invoke('hello').

3. Final Answer:

   await supabase.functions.invoke('hello') -> Option A

4. Quick Check:

   Correct method is invoke() [OK]

Hint: Use supabase.functions.invoke('functionName') [OK]

Common Mistakes:

• Using wrong method names like call or run
• Swapping order of functions and invoke
• Forgetting to await the async call

3. What will be the output of the following code snippet if the Edge Function returns {"message": "Hello World"}?

const { data, error } = await supabase.functions.invoke('greet');
if (error) {
  console.log('Error:', error.message);
} else {
  console.log(data.message);
}

medium

A. Hello World

B. Error: Function not found

C. undefined

D. SyntaxError

Solution

1. Step 1: Understand the function response

   The Edge Function returns an object with a key "message" and value "Hello World".

2. Step 2: Analyze the code output

   The code logs data.message which is "Hello World" if no error occurs.

3. Final Answer:

   Hello World -> Option A

4. Quick Check:

   data.message logs "Hello World" [OK]

Hint: Check data.message for function response output [OK]

Common Mistakes:

• Assuming error always occurs
• Confusing data with error object
• Expecting raw JSON string instead of parsed object

4. Identify the error in this code snippet that tries to invoke an Edge Function named dataFetch:

const response = supabase.functions.invoke('dataFetch')
console.log(response.data)

medium

A. No error, code is correct

B. Missing await keyword for the async invoke call

C. Using console.log instead of alert

D. Incorrect function name 'dataFetch'

Solution

1. Step 1: Check async call usage

   supabase.functions.invoke() returns a promise and must be awaited.

2. Step 2: Identify missing await

   The code assigns the promise to response without awaiting, so response.data is undefined.

3. Final Answer:

   Missing await keyword for the async invoke call -> Option B

4. Quick Check:

   Async calls need await [OK]

Hint: Always await async invoke calls [OK]

Common Mistakes:

• Forgetting await on async functions
• Assuming invoke returns data synchronously
• Ignoring promise nature of invoke()

5. You want to send JSON data {"userId": 123} to an Edge Function named getUserData and handle errors properly. Which code snippet correctly does this?

hard

A. const { data, error } = await supabase.functions.invoke('getUserData', body: { userId: 123 }); if (error) console.error(error); else console.log(data);

B. const { data, error } = supabase.functions.invoke('getUserData', { body: JSON.stringify({ userId: 123 }) }); if (error) console.error(error); else console.log(data);

C. const { data, error } = await supabase.functions.invoke('getUserData', { body: JSON.stringify({ userId: 123 }) }); if (error) console.error(error); else console.log(data);

D. const response = await supabase.functions.invoke('getUserData', { userId: 123 }); console.log(response.data);

Solution

1. Step 1: Understand the body format

   The body must be a JSON string, so use JSON.stringify() on the data object.

2. Step 2: Use await and handle error properly

   The call must be awaited and error checked before using data.

3. Final Answer:

   const { data, error } = await supabase.functions.invoke('getUserData', { body: JSON.stringify({ userId: 123 }) }); if (error) console.error(error); else console.log(data); -> Option C

4. Quick Check:

   Body as JSON string and await invoke [OK]

Hint: Stringify body JSON and await invoke call [OK]

Common Mistakes:

• Passing body as object instead of JSON string
• Not awaiting the invoke call
• Ignoring error handling