Handling environment variables in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Astro handle environment variables in components?

Consider an Astro component that uses an environment variable API_KEY. Which option correctly accesses this variable in the component?

Astro

const apiKey = import.meta.env.API_KEY;

export default function Component() {
  return <p>{apiKey}</p>;
}

A Declare <code>const API_KEY = process.env.API_KEY</code> at the top level and use it in JSX.

B Use <code>process.env.API_KEY</code> directly in the component JSX.

C Access the variable using <code>import.meta.env.API_KEY</code> inside the component script.

D Use <code>Astro.env.API_KEY</code> inside the component script.

💡 Hint

Astro uses import.meta.env to access environment variables at build time.

Astro exposes environment variables through import.meta.env. Using process.env or Astro.env is not supported in component scripts.

📝 Syntax

intermediate

Which syntax correctly loads a private environment variable in Astro?

Astro supports public and private environment variables. Which syntax correctly loads a private variable SECRET_KEY that should not be exposed to client code?

A Use <code>import.meta.env.SECRET_KEY</code> only in server-side code or Astro server routes.

B Use <code>process.env.SECRET_KEY</code> in client components.

C Use <code>import.meta.env.PUBLIC_SECRET_KEY</code> in client components.

D Use <code>Astro.env.SECRET_KEY</code> in client components.

💡 Hint

Private environment variables are only accessible on the server side in Astro.

In Astro, private environment variables (without PUBLIC_ prefix) are only accessible in server-side code such as server routes or Astro components rendered on the server. They are not available in client-side code.

🔧 Debug

advanced

Why does this Astro component fail to access the environment variable?

Given this Astro component code:

---
const apiKey = process.env.API_KEY;
---
{apiKey}

Why does it fail to display the API key?

Astro

const apiKey = process.env.API_KEY;

export default function Component() {
  return <p>{apiKey}</p>;
}

A Because <code>process.env</code> is not available in Astro components; should use <code>import.meta.env</code> instead.

B Because environment variables must be imported from a special Astro module.

C Because the component is missing an async keyword to access environment variables.

D Because the environment variable <code>API_KEY</code> is not defined in the .env file.

💡 Hint

Astro uses a different syntax than Node.js for environment variables.

Astro does not support process.env in components. Instead, environment variables are accessed via import.meta.env. Using process.env will be undefined.

❓ state_output

advanced

What is the output of this Astro server route accessing env variables?

Consider this Astro server route code:

export async function get() {
  return new Response(JSON.stringify({ key: import.meta.env.SECRET_KEY }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

If SECRET_KEY is set to supersecret in the environment, what is the JSON response?

Astro

export async function get() {
  return new Response(JSON.stringify({ key: import.meta.env.SECRET_KEY }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

A {"key":null}

B {"key":"supersecret"}

C {"key":"undefined"}

D Throws a ReferenceError

💡 Hint

Server routes can access private environment variables directly.

Since SECRET_KEY is set and accessed in a server route, the response JSON contains the correct value.

🧠 Conceptual

expert

Why should public environment variables in Astro start with PUBLIC_ prefix?

Astro requires public environment variables to start with PUBLIC_. Why is this naming convention important?

A It enables Astro to load these variables only during development, not in production.

B It is a legacy requirement from older frameworks and has no security impact.

C It allows Astro to automatically encrypt these variables before sending to the client.

D It ensures only variables with <code>PUBLIC_</code> prefix are exposed to client-side code, protecting private data.

💡 Hint

Think about what data should be safe from client exposure.

The PUBLIC_ prefix signals Astro to expose those variables to client-side code. Variables without this prefix remain private and only accessible on the server, helping protect sensitive information.

Practice

1. In Astro, how do you access environment variables inside your code?

easy

A. Using import.meta.env

B. Using process.env

C. Using window.env

D. Using Astro.env

Solution

1. Step 1: Understand Astro environment variable access

   Astro uses the import.meta.env object to expose environment variables.

2. Step 2: Compare with other options

   process.env is common in Node.js but not in Astro client code. window.env and Astro.env are not valid in Astro.

3. Final Answer:

   Using import.meta.env -> Option A

4. Quick Check:

   Astro environment variables = import.meta.env [OK]

Hint: Remember: Astro uses import.meta.env for env variables [OK]

Common Mistakes:

• Using process.env which is Node.js specific
• Trying to access env variables via window object
• Assuming Astro has a global Astro.env object

2. Which prefix must you add to an environment variable name to make it accessible in Astro client-side code?

easy

A. PUBLIC_

B. SERVER_

C. CLIENT_

D. ASTRO_

Solution

1. Step 1: Identify the client-side environment variable prefix

   Astro requires environment variables to be prefixed with PUBLIC_ to expose them to client-side code.

2. Step 2: Eliminate incorrect prefixes

   SERVER_ is not used for client exposure, CLIENT_ and ASTRO_ are not recognized prefixes in Astro.

3. Final Answer:

   PUBLIC_ -> Option A

4. Quick Check:

   Client env prefix = PUBLIC_ [OK]

Hint: Use PUBLIC_ prefix for client env variables [OK]

Common Mistakes:

• Using SERVER_ prefix which is for server only
• Assuming CLIENT_ or ASTRO_ prefixes work
• Not prefixing variables and expecting client access

3. Given this Astro code snippet:

const apiKey = import.meta.env.PUBLIC_API_KEY;
console.log(apiKey);

If the environment variable PUBLIC_API_KEY is set to 12345, what will be logged in the browser console?

medium

A. "PUBLIC_API_KEY"

B. "12345"

C. Error: Variable not found

D. undefined

Solution

1. Step 1: Understand variable access in Astro client code

   Since the variable is prefixed with PUBLIC_, it is exposed to client code and accessible via import.meta.env.PUBLIC_API_KEY.

2. Step 2: Determine logged value

   The value of PUBLIC_API_KEY is set to 12345, so console.log(apiKey) outputs the string "12345".

3. Final Answer:

   "12345" -> Option B

4. Quick Check:

   PUBLIC_API_KEY value = "12345" [OK]

Hint: PUBLIC_ vars appear as strings in import.meta.env [OK]

Common Mistakes:

• Thinking the PUBLIC_ prefix doesn't make it client accessible, expecting undefined
• Confusing variable name with value
• Assuming error if variable exists

4. What is wrong with this Astro code snippet?

const secret = import.meta.env.SECRET_KEY;
console.log(secret);

Assuming SECRET_KEY is set in the environment but not prefixed with PUBLIC_.

medium

A. It will log the secret correctly in the browser console.

B. It will log the string "SECRET_KEY" instead of the value.

C. It will log null because secrets are blocked by Astro.

D. It will log "undefined" because SECRET_KEY is undefined in client code.

Solution

1. Step 1: Check environment variable accessibility rules

   Variables without the PUBLIC_ prefix are only available on the server side and not exposed to client code.

2. Step 2: Analyze client-side access attempt

   Trying to access import.meta.env.SECRET_KEY in client code results in undefined, so console.log(secret) logs "undefined".

3. Final Answer:

   It will log "undefined" because SECRET_KEY is undefined in client code. -> Option D

4. Quick Check:

   Non-PUBLIC_ vars are undefined client-side [OK]

Hint: Secrets need no PUBLIC_ prefix and stay server-only [OK]

Common Mistakes:

• Expecting secret to be available in client code
• Assuming Astro logs variable names instead of values
• Thinking Astro replaces missing vars with null

5. You want to use an API key in your Astro project. The key should be kept secret and never exposed to the browser. How should you handle this environment variable?

hard

A. Prefix the variable with PUBLIC_ and use it directly in client code.

B. Store the variable without prefix and access it in client code via import.meta.env.

C. Store the variable without PUBLIC_ prefix and access it only in server-side code.

D. Prefix the variable with SERVER_ and use it in client code.

Solution

1. Step 1: Understand security best practices for secrets

   Secrets like API keys should never be exposed to client code to avoid leaks.

2. Step 2: Use environment variable naming and access rules

   Variables without the PUBLIC_ prefix are only available on the server side in Astro, so store the API key without the prefix and access it only in server-side code.

3. Final Answer:

   Store the variable without PUBLIC_ prefix and access it only in server-side code. -> Option C

4. Quick Check:

   Secrets stay server-only without PUBLIC_ prefix [OK]

Hint: Keep secrets unprefixed and server-only for safety [OK]

Common Mistakes:

• Adding PUBLIC_ prefix and exposing secrets to client
• Trying to access secrets in client code
• Assuming SERVER_ prefix controls access