/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 vote411 views1 answer
Take site to top after clicking in react
Javascript React
3 votes361 views1 answer
UseNav react router
Javascript React
1 vote391 views1 answer
Add value to state array react native dispatch
Javascript React
0 vote433 views1 answer
React native center text vertically full screen
Javascript React
0 vote370 views1 answer
React native shadow maker
Javascript React
1 vote369 views1 answer
React-router-dom v6 redirect
Javascript React
0 vote367 views1 answer
How to display a calender in react native
Javascript React
4 votes402 views2 answers
How to find out which version of React
Javascript React
0 vote344 views1 answer
React conditional if localhost
Javascript React
0 vote384 views1 answer
React native update helper
Javascript React