Managing Environment Variables Securely

🔐 What Are Environment Variables?

Environment variables are key-value pairs used to configure apps without hardcoding sensitive or environment-specific information directly into your code. Examples include API keys, database URLs, tokens, and secrets. 🌍

Proper use of environment variables helps separate code from configuration, which is crucial for security, scalability, and maintainability. 💡

🧪 Why Manage Them Securely?

• 🚫 Prevent exposing sensitive keys in public repositories
• ✅ Easily switch between development, staging, and production
• 🔁 Enable dynamic configuration without changing code

🛠️ Defining Env Variables in React

React (via Create React App) only allows environment variables that start with REACT_APP_. You can define them in a file named .env at the root of your project:

REACT_APP_API_URL=https://api.example.com
REACT_APP_GOOGLE_MAPS_KEY=your-secret-key
  

Then, access them in your app:

const apiUrl = process.env.REACT_APP_API_URL;
  

⚠️ Never commit the .env file. Add it to .gitignore.

📂 Accessing Env Vars in Next.js

Next.js allows both public and server-only env variables:

• NEXT_PUBLIC_* — Accessible in the browser
• Without prefix — Server-only (e.g., API keys, DB secrets)

Example .env.local file:

NEXT_PUBLIC_API_URL=https://api.mysite.com
JWT_SECRET=super_secret_jwt_token
  

Add .env.local to .gitignore to keep secrets private.

🌐 Setting Env Variables on Hosting Platforms

▶️ Vercel

1. Go to your project → Settings → Environment Variables
2. Add NEXT_PUBLIC_ or REACT_APP_ variables
3. Re-deploy for changes to take effect

🟢 Netlify

1. Go to Site → Settings → Environment
2. Add build-time env vars
3. Netlify injects them during the build process

🔥 Firebase Hosting

Firebase doesn’t support runtime env vars directly. Instead:

• Use .env during build time
• Consider deploying functions for secure server-side logic

💡 GitHub Actions Secrets

For CI/CD pipelines using GitHub Actions:

1. Go to GitHub repo → Settings → Secrets and variables → Actions
2. Add secrets like NETLIFY_AUTH_TOKEN, VERCEL_TOKEN

env:
  REACT_APP_API_URL: ${{ secrets.REACT_APP_API_URL }}
  

🧹 Best Practices

• ✅ Never commit secrets to Git (use .gitignore)
• ✅ Use separate .env files per environment (.env.development, .env.production)
• ✅ Use dotenv in Node.js backend for loading env files
• ✅ Encrypt secrets for internal docs or handoffs
• ✅ Rotate secrets periodically

🔍 Debugging Env Variables

If a variable isn’t showing up:

• Make sure you restarted the dev server after updating .env
• Ensure the variable has the correct prefix (REACT_APP_ or NEXT_PUBLIC_)
• Check hosting platform's dashboard for typos

✅ Final Thoughts

Managing environment variables securely is a must-have skill for any serious developer. It helps keep your secrets safe, your apps flexible, and your deployments clean. 🧠🔐

Stick to the principles of separation of config and code, use secrets managers where needed, and avoid committing anything you wouldn’t want exposed.