How do I hide API key in create-react-app?

reactjs api github create-react-app api-key
E. Choi picture E. Choi · Feb 9, 2018 · Viewed 69.5k times · Source

I made a weather app in create-react-app. How do I hide the API key so that I can commit to GitHub?

Right now the key is in App.js: const API_KEY = "123456";

Answer

Antonia Blair picture Antonia Blair · Jul 19, 2019

Unfortunately, keeping any key in your React client, even if you are using gitignore and an .env file, is not secure. As pointed out by @ClaudiuCreanga, React environment variables are embedded in the build and are publicly accessible.

You should really only save API keys or secrets in your backend such as Node / Express. You can have your client send a request to your backend API, which can then make the actual API call with the API key and send the data back to your client.

Related questions

Proxy in package.json not affecting fetch request

I am trying to fetch some data from the development server using React. I am running the client on localhost:3001 and the backend on port 3000. The fetch request : const laina = fetch('/api/users'); laina.then((err,res) => { console.…

Read More
React frontend and REST API, CSRF

Using React on the frontend with a RESTful API as backend and authorisation by JWT, how do we handle sessions? For example after login, I get a JWT token from REST. If I save it to localStorage I am vulnerable …

Read More
How to retrieve a list of all market pairs like ETH/BTC using Binance API?

I am working on a project relevant to crypto trading where I need to select a market pair of Binance Exchange and based on the pair choice I have to show various results like current price, 24 Hr price change, 24 Hr …

Read More