DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for How to secure API key by storing it as an environment variable in Netlify?
Rohit Gaur
Rohit Gaur

Posted on

How to secure API key by storing it as an environment variable in Netlify?

What is an API key?

It is a unique identifier used to authenticate the API requests of a project.

Why to keep an API key private?

Let's say you are consuming an API in your application which uses an API key. You would want to keep that key away from the reach of other people. If someone with a malicious intent gets hold of your API key, they could use it for their own personal chores and you might end up getting billed for something you did not consume. Even if it is not a paid API, you could face privacy and/or personal data leak. There are many security threats attached with unsecure API keys, make sure to read more about it.

What is an environment variable?

It is a set of key-value pair, stored outside the program; in the server.

Why to use an environment variable?

There are multiple use-cases for an environment variable, I will address them in context of a front-end application.

  • As they are stored outside the program, they are safe from prying eyes and an attacker won't be able to just browse through your source code and get your API key.

What is Netlify?

Netlify is a San Francisco-based cloud computing company that offers hosting and serverless backend services for web applications and static websites.

How to store API key in environment variables?

To continue, you will have to host a website on Netlify first. You can do that for free as well. Click here to open Netlify.

If you already have a website hosted with Netlify, you can follow these steps:

  1. Go to Site overview and select Site settings
    Site settings

  2. On the left panel, under Build & deploy, select "Environment", then select "Edit variables"
    Environment

  3. You can now enter a keyword in the Key field (eg: SERVER_API_KEY) and the API key (eg: abcdefghijklmnopqrstuvwxyz) in the Value field and Save
    API Key

You have successfully saved an API key as environment variable in Netlify.

Click here if you are interested to know how to access the API key (stored as environment variable in Netlify) in your front-end application using Serverless Functions.

If you have any queries, get in touch with me on Twitter

Top comments (0)

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post