Design comparison
Solution retrospective
For this challenge I wanted to learn how to secure an API key. In the readme of the challenge it's suggested to simply not provide card details to avoid getting charges. I wanted to go the extra mile and learn how this would be done in a real project were exposing your API key is not an option.
My first idea was to use local .env files and avoid committing this to source control. The problem with this approach is that the API keys are still exposed in the front end. Anybody can look in the network tab of the developer tools where the API key is visible in plain text.
My next idea and what I ended up doing was using Netlify functions. Netlify functions allow you to run small snippets of code in the backend without the need to set up a server. This is the reason they are also known as "serverless functions". Netlify functions, along with the Netlify CLI and Netlify environment variables have allowed me to completely hide my API keys or even have the need to store them locally.
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord