How to hide your precious API keys in React for beginners.

Before reading this, it's assumed that you know the basics of how to push code using git and a bit of React but I have tried to keep it as simple as possible.

What are API keys anyway ?

These can be thought of like an access code that allows us to grab some form of data from somewhere. Eg. Weather data from a weather server (openweathermap.org).

Why should we hide it ?

Now for a simple app like this, revealing your API_KEY might not cause you much harm, but imagine if you are building a bigger app you definitely don’t want a random stranger to use your services using your API_KEY – hence its always important to maintain best practices from the beginning itself.

So the main question, How do we hide it?

Simple, create a .gitignore file and type in the file name you wanna hide.Okay if you are a beginner its a bit intense. Don’t worry we’ll figure it out along the way.

What in the world is a .gitignore file ?

It is basically a file where we can include the name of the file/folder we want to hide from the prying eyes of human beings when you are uploading your project files into your Github repo. Now what type of files are we talking about here ? Imagine if you are building a simple weather app and you have in your hand an API_KEY which gives access to the weather info and you don't want anyone else to grab this piece of info.

So now lets get our hands dirty, shall we ?

Step 1: Create a .gitignore file in the root (main section) of your project folder (this is important!).

Step 2: Create another file and name it api.js . Now you must have your API_KEY (or whatever you have named) variable with the key value in your App.js right ? Cut and paste this API_KEY and its key value to api.js. Dont forget to add export keyword before the variable. It would look something like this inside your api.js.

export const API_KEY = "629ce335eae4t5cce613adf9c55a514a";

This api.js now contains your API_KEY details, but hold your horses as your app won't work because now you don’t have any API_KEY in your App.js.

Step 3: import the API_KEY from api.js to App.js. What are we doing here ? In simple terms we want to make a copy of the variable in order to use it inside App.js. In React we can import like this:

import {API_KEY} from './api'

Now you can notice that the full circle is complete and now your app is working fine.But even though we made a copy of the key to another file, notice that this api.js file is still visible.

Step 4: Remember in Step 1 we created a weird file called .gitignore. Well, now its time to type in the name of the file we want to hide inside this file. Type in:

/src/api.js

Here are ‘/’ means the root of your project folder. So /src/api.js means we are going inside src folder then grabbing api.js.

Step 5. We are almost done, now you can push your code to Github using Git.Now open your Github and go to your weather app project.Are u seeing the .gitignore file in your root of your folder ? Yes you do. But wanna see the real magic? Go to your src folder and keep looking for that poor api.js file as you won’t be seeing it anymore. If you have played the game Among us, you can imagine api.js as an imposter and now he has vented into thin air.

BONUS SCENERIO: If your have already pushed your code containing this api.js file in your project folder even before creating a .gitignore file – Don't worry I have a simple one liner solution. Okay, go ahead and perform step 1 and step 4, and open git and type in the following:

git rm -–cached  api.js

Now what this does is it removes that specific file from the working tree or in simple terms the upload list. So when you are uploading/pushing your code this api.js file is ignored/not included. Now go ahead and push your code again to Github. Enjoy your magic again.

Thats it for now folks.Being a beginner in React I might have made some writing mistakes, please do let me know so that I can correct myself . Also this is my first blog post so yay!

 < HappyCoding />