Lesson Tuesday

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 could access it.

Thankfully, we can easily conceal our API keys in our applications. In a production-ready app, your JavaScript application would typically make an AJAX 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. (In cases where the browser needed to talk to the API directly, there are more complicated procedures involving single-use tokens.)

Managing API Keys

We can approximate this by using a .env file stored on our local machines and including it in our .gitignore file. This way, we don't accidentally push sensitive information to Github. Anyone who wants to clone and use our app can simply create their own local file with their own key with the same filename and location. (We should always include instructions in our README on how to do this, including on Friday's code review.)

Add .env to your .gitignore file. The .env stands for environment variables. 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. (.env is a convention used across many frameworks, including Node and Rails.)

At this point, your .gitignore file should look something like this:

.gitignore
node_modules/
.DS_Store
build/
.env

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

.env
API_KEY=[API_KEY GOES HERE]
OTHER_API_KEY=[OTHER API_KEY GOES HERE]

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

npm install dotenv-webpack --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

We can store as many environmental variables as we like in our .env file; for instance, we might have variables for various API keys and other variables for Amazon Services such as S3.

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. Finally, when you do push projects that require API keys to Github, 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!