/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 vote381 views1 answer
Get height webview from url video react native
Javascript React
6 votes396 views1 answer
Import useHistory react-router-dom version 6
Javascript React
4 votes340 views2 answers
React checking matches in state array
Javascript React
0 vote401 views1 answer
Disable autocomplete in react fields
Javascript React
0 vote366 views2 answers
React date picker disable past dates
Javascript React
0 vote418 views1 answer
Horizontal scrollview in react js
Javascript React
15 votes351 views1 answer
Did you mean to use React.forwardRef()?
Javascript React
36 votes366 views2 answers
How to install react router dom version 5
Javascript React
3 votes354 views2 answers
Autocomplete react jsx attributes vscode
Javascript React
1 vote410 views2 answers
Switch in react
Javascript React