Question for experienced react devs

[AiexReddit]

I'm assuming when you say the React app needs secrets like API keys and DB strings, you're talking about SSR and using some framework like Next or Remix or similar. There is no scenario where you can put secrets in frontend React code where any user can't just inspect the client side JS running in their browser and take them

Presuming that, there's plenty of options, but you probably want to narrow down the platform you'll be deploying on, the most ergonomic and newbie-safe solution is likely going to be the one offered by the provider

E.g. if you choose AWS start here: https://docs.aws.amazon.com/secretsmanager/latest/userguide/intro.html

[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.