So, you are making a Frontend application which interacts with a third-party API and chances are high that you will be using an API Key. But, how do you protect your API Key from being exposed to others?

Sadly, you can't hide your API key in the Frontend of your application. But, with Netlify Functions you can protect your API Key.

Getting Started with Netlify

Install and use Netlify Dev from your Terminal

1) Use this command to install

npm install netlify-cli -g

After installing the Netlify CLI run

netlify login

and then

netlify init

You will be prompted with this choose your preferred way

2) Create a netlify.toml configuration file in your Project Folder

Inside the netlify.toml file add this code

[build]
    publish="dist"
    functions="functions"

This code tells which folder to publish and where to find the Netlify Functions folder.

3) Now we will create the token-hider function. Type this in your terminal

netlify functions:create

And search for token-hider and press enter to install the function

Open the token-hider.js file in your functions folder and change the URL as per your API URL:

Leave the rest of the code as it is and change only these two lines to match your URL structure

If your API do not use any parameters you can delete the API_PARAMS variable

In my case the URL looks like this:

  const { API_SECRET, API_URL } = process.env;
  const URL = `${API_URL}?${API_PARAMS}&key=${API_SECRET}`;

You should specify the API_SECRET and API_URL in the netlify site UI. To open the netlify site UI run

netlify open

Your browser will take you to your netlify dashboard

1) Click on Site settings

2) Click on Build & deploy

3) Edit Variables in Environment

4) Then save it.

Create a dist folder

mkdir dist
cd dist
touch index.html
mkdir js
cd js
touch index.js

Fill the index.html with this code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API</title>
</head>
<body>
    <form class="search">
        <input class="search-field" type="text">
        <button>Search</button>
    </form>

    <script src="./js/index.js"></script>
</body>
</html>

Open the index.js file and make a request

Instead of making the request directly to the API we make a request to the token-hider file which will then read the environment variables from the Netlify UI and then give us the result.

const searchField = document.querySelector(".search-field");
const searchForm = document.querySelector(".search");

async function getapiResults() {
    const res = await fetch("/.netlify/functions/token-hider" + "?q=" + searchField.value)
    .then(res => res.json())
    .then(data => console.log(data.items))
}

searchForm.addEventListener("submit", (e) => {
    e.preventDefault();
    getapiResults();
});

You can check the Network Tab in Chrome or Firefox dev tools to check if the api key is exposed or not.

In my case you can see clearly the API URL and API Key has not been exposed.

To check your Project live run

netlify dev

To deploy run

netlify deploy --prod

If you have any doubts you can check the source code on my Github

Thank you for reading this article. I hope you enjoyed it and if you have any feedback share it in the comments and I will try to improve on that.

Aadhi's Blog

Aadhi's Blog

Hide API Keys using Netlify token-hider Function

Getting Started with Netlify