Lesson Weekend

In the real world, API keys shouldn't be stored in client-side JavaScript files. This simply isn't secure, especially if the API has a rate limit, charges for use, or provides access to sensitive information. If your API key is accessible directly in the source code, anyone can access it.

Thankfully, we can easily conceal our API keys in our applications. In a production-ready application, your JavaScript application would typically make a request to your own web server, which would then make the appropriate request to the API. The API key would be safely stored on the server, too. However, we still need to manage keys for development, including storage in GitHub, especially if our code is stored in a public repository.

Managing API Keys

When we are writing code in development, we can store our API key in a .env file stored on our local machines. .env is a place where we can store any environmental variables we want to keep secret (such as an API key). These are variables that are specific to your environment and shouldn't be shared with others. .env is a common file extension for a configuration file used to set variables containing sensitive information. In fact, the file is a convention used across many frameworks including Node and Rails.

Then we can store this file in our .gitignore file. This way, we don't accidentally push sensitive information to Github. Anyone who wants to clone and use our application can simply create their own local .env file with their own key. Note that you are required to include instructions for setting up an API key in your README for this section's independent project. Because a README should have all instructions for setting up a project, it's pretty clear why instructions for getting API calls in the project are necessary, too.

Let's add .env to our .gitignore file now. At this point, your .gitignore file should look something like this:

.gitignore
node_modules/
.DS_Store
dist/
coverage/
.env

Let's also create a .env file in the root directory of our project where we can store our sensitive variables:

.env
API_KEY=3d68a17ddd5ea407ab91f2d278342017

Note that the API key above is a fake one - you will need to replace it with your own. It's not a string - so don't use quotes or backticks!

We can add as many variables as we want (such as if we are working on a project that uses multiple APIs and keys). While we are only protecting API keys, there are many other sensitive variables not related to APIs we might potentially want to store in the future. Note that the naming convention here for variables is all uppercase with underscores between each words.

Next, we'll use a webpack plugin called dotenv-webpack to make our environmental variables available inside our application:

$ npm install [email protected] --save-dev

Because it's a plugin, we need to first require it and then add it to the plugins array in webpack.config.js:

webpack.config.js
...
const Dotenv = require('dotenv-webpack');

module.exports = {
  ...
  plugins: [
    ...
    new Dotenv()
  ],
  ...
  }
};

To access environmental variables in our application, we need to preface the environmental variable with process.env. Here's an example using our API_KEY from above:

process.env.API_KEY

Note that it's necessary to use a template literal so the key is expressed as a string within our API call. (Remember, it's not a string in our .env file.) For that reason, it's added to our code like this: ${process.env.API_KEY}. Here's how it should look if we add it to our API call from the last lesson:

index.js
const url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${process.env.API_KEY}`

You should always be careful storing any sensitive information in your application. Even if it's just the key for an API that's free for public use, you should still be in the habit of keeping this information private.

Generally, we don't need to worry too much about security with the public APIs that we'll be using, but it's important to be aware of the security issues around API keys. Make sure you store all keys in a local .env file that's never pushed to Github. dotenv-webpack should also be a regular tool in your toolbox whenever you're using sensitive variables in webpack projects. And once again, when you do push projects to GitHub that require API keys, make sure to include instructions in the README so that other users can clone your project and use their own API keys to see what you've built. That means including all steps for getting a key - from the link to sign up for an account to any steps to getting an API key to using a personal key with a .env file. Adding both a .env file with properly stored API variables as well as instructions for adding an API key is a requirement for this section's independent project.


Example GitHub Repo for API Project

The above link takes you to a branch within a repo. Make sure that you are referencing the code from the branch called 1_basic_api_call. This is the default branch, so running git clone... with the url of the repo home page will automatically clone down the branch called 1_basic_api_call. As needed, review the lesson on accessing code from different branches.

Lesson 8 of 26
Last updated October 12, 2021