/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

10 votes359 views2 answers
React-native text overflow ellipsis
Javascript React
0 vote331 views1 answer
Metro server not running react native
Javascript React
3 votes341 views2 answers
Link react
Javascript React
32 votes352 views5 answers
React disable eslint errors
Javascript React
3 votes333 views2 answers
Autocomplete react jsx attributes vscode
Javascript React
0 vote347 views1 answer
Trash alternate outline icon not coming to right side react
Javascript React
1 vote336 views2 answers
Edit todo list react-redux
Javascript React
0 vote352 views1 answer
React-big-calendar styling
Javascript React
0 vote361 views1 answer
21:216 Error: Unknown property 'crossorigin' found, use 'crossOrigin' instead react/no-unknown-property
Javascript React
4 votes365 views1 answer
Open a new tab when clicking on a link react
Javascript React