Environment variables and secrets in Supabase - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ service_behavior

intermediate

How does Supabase handle environment variables in serverless functions?

Supabase allows you to set environment variables for your serverless functions. What happens if you try to access an environment variable that is not set?

A The function returns undefined or null for the missing variable.

B The function throws a runtime error and stops execution.

C The function returns an empty string for the missing variable.

D The function uses a default value defined in the Supabase dashboard.

💡 Hint

Think about how environment variables behave in Node.js when not set.

If an environment variable is not set, accessing it returns undefined (or null in some contexts). Supabase serverless functions behave similarly, so no error is thrown automatically.

❓ security

intermediate

What is the safest way to store API keys in Supabase projects?

You want to use a third-party API key in your Supabase project. Which method ensures the key is kept secret and not exposed to users?

A Save the API key in a public table in the Supabase database.

B Hardcode the API key directly in the client-side JavaScript code.

C Store the API key in Supabase environment variables and access it only in serverless functions.

D Include the API key in the URL query parameters of client requests.

💡 Hint

Consider where client-side code can be seen by users.

Environment variables in serverless functions keep secrets safe because they are not exposed to the client. Hardcoding or storing keys in public places risks exposure.

❓ Configuration

advanced

What is the correct way to access a secret environment variable in a Supabase Edge Function?

Given you have set an environment variable named MY_SECRET in your Supabase project, how do you access it inside an Edge Function?

Supabase

export default async function handler(req) {
  // Access the secret here
  const secret = Deno.env.get('MY_SECRET');
  return new Response(secret);
}

A const secret = window.env.MY_SECRET;

B const secret = Deno.env.get('MY_SECRET');

C const secret = supabase.env.MY_SECRET;

D const secret = process.env.MY_SECRET;

💡 Hint

Supabase Edge Functions run on Deno runtime, not Node.js.

Supabase Edge Functions use Deno, so environment variables are accessed with Deno.env.get(). process.env is Node.js specific and will not work.

❓ Architecture

advanced

How should you architect a Supabase project to securely use multiple environment variables for different deployment stages?

You have development, staging, and production environments. How do you manage environment variables securely and efficiently across these stages in Supabase?

A Create separate Supabase projects for each stage, each with its own environment variables.

B Use the same environment variables for all stages and rely on code to switch behavior.

C Store all variables in one project and prefix variable names with the stage name.

D Keep environment variables in a shared public database table with stage tags.

💡 Hint

Think about isolation and risk of leaking secrets between stages.

Separate projects per stage isolate environment variables and resources, reducing risk of accidental leaks or interference. Sharing variables or projects risks mixing secrets.

✅ Best Practice

expert

What is the recommended practice to rotate secrets stored as environment variables in Supabase without downtime?

You need to update a secret API key stored in Supabase environment variables used by Edge Functions. How do you rotate the secret safely without causing downtime or errors?

A Store both old and new secrets in the same variable separated by a comma and parse them in code.

B Delete the old secret variable first, then add the new one and redeploy functions.

C Update the environment variable directly and redeploy all functions immediately.

D Deploy new functions that read the new secret variable while old functions still use the old one, then switch traffic gradually.

💡 Hint

Consider how to avoid breaking running functions during secret updates.

Gradual rollout with new functions using the new secret while old ones still run avoids downtime. Direct replacement risks breaking running functions that rely on the old secret.

Practice

1. What is the main purpose of environment variables in Supabase?

easy

A. To display data on the website

B. To write SQL queries directly in the dashboard

C. To store important information like API keys outside the code

D. To create user accounts automatically

Solution

1. Step 1: Understand environment variables

   Environment variables hold data like API keys or URLs outside the code to keep it safe and flexible.

2. Step 2: Identify their use in Supabase

   Supabase uses environment variables to keep secrets safe and avoid hardcoding sensitive info.

3. Final Answer:

   To store important information like API keys outside the code -> Option C

4. Quick Check:

   Environment variables = store secrets safely [OK]

Hint: Environment variables keep secrets outside code [OK]

Common Mistakes:

• Thinking environment variables are for writing SQL
• Confusing environment variables with user data
• Assuming environment variables display data

2. Which is the correct way to reference an environment variable named SUPABASE_URL in a Supabase project?

easy

A. env.SUPABASE_URL()

B. process.env.SUPABASE_URL

C. getEnv('SUPABASE_URL')

D. SUPABASE_URL.value

Solution

1. Step 1: Recall environment variable syntax in JavaScript

   In JavaScript, environment variables are accessed using process.env.VARIABLE_NAME.

2. Step 2: Match with Supabase usage

   Supabase projects use this standard way to access environment variables like SUPABASE_URL.

3. Final Answer:

   process.env.SUPABASE_URL -> Option B

4. Quick Check:

   Access env vars with process.env.VAR [OK]

Hint: Use process.env.VAR to access environment variables [OK]

Common Mistakes:

• Using function calls like getEnv() which don't exist
• Trying to access variables as object properties incorrectly
• Forgetting the process.env prefix

3. Given this code snippet in a Supabase project:

const supabaseUrl = process.env.SUPABASE_URL;
const supabaseKey = process.env.SUPABASE_ANON_KEY;
console.log(supabaseUrl, supabaseKey);

What will be the output if SUPABASE_URL is set to https://xyz.supabase.co and SUPABASE_ANON_KEY is not set?

medium

A. https://xyz.supabase.co undefined

B. undefined undefined

C. https://xyz.supabase.co null

D. Error: SUPABASE_ANON_KEY not found

Solution

1. Step 1: Check environment variable values

   SUPABASE_URL is set to a URL string, but SUPABASE_ANON_KEY is missing, so it is undefined.

2. Step 2: Understand console.log output

   Logging both variables prints the URL string and undefined for the missing key.

3. Final Answer:

   https://xyz.supabase.co undefined -> Option A

4. Quick Check:

   Missing env vars print undefined [OK]

Hint: Missing env vars show as undefined in logs [OK]

Common Mistakes:

• Expecting an error when env var is missing
• Assuming missing vars print null
• Confusing undefined with empty string

4. You added a secret API_SECRET in the Supabase dashboard but your app still logs undefined when accessing process.env.API_SECRET. What is the most likely cause?

medium

A. You must include the secret in your code manually

B. The secret name is case-insensitive and should be lowercase

C. Supabase does not support environment variables

D. You forgot to restart the app after adding the secret

Solution

1. Step 1: Understand environment variable loading

   Environment variables are loaded when the app starts, so changes require a restart to take effect.

2. Step 2: Identify the cause of undefined

   If the app logs undefined, it likely did not reload the updated environment variables after adding the secret.

3. Final Answer:

   You forgot to restart the app after adding the secret -> Option D

4. Quick Check:

   Restart app to load new env vars [OK]

Hint: Restart app after adding secrets to load them [OK]

Common Mistakes:

• Thinking secret names are case-insensitive
• Believing Supabase doesn't support env vars
• Trying to hardcode secrets in code

5. You want to securely use a third-party API key in your Supabase Edge Function without exposing it in client code. Which approach is best?

hard

A. Store the API key as a secret in Supabase dashboard and access it via process.env inside the Edge Function

B. Hardcode the API key directly in the Edge Function code

C. Send the API key from the client app to the Edge Function on every request

D. Publish the API key in a public GitHub repo for easy access

Solution

1. Step 1: Understand secure storage of secrets

   Secrets like API keys should never be hardcoded or exposed publicly to avoid leaks.

2. Step 2: Use Supabase secrets in Edge Functions

   Storing the API key as a secret in the dashboard and accessing it via process.env inside the Edge Function keeps it secure and hidden from clients.

3. Final Answer:

   Store the API key as a secret in Supabase dashboard and access it via process.env inside the Edge Function -> Option A

4. Quick Check:

   Use secrets in server code, not client [OK]

Hint: Keep API keys in secrets, access only server-side [OK]

Common Mistakes:

• Hardcoding keys in code risking exposure
• Sending keys from client risking interception
• Publishing keys publicly causing leaks