Dotenv - Dealing with Environment variables.
Tags: security, git, node, npm
Published: 2020-07-11 07:55:13

This blog will make you more protective for your secrets. That you keep in form of password, API-KEYS, Redirect_URI, BASE_URL etc.

Before Starting with information let me walk you through the content of the blog.

# Content Overview

- Talking about Security
- Protection Need?
- What is Dotenv?
- Let's Start protecting ourself
  - React Native Protection
  - Installing dependencies.
  - Setting .env file.
  - playing around .gitignore file.
  - Push all in.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2z6rnx7euqvmfx87ra0e.gif)

> # Talking about Security 🔐

security is the need of the hour. Two days earlier heard a news on Breaches and incidents around cyber security and got some stuff

> # Hackers attack ride hailing app SWVL, access user information
> #### Egypt-based ride-hailing app SWVL was hacked in an attack that exposed the personal information of passengers including emails, names, and phone numbers.
> Source: https://cyware.com/category/breaches-and-incidents-news

I am thinking you might read the news and now you are thinking that how may I safeguard myself so don't worry I am here to help you.

Here will you get how you can push a GitHub repository without Showing of the API_KEY | REDIRECT_URL | any other sort of secrets...

> # Protection Need?

Repeatedly using the same passwords or using 'weak' passwords can leave you vulnerable to hackers. If a hacker cracks your passwords, they could gain access to your social media accounts, bank accounts, emails and other sensitive accounts that hold your confidential, personal data.

So there is a maximum need of protection.

> # What is Dotenv?

Dotenv allows one to safe their secrets like (database | password | api_keys etc.) from compromising it in the application on which these stuff are dependent upon. 

Dotenv seperates these secrets from reflecting it inside the main code.

Hiding makes the outsider look only the name, that this place has any api key or some secrets.

For example`process.env.API_KEY`

> # Let's Start Protecting Our-self.

> Node.js Protection

### Installing Dependencies

```bash
// with npm
npm install dotenv
// with yarn
yarn add dotenv
```

Require the installed module to the `index.js` file or `App.js` file as per the naming convention of your file.
```javaScript
require('dotenv').config()
```

### Setting .env file.

Make file in your root directory :

Command to make .env folder below : (If using Bash)

```bash
// change directory
cd FileName
// making the file
touch .env
```
Inside the .env file put your secrets. See below from example.
```javaScript
API_KEY=Qrsias22c5wdVx6lkLxkee18dh
BASE_URL=https://xyz.com/v3/
DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3
```
Inside the Node File you have to make some changes.
```
const db = require('db')
db.connect({
  host: process.env.DB_HOST,
  username: process.env.DB_USER,
  password: process.env.DB_PASS
})
```
---

Now A question must have arrived in your mind :

Q1. Well ! we have .env file and person could even see the password and other protective secrets out from there?

A1. Well wait I haven't completed yet. there is bit magic awits for playing its charm.

---

### playing around .gitignore file.

Now when we are done with submitting Secrets. Now it's time to push all in. But one thing before pushing is to mention the `.env` to `.gitignore` file

As to avoid any breaches, as pushing the `.env` file will push all our secrets to the GitHub repository compromising our secrets.

```javaScript
//Inside .gitignore file mention
.env
```

### Push all in.

```bash
// use these command if you had already initialize Git Repository.
git add .
git commit -m "Add to Security"
git push origin master
```
If not Visit here to know [How to initialize the git repository](/uyadav207)

So we are Good to go here.

🙏 Thanks for Reading the Blog. 🕶

`Follow me one:`

[Instagram](https://www.instagram.com/utkarsh_developer/) | [Twitter](https://twitter.com/utkarsh_js_dev) | [GitHub](https://github.com/Uyadav207)

`Support me on:`

<a Align="left" href="https://www.buymeacoffee.com/Utkarshjsdev" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" width="100" height="20" /></a>

Do React and comment. How was my Blog? 👍

Happy coding 👨‍💻👩‍💻 !