How do I protect my API keys in my React App?

Question

How do I go on about protecting my api keys in my react app ? Do I set something up with express ? I'm trying my best to avoid building anything on the server myself to make the API calls from there. I am solely using firebase as my backend but I am making use of certain services such as emailjs. Is there anyway to make this call to emailjs without exposing it in my client code, without doing anything on my own server ? Emailjs does not offer any encrypting or whitelisting.

emailjs.init("API_KEY");

The only way is to keep them on server and make requests from there. Nothing sent to client is safe — charlietfl
– charlietfl, Commented Aug 7, 2017 at 17:48
So even though I am trying to solely use firebase as my backend, I will still have to create something using php to make those API calls for me ? — john-raymon
– john-raymon, Commented Aug 7, 2017 at 17:50
Just make a little middleware, it's not very hard. You tell the app to use it, when requests come in it adds the API_KEY and the data stays on your server. The value should never make it to the users browser and you have no way of protecting it if it does. Are the users authenticated? You should probably have CSRF protection on this request anyway which will require you to do express middleware. — evanmcdonnal
– evanmcdonnal, Commented Aug 7, 2017 at 18:06
I don't think you should do this in client side code at all. If you need to gain read access in client side code, try to see if they provide publishable key. — Tianhao Zhou
– Tianhao Zhou, Commented Aug 7, 2017 at 18:33

Carlos Henriquez · Accepted Answer · 2017-10-05 18:04:16Z

2

You should use Firebase Functions to make your API calls since you are already using firebase. See here: https://firebase.google.com/docs/functions/use-cases#integrate_with_third-party_services_and_apis

answered Oct 5, 2017 at 18:04

Carlos Henriquez

1265 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I protect my API keys in my React App?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related