CODEWITHSUNDEEP
reactjs
Mehrdad Masoumi
Mehrdad Masoumi

Reputation: 410

how to hide secret key in react javascript file in build production

We have an important key that we do not want its value to be displayed in the generated JavaScript file in build production.

We have created .env file and this file does not exist in the build version, but when we use this key in the code, it displays its value. We want to display the variable name instead of the value in the taken JavaScript file.

example code:

proccess.env.REACT_APP_HASH_KEY= xxxxxxxxxxxxxx

enter image description here

Upvotes: 0

Views: 997

Answers (1)

Roy.B
Roy.B

Reputation: 2106

TLDR: you can't.

keeping any key in your React client, even if you are using gitignore and an .env file, is not secure and cannot be hidden

A client application running on a browser cannot securely store secrets. in this case, react environment variables are embedded in the build and are publicly accessible

You should really only save API keys or secrets in your backend such as Node / Express.

You can have your client send a request to your backend, which can then make the actual API call with the API key and send the data back to your client.

Upvotes: 1

Related Questions