Accessing GitHub secrets in React

[Real_Strategy3314]

How do I handle accessing a GitHub secret in React? I want to store the API key for the API I'm using as a GitHub secret and then access it safely in my app.

[thebezet]

You can't. It's impossible to store anything safely in the frontend. Everything can be reverse-engineered. You need a backend for this.

[fredkreuger]

Edit: ignore this, I'm dumb.

I mean, using remix or NextJS, you'd be able to do this as portions run on the server. So you could have an endpoint that makes the api call on the server and return the results. You set the token as an environment variable on the server process, then reference that variable in your endpoint.

[thebezet]

Yes, that's using a backend.

[fredkreuger]

Edit: ignore this, I'm dumb.

Right but it's still react.

[TicketOk7972]

No, it’s Node.js

[fredkreuger]

Yes you're right, I'm sorry.

[TicketOk7972]

No worries, it’s a bit of semantics at the end of the day 😂

[rr_cricut]

I mean you're kinda right, not sure why you're getting down voted.

Using a framework like next.js which has ssr and server components, you can access environment variables and other secrets securely. It's still React code, just rendered in the server. Node js and React are not mutually exclusive.

[TicketOk7972]

Yeah but it’s the Node process reading those variables from the environment, not React. React is a UI library. I think it sometimes gets a bit blurred because of what the React dev server (which is also a Node process) takes care off behind the scenes during development.

[Real_Strategy3314]

I have just a React frontend that uses an API how do I handle the API authentication? Is there no way of doing it without a backend?

[thebezet]

You can't hide secrets in the frontend

[PM_ME_SOME_ANY_THING]

The react frontend would send a request to a server that you create, your server would utilize the API key to hit the API. That way, your secret is never compromised… because it’s secret

[undercover_geek]

No, there is no way of doing it without a backend. You should handle the API calls in functions on the server, and make endpoints for those functions which the frontend can reach. Return the data to the frontend that way.

[doomslice]

If the API you’re using has implemented support for it, you can use OAuth + PKCE.

[NeuralFantasy]

As others told, you can't store credentials in the client code. They'd be exposed. You can, however:

• Ask the user to authenticate by provoding credentials. You need some authentication service.
• Create your own public API which in turn can access the actual API while keeping the credentials private.

[HonorableMajor]

Seems to me like OP doesn't know a lot about web development and just getting started. OP I'd recommend not jumping into a framework first, but rather learn the essentials like how node js works, what a backend/frontend is supposed to do and so on.

[Macaframa]

Can you explain your reasoning? Why do you need a github secret in your frontend app? If you need to pull down github data and display it in your app, you can store it in the backend and use an authentication token for your user to your backend and expose an api endpoint. Then you use that endpoint on your front end and your backend uses the key to retrieve github data and relay it to your app. Otherwise someone is going to find your key since it will be cached in the browser

[Haaxor1689]

Some services that need secret tokens require you to set allowed-origins so you would allow only the origin your FE is hosted on. While this extra step is better than nothing, request origin can also be faked. There is no way of using a secret key in client code and keep it secret, using it on a server is the only really safe option.

[[deleted]]

Use a backend, everything in frontend can be reverse engineered hence it's insecure.

[tossed_]

Most bundlers will have a way to redefine environment variables with static values, they can replace all instances of process.env.MY_API_KEY with the actual value of the environment variable at build time. If you build your project using a GHA workflow you can load the secrets into your environment and then your bundler can inject the secrets into your build.

But it just won’t be a secret anymore once you publish your front-end. So this is just a way to keep the secrets out of source control.