DEV Community

loading...

Discussion on: Hiding API Keys in Your Code

Collapse
galabov93 profile image
Yordan Galabov

Using Environmental variables on the front end doesn't make them secret. In the example you gave the API key will be visible in the xhr request.

Collapse
ivana_croxcatto profile image
Ivana Croxcatto Author

Thanks for your comment!! Then, could you help me understand how can I keep them hidden? (newbie here!)

Collapse
dayesouza profile image
Day Souza • Edited

I Just did that with my Netlify deploy, and it’a great. But as far as I know, one way to hide this from the front end request is having a back-end API to do this call for you, so your front end just calls it and it returns the values, without the key showing up

Thread Thread
ivana_croxcatto profile image
Ivana Croxcatto Author

It would not work for me at the moment, because I am just working on the Front-End development, but thanks for taking the time to share your knowledge :)

Thread Thread
khoja_suban profile image
Suban Khoja

Well Said. This is called abstraction and everybody learn it but many of them don't know how to apply it. What you told is perfect example of it

Collapse
galabov93 profile image
Yordan Galabov

The easiest and cheapest way is with serverless functions like netlify.com/products/functions/. They play the role of back end and there you can use.env to hide the key.

Thread Thread
ivana_croxcatto profile image
Ivana Croxcatto Author

Thank you so much!! :)

Collapse
ivana_croxcatto profile image
Ivana Croxcatto Author

And I just checked the XHR request, and it is visible, as you say. So, please, if you can, explain what would be a best solution in this case (using React, GitHub and Zeit), so I can edit accordingly and use a good practice.

Collapse
patarapolw profile image
Pacharapol Withayasakpunt

Zeit can also have serverless functions in /api/ folder.

Thread Thread
ivana_croxcatto profile image
Ivana Croxcatto Author

Thanks!! Good to know, I'll check it out.

Forem Open with the Forem app