Hi, I’m building a ReactJS app that calls the OpenAI API.
Since React is frontend-only, if I put the API key in the code, it will be visible in the browser or network tab.
Is there any safe way to hide the API key without creating my own backend or any other solutions?
Simply: you must NEVER have a client make direct calls to OpenAI. Not putting an API key in code, not putting an API key in memory, not putting an API key over the wire. Otherwise you are providing essentially your bank account password for all the snooping someone wants, to then make whatever unmoderated calls will empty your account balance and get it banned for safety violations.
You’ll need to make a customer proxy.
Hi!
Since this is a question that has been asked very frequently over the years there is a dedicated help page guiding developers into the right direction.
https://help.openai.com/en/articles/5112595-best-practices-for-api-key-safety
You should definitely take a look!
Try redwoodsdk, pure typescript/ react server components built on top of vite and cloudflare. Full stack in the true sense of the word you don’t need an external server, simply store your key in your workers secrets and call a server component via an env variable.