How to secure third party API keys in firebase hosting?

Question

I am using different third party API keys in my reactjs-firestore project. But I can't find a way to secure them in firebase hosting. How can I hide these API keys in firebase hosting?

For example, in Netlify hosting services they provide environment variables feature which can be used to secure the API keys.

that is I can just store the API keys in the variables in netlify and it will be retrieved from there which will be secured.

But in firebase how do I do this?

I can't seem to find a similar setting wherein I can store the keys as environment variables in the hosting services.

if there is no such feature is there another way to secure these API keys?

and for the firebase API keys, I have already read some answers and understood that firebase API keys will not be hidden.

is there at least some way to secure these firebase API keys to just one secured URL at least? (I know that writing security rules is the best approach but am trying to find other options as well).

I can't seem to find a way to secure firebase project API key usage to one secured URL.

I have tried to find ways to secure the API key but I haven't been successful.

below is how I retrieve data in reactjs code

axios.post(`https://data.retrieval.com/1/data?key=API_KEY`,  data)

I am trying to hide the API_KEY in the production code

I want to secure third party API keys in my hosted website. and also restrict my firebase project API key to just one secure URL. am not able to do this now. any suggestions or solutions?

Thank you for trying to help. and thank you for your time

Answer 1

If you're using the API key in client-side code, there is always the chance that a malicious user can find the key and abuse it. The only way to protect against this is to not use the API key in client-side code, or to have a backend system that can protect access based on something else (such as Firebase's server-side security rules).

Since your backend system likely doesn't have such a security model, you'll typically have to wrap their API in your own middleware that you host in a trusted environment such a server you control, or Cloud Functions. That's then where you ensure all access to the API is authorized, for example by setting up your own security system.