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
SIgn up for a new Netlify account.
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.