How not to expose your sensitive keys to Github.

Introduction -

Securing the critical data for your application is as important as implementing new features and improving UI/UX. Critical data can be anything from API keys, payment gateways to Database credentials.

As you are reading this article, you probably already know the importance of it but here are a few problems that might occur if you push API keys and other important stuff -

Anyone can access your cloud database/third party integrations, perform CRUD operations on your behalf which you definitely don't want to happen.
Some platforms like Auth0 are very strict and they might ban your account if you open-source the API keys.
Most Importantly - you will get the prestigious lifetime tag to leak your team's critical data.

Let's Dive deep- 🕵️‍♂️

We can do this in just 2 simple steps:

Setting up .gitignore
Creating Environment Variables

gitignore -

It's kinda self-explanatory, Git just ignores the files whose relative paths are stored in .gitignore.

Just create a file in the root folder named exactly .gitignore

If you're working on React or any other Framework you might already see a .gitignore file in the root directory.

What we need to do is just add relative paths to the file/folder we want to hide and those files will be ignored while git push.
Here that file is .env (we will study this later)
Just add .env in .gitignore like this:
```
// .gitignore
.env
```

Creating Environment Variables -

Creating Environment variables is the most secure and simplest way to hide the data and still keep our project running absolutely fine.

In Javascript, we can create environment variables using: dotenv package.

Firstly install dotenv using:

npm i dotenv

Then we need to import dotenv in the file where we need the hashed keys. let's say it's app.js:

// app.js
require('dotenv').config();

Now, we have our setup ready and we can create and use our Environment Variables.

Create a file in the root folder named .env. This is the place where we store our API keys and top-secret data.
Declare the variables using this syntax: KEY = value.
Note:
1. It is best practice to keep the key Uppercase but is not a Compulsion.
2. When working in React keys must start with "REACT_APP_"
```
DB_URL = https://example.com
USER_NAME = tushartiwari7
USER_PASSWORD = g7538gyv
and so on...
```
Now, in app.js, we can access the variables usingprocess.env.VARIABLE_NAME such as:

require('dotenv').config();

fetch(`${process.env.DB_URL}/api/routes`)
  .then(response => response.json())
  .then(data => console.log(data));

Resources -

MERN Course by Hitesh Choudhary
https://blog.yogeshchavan.dev/how-to-use-environment-variables-in-react-and-nodejs
by Yogesh Chavan

Conclusion -

Now we know how to hide sensitive data from open source platforms. I hope you can use them with better understanding in your projects now.

Tushar