Netlify/Create React App secret api keys exposed in build

Question

Building create-react-app (v2) on Netlify hosting and need to deal with secret keys for payment processing and content pulls from CMS (Contentful).

CRA is exposing secret keys in the build output using 'process.env.REACT_APP" and CRA over writes the space and doesn't allow these keys to be hosted in the variable space and access at build time securely.

Is there best practice on the right type of approach to keep the keys secure?

If this is a private repository, it should not be able to expose the private keys to the public. Also you should not be using process.env.REACT_APP_[*] to store private keys that should be exposed only to your build process. Those environment variables are for client side access only. — talves

stefan judis stefan judis · Accepted Answer · 2019-02-07T17:55:42

You have two different cases here. Speaking about Contentful you're probably using the CDA. This API is read-only and has its own tokens. There is no harm by exposing it to the public and your react application with REACT_APP_.

A payment provider is a different story though. For this I'd recommend to using Netlify functions to not expose the token. This way your react application can use the function endpoint and your token stays safe. :)

Netlify/Create React App secret api keys exposed in build

1 Answers