How to hide API keys and ID's?

how can i “hide” my API key and id to make my project more safe? i know that its not a good idea to deploy a project without “hiding” that information.
But for practice i just wanna know. how can i make this information private?


const App = () => {
    const APP_ID = "323f7e43";
    const APP_KEY = "d5cc4971d35daf5e663336cc95541269";

Hey, you can use environment variables for this. If you’re using node, install a package called ‘dotenv’ on your project. Then create a file in your project root folder with no filename and a ‘.env’ extension. Inside this you can provide key value pairs like this:


No quotes or anything. You can then retrieve these variables using ‘process.env.APP_ID’ for example.
Most deployment services like Heroku, and Glitch have options for storing environment variables. When you deploy your app, it’s a good idea to give some instructions on how the API keys and passwords should be assigned.

You can find more info on dotenv here :

1 Like

@oshikurou, here you’ll get some information–env-file

You can search for it something like this ‘use of .env’ for more info /to get different instances of code and its use

One thing to remember with this: also add .env to your .gitignore so you don’t check it in to your repo.


i just saw in a video that you can still access the “api key” if you use .env …so what the point of doing it in the first place?

The video is correctly explains the part that whatever you send to the client is accessible, but gives strange and vague explanation how to make it on the server… You don’t need proxy servers, but your own API and that’s how 99% of all apps function. You’ll have your client application and your API this application will talk to.

Regarding .env, you will still need it to be able to upload your server app (API) to github or to work on application collaboratively

If you use server-side rendering frameworks, like Next js they will most likely provide you with functionality to fetch data “from server only”, like getServerSideProps in Next js. So if you’re building something easy and don’t want to set up full scale API server you, normally, still have workarounds

so whats the point of “hiding” the key that way then?

You mean in .env file? Because, as app growth more and more people starting to get access to the codebase, even if it’s proprietary software and not everyone who has access should see secrets.

Reason number two: different versions of app may very well sit on different machines consuming third-party APIs using different secrets. Keeping all secrets in one file makes less hassle over searching a codebase and rewriting keys for each machine manually.

Speaking in more broad terms, the more connection secret key has to a machine the better and the less connection code has to a machine the better. This suggests that secret keys and code should not live together as it will either create security issues away from machine or “but it works on my machine” issues closer to machine.

yeah, but if they can see the code in my .env file. then how will it help if i try to hide my api key that way?

You put your .env file in your .gitignore.

This stops it from being checked into a repo.

.env files should only live on your local machine and the server your app is deployed to.


sorry for the question but, what does This stops it from being checked into a repo. means :stuck_out_tongue:

Source code is usually stored in a remote git repository, such as GitHub, BitBucket, GitLab.

For open source projects, this code is 100% visible. If you put your database credentials in there, it’s bad news!

It’s even advised to keep these out of private repos, but it’s not as urgent.

so if i put it in a .env im good to go?

Yes, as long as the .env is also put in a .gitignore file.

Here’s something I can’t figure out related to deployment and environment variables. I want to store my path for MongoDB Atlas, which includes username, password and database name. I am using Goorm IDE for dev/testing, and deploying to Heroku for production (I’m a newbie, so my “production” isn’t really a public app, but someday . . . ) Anyway, the only way I know to get my code to Heroku is via Git push. So it makes no sense to store env. variables in a file that is Git-ignored, if you know what I mean. Instead, I was able to set an env. variable in Heroku dashboard settings, and that is working nicely . But on the Goorm side, I can’t see a way to store this variable. If I set it with a shell command, it works, but only for that specific terminal window session. If I close that terminal window, close/restart my Goorm container, etc., it disappears. I checked Goorm docs but did not see a way to store env variables persistently – only a way to set up scripts for run/test/build, etc., which also aren’t working. Goorm tech support (for its FREE service) consists of recommending that I join discussion forums (smile) but I can’t blame them for that, since it’s free after all. Hoping some Free Code Camp folks have used Goorm and solved this. Thanks for any help you can offer.

Simply having .env file will not make it’s content environmental variables, you need to load variable. If you’re on Node, the go-to package is dotenv:

Thanks for replying. And if I want to have one value for the env variable in my dev/test environement, and a different one in my production environment, how can I achieve that with git push to Heroku as my only way to build?

You will never push .env to github, instead each machine (local + Heroku) will have their own variables, as I’ve written above - environmental variables is a property of machine, not the app and having different values on different machines is expected behaviour.

What you should push instead is .env.example with description of all the values the apps needs to keep variables consistent in all environments.