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.