Creating environment variables for client side code


I’m looking for ways to hide my API key on a client side project of mine. From what I understand there is no way of hiding keys on the client side but I was just wondering if there was a way to do so through Netlify environment variables? All I have is an index.html and app.js file.


hi @nicmeriano, one way to do that is to use Lambda Functions. I have an example site that hides an API key in my token-hider-inator repo. This is also a netlify-dev template and you can read about how to use that here. Let me know if that helps.

Thanks Dennis! I took a look at the resources you mentioned and I think I’m heading in the right direction but I’m still not sure how to implement lambda functions for my project. Will the lambda function enable me to access the API key from my app.js file? As you can tell I’m just learning how all these things fit together… thanks for your time!

Based on the repo ‘token-hider-inator’, you’ll see that the client-side code calls the lambda function instead of the API directly. The function then calls the API and passes the payload back. Hope that helps.