/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

15 votes191 views6 answers
React forms
Javascript React
0 vote194 views1 answer
React sub count
Javascript React
1 vote192 views1 answer
How to update version of dependencies reactjs
Javascript React
66 votes174 views6 answers
Routing react
Javascript React
4 votes179 views1 answer
Add array of object to state react
Javascript React
0 vote170 views1 answer
React script syntax for deployment
Javascript React
0 vote184 views1 answer
Filter-vs-map-reactjs-and-jsx
Javascript React
1 vote178 views1 answer
When i go srource in react app in chrome i see my files
Javascript React
0 vote153 views1 answer
Ctx beginpath react
Javascript React
0 vote196 views1 answer
On close tab react native web
Javascript React