.Env, .gitignore, and protecting API keys

EPrenzlin — Mon, 15 Feb 2021 14:15:03 +0000

Environment files, .gitignore, api_keys and how to use them took longer than it should have to fully 'click' for me.This blog post will hopefully be a good starting ground for others.

TL;DR:

files in .gitignore don't get uploaded onto github
keep your api_key in the your .env file ; have your .env file included within your .gitignore file
access your api_key with REACT_APP

API Keys

First off, API keys are, or can be, a unique identifier (think like a password) used to authenticate the identity of the developer. Sometimes the api_keys are included within the get/post/delete request. Please note that different platforms use API_keys in different manners.

As an example:

fetch(`https://testing.com/api/v4/webhook/add?token=1234abc`
.then(response => response.json() 
.then(data => console.log(data))

From the above fake snippet, we can see that within the fetch request, we have the "token=1234...", which is an example of how api_keys can be imbedded within the get URL.

How can we protect this?

.gitignore

Put simply, this is a file dedicated to keep track of what files NOT to upload onto Github, so the whole world wont see the various information contained therein.

How to set up?

When we creating our own new repository on Github, we have the option to create a .gitignore file.

If we didn't initially do this, we could also quite simply

touch .gitignore in our root directory

Ok - we have a basic overview of api_keys, and .gitignore... how does the .env file fit into all this?

.ENV

Short for environment variable. Within the context of api_keys and .gitignore files, it is essentially a variable that we don't want other users/ developers to see.

It is vital that the api_key remains within the .env file and is not known to the outside world. There are countless stories on the internet with developers not securing their api_keys within the .env, and being charged $$ from the api provider.

Key to note, when creating the .env file, it must be done within the root directory, and not within the src files!

How to add .env in our .gitignore file?

#in our .gitignore file 
.env

#within our .env file
REACT_APP_api_key= "your_api_key_here"

Within the above code snippet, the REACT_APP must be used, per the REACT docs.
https://create-react-app.dev/docs/adding-custom-environment-variables/

When we want to access the api_key within our app, such as when making a fetch request to the api_server:

#below is how to access to api_key from our .env file. 
Notice how the below matches the variable in the .env file?
process.env.REACT_APP_API_KEY}

So, to put this all together in an example fetch request

#wherever we are making our example fetch requests... 
fetch(`fetch(`https://testing.com/api/v4/webhook/add?${process.env.REACT_APP_API_KEY}`
.then(response => response.json() 
.then(data => console.log(data))

`
There we have it - a super quick guide on gitignore, .env, and how to incorporate them into your React app.