/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

1 vote248 views1 answer
How to set limit in map in react hook
Javascript React
0 vote286 views1 answer
React native float upto 2 digits
Javascript React
1 vote242 views1 answer
How to store array into react-native local storage
Javascript React
0 vote287 views2 answers
Reactjs firebase timestamp to date
Javascript React
0 vote220 views1 answer
Create-react-app height issues with flex
Javascript React
0 vote252 views1 answer
Botão delete no reactjs com class component
Javascript React
3 votes261 views3 answers
How to remove global react-native-cli package
Javascript React
0 vote261 views1 answer
_40 0 _55 null _65 0 _72 null react native fetch
Javascript React
0 vote236 views1 answer
CocoaPods could not find compatible versions for pod "React/Core": In Podfile: react-native-fetch-blob (from `../node_modules/react-native-fetch-blob`) was resolved to 0.10.6, which depends on React/Cor
Javascript React
13 votes192 views1 answer
ReactDOM is not defined
Javascript React