Dynamically set api keys on frontend

Question

Is there any way to set the variables for api keys on the front end. I am used to setting ENV variables on the backend, but is there something similar on the front end?

Answer 1

I'm assuming you're asking whether you can set an API key on the client-side, i.e., in JavaScript. You probably can in some scenarios, but in my opinion you shouldn't.

By its nature, data that you send to the client-side for processing (e.g., JavaScript, HTML, and CSS) can (and must) be read by that browser. In order to set an API key and send a request to an API from the client-side (assuming you've already worked around the same-origin policy), you'll have to send that API key over the wire and allow the browser to read it -- which is bad.

The API key identifies and authenticates you, and there can be damaging consequences if a stranger gets a hold of it. I would keep it on the server-side and make your API requests from there.