Stop pushing your React API Key on GitHub 😪

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 [email protected] 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.

Categories: