Environment variables and secrets in Supabase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to access an environment variable in Supabase.

Supabase

const apiKey = process.env.[1];

Drag options to blanks, or click blank then click option'

ASECRET_KEY

BSUPABASE_URL

CDATABASE_URL

DSUPABASE_API_KEY

Attempts:

3 left

💡 Hint

Common Mistakes

Using the URL variable instead of the API key.

Using a generic secret key name not defined in Supabase.

The environment variable SUPABASE_API_KEY holds the API key needed to authenticate requests.

2fill in blank

medium

Complete the code to load environment variables from a .env file using Supabase CLI.

Supabase

supabase functions deploy --env-file [1]

Drag options to blanks, or click blank then click option'

A.env

Bconfig.env

Cenv.txt

Dvariables.env

Attempts:

3 left

💡 Hint

Common Mistakes

Using a file without the leading dot.

Using a text file with an uncommon extension.

The standard filename for environment variables is .env.

3fill in blank

hard

Fix the error in the code to securely access a secret in a Supabase Edge Function.

Supabase

const secret = Deno.env.[1]('MY_SECRET');

Drag options to blanks, or click blank then click option'

Aget

Bfetch

Cread

Daccess

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent methods like fetch or read.

Trying to access environment variables directly without a method.

In Deno, environment variables are accessed using Deno.env.get().

4fill in blank

hard

Complete the code to set and access a secret in Supabase Edge Functions.

Supabase

Deno.env.[1]('MY_SECRET', 'secure_value');
const secret = Deno.env.get('MY_SECRET');

Drag options to blanks, or click blank then click option'

Aupdate

Bset

Cdelete

Dreplace

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent methods like delete, update, or replace.

Confusing the set method with get or other operations.

Use Deno.env.set(key, value) to set an environment variable in the current Deno process. For production secrets in Supabase Edge Functions, use the CLI command supabase secrets set MY_SECRET=secure_value instead.

5fill in blank

hard

Fill all three blanks to create a secure connection using environment variables in Supabase.

Supabase

const supabaseUrl = process.env.[1];
const supabaseKey = process.env.[2];
const supabase = createClient([3], supabaseKey);

Drag options to blanks, or click blank then click option'

ASUPABASE_URL

BSUPABASE_API_KEY

CsupabaseUrl

DDATABASE_URL

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up environment variable names.

Passing the environment variable name string instead of the variable.

Use SUPABASE_URL and SUPABASE_API_KEY environment variables to get the URL and key. Then pass the URL variable supabaseUrl to createClient.

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