How to Safeguard Your API Keys and Avoid Unexpected Bills

Imagine you're using SendGrid to handle your contact form, and accidentally push your API key to your public repository. Someone unauthorized finds it, uses your API key, and you suddenly get a $1000 bill. This isn't just a hypothetical situation, it can easily become a reality. Therefore, it is important for a developer to know how to keep sensitive data private.

In this post I will talk specifically about API keys, but this can be applied for other confidential data as well.

Store Sensitive Data Safely

Keep things like API keys and secret information in .env files, not in your actual code. This separation ensures that your sensitive data is hidden and safe.

// Instead of this in your code:
const API_KEY = 'abcdefghijklmnop'

// Use this:
const API_KEY = process.env.SENDGRID_API_KEY

Here, SENDGRID_API_KEY is stored in a .env file. Example of .env file content:

SENDGRID_API_KEY=abcdefghijklmnop

Keep .env Files Private

Always remember to add your .env files to your .gitignore file. This step is crucial because it prevents your sensitive information from being accidentally committed to version control and ending up in public places.

Example of .gitignore file content:

# local env files
.env*.local

Use .env.example for Public Repositories

While keeping your .env files private is essential, there's an exception to this rule: the env.example file. This file can be safely added to your repository. It serves as a template for the actual .env file, containing the necessary environment variable names without their sensitive values.

This way, other developers can understand what environment variables are needed without exposing any sensitive data.

Example of .env.example file content:

# Application environment
NODE_ENV=development

# Server port number
PORT=3000

# SendGrid API Key (replace with your own key in the actual .env file)
SENDGRID_API_KEY=your-sendgrid-api-key-goes-here

# Google reCAPTCHA keys
RECAPTCHA_SITE_KEY=your-recaptcha-site-key-goes-here
RECAPTCHA_SECRET_KEY=your-recaptcha-secret-key-goes-here

Be Cautious with Client-Side Code

Never put your secret keys in the code that runs on the user's web browser. In JavaScript, there are server-side environments like Node.js and frameworks like Next.js. Use these for handling your private information securely.

// Avoid this in client-side code:
const API_KEY = process.env.API_KEY

// Instead, make an API call to your server:
fetch('/api/data')
  .then((response) => response.json())
  .then((data) => console.log(data))

The server-side code handles the API key securely.

Next.js Specifics

If you're working with Next.js, remember that any data with the NEXT_PUBLIC prefix is visible to the browser. So when dealing with sensitive data like API keys, it's better not to use this prefix. Instead, manage such information in API routes or server-side functions where it stays safe and hidden from the public eye.

// Avoid this:
const apiKey = process.env.NEXT_PUBLIC_API_KEY

// Outside of your API route or server-side function:
const apiKey = process.env.API_KEY

// Then, use it in your server-side files or API routes:
export default function handler(req, res) {
  // Your server-side logic here, using 'apiKey'
}

This setup ensures the API key is only used server-side and is loaded once when the server starts, not on each function call.

By following these simple practices, you can go a long way in protecting your sensitive data without any 'oops-I-just-got-a-huge-bill' moments.

← Back to home