Accessing env secrets in a simple React app

Code Help
1

Question:
I have a simple React app where I’m trying to make a restful http call to an API with an env key. However, when I try and access it, I get a ReferenceError: process is not defined. Can I call process.env with a simple front end React app in replit?


Repl link: https://replit.com/@glockstock/GlockeTraveller

export default function App() {
  // key handling
  const OPEN_AI_ENV = process.env.OPEN_AI_KEY;
  console.log(OPEN_AI_ENV);

  return (<main>Test</main>)
}
2

Hey @glockstock welcome to the forums!

I would recommend making sure that the key is spelled correctly. And remember it is case-sensitive.

3

I validated the case and spelling, and ‘OPEN_AI_KEY’ is correct. The error I get seems to be failing on retrieving process.env.

4

As far as I understand, this is happening on the front-end. This means that you are using JavaScript NOT NodeJS and I believe process is a NodeJS variable.

1 Like
5

I see. So given that I’ve built a FE only app at this point, where does Replit store this env key when I add it via the “Secrets” tool? And how can I alternatively retrieve it? (Replit recommends using process.env, but it must think I’m in a nodejs app instead of a React app. Strange, as this is a simple app created from their React template…)

6

As far as I’m aware, secrets are not properly available for the front-end, because anything front-end can be seen via the browser developer tools so no secret would actually be secret on the front-end. Secrets are intended for backend use.

7

Could you make a webserver where you make an API call (requires key) to return data based on a secret?

2 Likes
8

That would probably work :+1:

9

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.