React: Hide env variable in production build

[anik587]

Hey, I am a bit of confused about env variables in the production build. Simply i have a .env file which contains some variables like

REACT_APP_ALG=A128CBC-HS256
REACT_APP_K=RvIm6UTHG0wqXWLvkSmRqQhS97NvW_IwYw0CKYhEF_0

and accessing then in code like

            "alg": process.env.REACT_APP_ALG,
            "k": process.env.REACT_APP_K

But when I build my project then in bundle files i found some like

                        alg: "A128CBC-HS256",
                        k: "RvIm6UTHG0wqXWLvkSmRqQhS97NvW_IwYw0CKYhEF_0"

which is a security issue for me. Is there any way to hide them I'm well aware about that it's not a bug it's just I could not find any suitable solutions

[vkurchatkin]

1. This is not related to React in any way
2. No, there is no way. If this value is secret, don't use it in your frontend code

[anik587]

I know it's not related to react but I had to ask, and I have no other options cause I'm encrypting my payload so encryption key must be in the front end right ?? Just need a solution to make them unreadable

[rovansteen]

Everything you send down to the client is "public" so there is no way to decrypt without exposing the key in that environment. I would rethink the reason why you would need to do this in the first place.

[herecydev]

If you want your payload to be encrypted between the client and some other location you probably want to look into TLS instead. Trying to have a key that you have to pass to the client that you don't want them to "see" is just a contradiction; it's simply not possible.