2

How do I hide an API's secret access tokens in a production build of an app created with create-react-app?

I've visited this question but it does not have an acceptable answer to my question. I do not want to use process.env.REACT_APP_SECRET_VALUE in my app as this variable would be exposed in the client-side javascript.

Given that the production build of a create-react-app app is composed of static files only, the only solution I can think of involves only using APIs that use a combination of public client IDs and some form of backend client whitelisting, IP or otherwise.

Am I missing something here?

Daryl Wright
  • 81
  • 1
  • 8

2 Answers2

1

Like you already mentioned, you can request an api backend that only returns your secret if it's whitelisted IP.
But still can you be a litle more specific what are you trying to achieve, just guessing but maybe you need to look at direction of some authentication first so after that the user on the client side would be able to do something (see secret).

  • 1
    I'm intending to consume web services in React applications created and built with `create-react-app`. I want to accomplish this without exposing sensitive information to the client-facing app. Two issues here. First, it's integrating web services under my control. This is easy since I could implement whitelisting logic in backend apps. Second issue is integrating third-party web services that need secret tokens for access. This issue is more troubling, but one possible solution I see is wrapping the third-party service in a custom app which forwards requests and encapsulates secrets. – Daryl Wright Mar 18 '19 at 01:40
  • Yes, you can "wrap" your `secret-token` on your backend which will actually serve as a proxy. Client side will not be able to se actual value of your secret-token, but still data excess that this token protects is going to be still exposed through the new endpoint (which you are proxying). –  Mar 18 '19 at 15:45
-1

You're on the right track. If you're unwilling/unable to expose keys for services you're using, you may need to create an endpoint on a server somewhere that you call and have that endpoint proxy the relevant API request. Amazon's API gateway could probably handle this for you.

https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-api-usage-plans.html

imjared
  • 19,492
  • 4
  • 49
  • 72
  • The Amazon route seems viable for a project at scale, but overkill for a simple project. However, it is along the same lines as my earlier comment about encapsulating the secrets and forwarding the requests. While this strategy is unnecessary for an app that lives in the backend, it's critical for those that live in the client machine. – Daryl Wright Mar 18 '19 at 01:50