Don’t publish API Keys

API Keys are very private and should not be shared with anyone. It is a form of authentication that verifies who you are, just like your driving license, you do not want to share that with anyone.

In my React app, I have my code push to Github Repository. I’ve realised I shouldn’t push my API keys and have anyone access the keys. So how do I hide it?

Use environment variable

A variable contains name and value like var year = 2018; and this can be used anywhere in the program.

Environment variable is a variable that is set outside the program and then gets used throughout the program.

By putting the API Key as environment variable, you don’t need to constantly remove your API Keys before you git push or put the file that contains API into .gitignore file

How to create environment variable?

1. Install dotenv npm install dotenv--save . This node module loads environment variables from .env file
2. add require('dotenv').config() to the file where you called the API. In this case, my setupProxy.js file
3. create .env file at the root directory (in your project folder) and add your API Keys API_KEY=12344566789084747
4. Add .env file to .gitignore file so that Git doesn’t commit your .env file that contains the API keys