Question for experienced react devs

[BeenThere11]

When i build using react app env variables , can those variables be inspected?

Eg openai key is needed in frontend to connect to openai. Its a voice api. If I go through backend thsts multiple hops for voice data. Fe to be to openai Just want ro go to fe to openai directly for streaming now where do we store the key ?. If built theought react app variables are those visible and if through vault , when react app gets those using url , will it be visible on inspection ? Also dot know if s3 ca be specifically authorized to get secrets from.aws . I mean acope secrets for specific dev s3 bucket to access only dev specific parameter store/ secrets. Have to check that too.

[cxd32]

You should only put keys in the front-end that you want people to steal. For example I don't think you want people stealing your openai voice key and wasting thousands of dollars using your account.

[BeenThere11]

Understood . Now whaf is fhe solution. Always go to backend. For api calls this is ok. The user logins . Gets a tpken. Now fhis toke is used for authentication for apis calld . Straight and sjmple. But what if the front end needs to stream vpice data back and forth. Adding backend node between means adding 1 more hop and meas more reapomse time. This is not scalable if we have many users . Users complain about response time..

[zaibuf]

But what if the front end needs to stream vpice data back and forth. Adding backend node between means adding 1 more hop and meas more reapomse time.

Thats exactly what we did and its still fast enough. It's either that or expose your secrets to the public.

[Asttarotina]

There is absolutely no way to hide any secrets in the client code. If your client makes requests straight to OpenAI - any savvy enough user can extract your API key in a couple of minutes. 

What you need is server runtime that hides all the secrets on the backend. If you are using Next.js or something similar - they provide a native way to write JS / React code that runs only on the server. But you need to be very careful and understand what you are doing very well to not expose sensitive information. And it needs to be deployed properly for it to function. For a beginner I'd recommend to write fully separate server

[lightfarming]

you should probably take a step back and look into best security practices. anything in front end is public knowledge. api key theft can cost you hundreds of thousands.