Securing your OAuth or Database Secrets (env.sh & Heroku Config Variables)

What is an env.sh, and why do we need it?

Imagine this situation: you've finished you're webapp, and in it you have a Github OAuth or you have a secure connection to your database. To connect to the OAuth or database, you require some secure information, like a secret (which is basically like a password) and an id. If you hard coded this secret/password into your files, and then pushed those files onto Github, then everyone in the world would be able to see it! Hackers will soon be after you!

This is why we need an env.sh file, because it allows you to store your secrets and other private info securely. When you run the env.sh file with . env.sh, it puts the private info into your environment variables (in other words, it sets up the variable on your computer locally or locally on Repl.it) without having to hard code it into any files on Github. This is secure, and not hackers won't be after you!

IMPORTANT: you will have to add the env.sh file to your .gitignore file so that you won't add it to Github! We'll review this in a bit.

When is an env.sh file necessary?

Basically, whenever you have secure information that you don't want people to see on Github. This includes at least the following:

• any secrets or id's for any OAuths or other API's

• information needed to connect to your database

Creating env.sh

We will assume that you already have your Client ID, Client Secret, or any other information you want to put into an env.sh file.

Now, what we will do is create environmental variables that are saved locally on your current computer/Repl.it project and not available anywhere else. We will create a file called env.sh and write a small script that will create and set our environmental variables. As an aside note, environmental variables on our local computers are analogous to Heroku’s Config Vars.

NOTE: As said before, we do NOT want to include env.sh in our git repository. If it is, it will get pushed to your Github repos, with the keys and values online and available for anybody to see. This will compromise the security of your webapp.

Create a file called env.sh on the same level as your webapp.py. The file should have several lines in the following manner:

export VARIABLE_NAME=the_value_goes_here

Here's an example. If we wanted to connect to Github OAuth, and we had to store a Client ID, Client Secret, Github Organization name, and our app's Secret Key, our env.sh would look like the following:

export GITHUB_CLIENT_ID=clientidhere

export GITHUB_CLIENT_SECRET=clientsecrethere

export GITHUB_ORG=ucsd-cse-spis-2020

export APP_SECRET_KEY=ourappssecrethere

To run this script, type . env.sh in the command line. Note the period and space in between. If everything worked correctly, you should be able to type this command with the variable to print out its corresponding value (echo is a bash command you can use in the terminal to write its arguments to standard output - aka print them out):

echo $GITHUB_ORG

echo $GITHUB_CLIENT_ID

echo $GITHUB_CLIENT_SECRET

echo $APP_SECRET_KEY

Adding to .gitignore

Great! You're written the env.sh file. Now let’s add the file to the .gitignore. On the same level as your webapp.py, create a .gitignore file if you don't have one already created. At the bottom of the file, add a line that says *.sh. The asterisk means to include all files that end in .sh. This way, we tell Git to ignore all the files that have the .sh suffix.

Did it work? Use the git status command and we should see that the .gitignore got updated and that we should not be able to do git add env.sh. Make sure you git add and push the .gitignore to Github!

Now, let's secure our app on Heroku

The env.sh allows you to secure your app for local testing. However, how do we get the environment variables in env.sh onto Heroku? If we don't do this, then our uploaded web app won't be able to access the variables we put into env.sh! To give access to our app, all we have to do is add the necessary variables to Heroku's Configuration Variables.

Go to your Heroku Dashboard and select your web app. Go to its Settings (top right in the navbar), and scroll down until you see Config Vars in purple (on the left). You should see a button that says "Reveal Config Vars". Go ahead and click that button. Once you click it, your screen should look like the picture below:

Here is where you add your environment variables -- your webapp can access them from here. In your env.sh, your variables are in this format:

export VARIABLE_NAME=the_value_goes_here

In that example, VARIABLE_NAME is the KEY (config var input on the left) and the_value_goes_here is the VALUE (config var input on the right). Now, go ahead and put all your necessary environment variables in there.