/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

0 vote224 views1 answer
Onclick inline function react
Javascript React
3 votes201 views2 answers
React router hooks
Javascript React
0 vote209 views1 answer
Header logo react native img
Javascript React
0 vote256 views1 answer
OAuth with axios react native
Javascript React
1 vote205 views1 answer
React emoji picker
Javascript React
9 votes231 views3 answers
Disable yellow box react native
Javascript React
0 vote210 views1 answer
React modal scroll 2 overlapping components
Javascript React
0 vote202 views1 answer
Which react-bootstrap component you will use for width: 100% across all viewport and device sizes
Javascript React
0 vote205 views1 answer
React native navigation paramlist never used
Javascript React
0 vote190 views1 answer
React-native how to get size of screen
Javascript React