DEV Community

Cover image for Stop Hard-Coding API Keys: Why You Need Environment Variables Right Now

Stop Hard-Coding API Keys: Why You Need Environment Variables Right Now

Jordan Rudman on January 31, 2025

Have you ever built a project using an API that you wanted to post in a public repository so that you can share your code with the world? Perhaps y...
Collapse
 
webjose profile image
José Pablo Ramírez Vargas

A perfect follow-up article would be: Stop using archaic .env files: Why you need hierarchical configuration systems right now.

Collapse
 
joelbonetr profile image
JoelBonetR 🥇

Both approaches have their use cases IMHO. The biggest advantage I can see in hierarchical config is the ability to fetch from secret vaults in real time rather than having to store multiple tokens and what not in the MacBook of each developer, which on it's own can be an attack vector.

Collapse
 
webjose profile image
José Pablo Ramírez Vargas

It's just a plain text file, just like a .json file. The problem is perpetuating the concept of "an environment" in the browser. This artificial construct is unneeded. The whole dotenv is unneeded, even in NodeJS where there is an environment. Hierarchical configurations are much more versatile in every way. It is just dumb to keep .env files around.

Thread Thread
 
joelbonetr profile image
JoelBonetR 🥇

Aren't the hierarchical config files not "around" somewhere as well? Hocon, json... Who cares. Even if you store these in the DB (which is probably the most common way to implement a hierarchical configuration system) you'll have the migration or script to spin up a new environment based off of that given config, and none should be present in your repo or exposed to the public.

For a project (no matter how big) that doesn't need many configurations a dotenv is just fine, same goes for small projects which entire config is a handful of tokens and a flag.

Each and every tool has its pros and cons, glorifying a tool or applying the golden hammer approach only leads to dramas 😂

Thread Thread
 
webjose profile image
José Pablo Ramírez Vargas

It is "finer" to not use .env at all.

import config from './config.json';
Enter fullscreen mode Exit fullscreen mode

That's it. Why .env that forces you to install a BIG package like dotenv? How is that better?

Thread Thread
 
joelbonetr profile image
JoelBonetR 🥇

.env files are natively supported since long ago... Also

const BASE_URL = process.env.BASE_URL;
Enter fullscreen mode Exit fullscreen mode

isn't bad, either.

PS: env files are read on startup so make sure you restart the server when making changes there.

Thread Thread
 
webjose profile image
José Pablo Ramírez Vargas

That wasn't long ago, and that's only in NodeJS. In browser projects are still a hack.

Collapse
 
documendous profile image
Documendous

Would you please write an article on this subject? I know I would love to read this. Thanks!

Collapse
 
xwero profile image
david duymelinck

For truly sensitive keys, consider using a backend server to handle API requests.

All key are sensitive keys in a production environment.

Collapse
 
jrud25 profile image
Jordan Rudman

Yes! As stated in the previous sentence in that section, environment variables should only be used during development.

While .env files are great for hiding keys during development, remember that environment variables used in React are embedded in the build and can be accessed by anyone who inspects the client-side code.

As others have stated in the comment section, using other tools such as SecretsManager/BitWarden or implementing hierarchical configuration systems is the way to go for production environments.

Collapse
 
documendous profile image
Documendous

What do you do if you don't have AWS? or other 3rd party services for it?