How to hide API keys from GitHub

IMPORTANT, Please read before continuing!

Using the method in the blog post below will stop your key being pushed to GitHub, but you cannot deploy your app without including the key. The only way to hide it is to proxy your request through your own server. Netlify Functions are a free way to add some simple backend code to a frontend app.

This is this method I used while learning to program in college, where I needed to share my progress with my peer group without disclosing my API keys.

First, If you have already pushed commits with sensitive data, follow this
guide to remove the sensitive info while retaining your commits here.

To start, in the terminal, in the root of your project, create a config.js file and open it up:

touch config.js

then

nano config.js

Next in the config file you have just created, enter your API keys in an object like so (naming them whatever you like, and putting the keys in as strings). You don’t need any other code in this file:

var config = {
 
 MY_KEY : ‘123456’,
 
 SECRET_KEY : ‘56789’,
 
 KEY_2 : ‘101010’
 
}

In your HTML file, add a script link to this file BELOW your jQuery script but ABOVE your own script file links:

<script type=’text/javascript’ src=’config.js’></script>
 
<script type=’text/javascript’ src=’script.js></script>

In your javascript/jquery file (probably script.js), declare variables that point to your API keys in the config file like so. Note that the ‘config’ here refers to the object called ‘config’, NOT to the file config.js:

var mykey = config.MY_KEY;
 
var secretkey = config.SECRET_KEY;

Be sure to replace every instance of the API keys with these new variables.

E.g. if you had:

url: ‘https//www.whatever.com/?query&sig=12345'

Now you will have:

url: ‘https://www.whatever.com/?query&sig=' + mykey

Now again in the terminal, create a .gitignore file in the root of your project and open in atom or whatever editor you are using. Note the period at the start of the file name:

touch .gitignore

then

nano .gitignore

In the .gitignore file, enter any file names that you want git NOT to track/commit/push. No other code is necessary.

In this case, you would enter:

config.js

Now in the terminal type:

git status

You should see the .gitignore file ready to be tracked. You should NOT see the config.js file.

Now add the change to the working directory to the staging area:

git add .

Then check the git status again:

git status

Make sure the config.js file didn’t get added. If everything looks good, you’re ready to commit and push.

Again it is important to stress if you are deploying a frontend-only application you cannot hide anything from your deployed site.

If your code needs to access a value to make an API request, that value will be visible in the browser’s dev tools to any user who feels like checking. Any API request you make will be visible in the Network tab and will show the full URL and any headers, which will expose the key. This is not the method you would use to hide your keys during deployment. I cannot stress this enough.

Anyway, I hope this quick tutorial helps people new to programming push their projects to GitHub without sharing their API keys.