This content originally appeared on DEV Community and was authored by Mansour Mahamat
Have you ever create an application with React, in this application you use external API’s and you pushed these API keys on GitHub ?
Oh no bad practice now everybody can use your API key.
We will see how we can avoid this and hide your API’s keys on Github, you need .env file.
How to setup .env file inside React app ?
You don’t need to install env package, this feature is available with react-scripts@0.2.3 and higher.
Make a file called .env in your project root
Inside the env file, add your variables and API keys value like this :
REACT_APP_GITHUB_API_KEY=Hello world 12345
REACT_APP_MOOVIE_API=0123456789
You should prefix all your variables name by REACT_APP if not it will be ignored
Now you need to restart your React server with npm start to access these variables
Inside your React application, you can now access these variables in using this syntax :
{process.env.REACT_APP_GITHUB_API_KEY}
{process.env.REACT_APP_MOOVIE_API}
Now you have zero excuse to push your API key in your React application.
Here you have the React documentation about using environment variables
This content originally appeared on DEV Community and was authored by Mansour Mahamat
Mansour Mahamat | Sciencx (2021-12-03T07:48:07+00:00) Stop pushing your React API Key on GitHub 😪. Retrieved from https://www.scien.cx/2021/12/03/stop-pushing-your-react-api-key-on-github-%f0%9f%98%aa/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.