/Javascript/React/How to hide api key in react

How to hide api key in react

Hide urls in .env in react app

WARNING: Do not store any secrets (such as private API keys) in your React app!

Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.

outside our src folder create .env file and add it to gitignore
REACT_APP_WEATHER_API_KEY=123456
inside where you want to access the variable 
const API_KEY = process.env.REACT_APP_WEATHER_API_KEY;

make sure to restart the server

Source: stackoverflow.com

How to hide api key in react

// .env

REACT_APP_API_KEY=your_api_key  <-- yes
API_KEY=your_api_key            <-- no

// Example (from 이준형's response):
REACT_APP_WEATHER_API_KEY=123456

Source: stackoverflow.com

Similar codes

8 votes239 views1 answer
React-fragment
Javascript React
1 vote259 views1 answer
Android resource linking failed react native image crop picker
Javascript React
23 votes219 views6 answers
Map react
Javascript React
0 vote228 views1 answer
React select remove the loading indicator
Javascript React
0 vote234 views1 answer
Make image circle css react
Javascript React
2 votes237 views2 answers
React Hook Form
Javascript React
4 votes249 views2 answers
Import reactdom
Javascript React
4 votes243 views1 answer
How to empty form after submit react
Javascript React
2 votes304 views1 answer
React router 6 navigate
Javascript React
22 votes256 views4 answers
Copy text to clipboard reactjs
Javascript React