How do hide secret key information in React application
The application makes API calls which API calls need secret keys. These keys are not committed to the code repository.
This tutorial covers how to hide the secret keys hiding in React applications created with the create-react-app command.
For example, If you are creating react Twilio plugin, you need secret keys such as ACCOUNT_SID and AUTH_TOKEN details.
For example, React application is created with the create-react-app command.
Hide API key details in react application
first, install the latest dotenv npm library using the npm command
npm install dotenv
Create a .env file in the application root directory
Next, add the .env file to the
.gitignore file that is not committed to the git repository.
Once you created the env file and added API key details, you can access the using process.env file. process.env is a process object for accessing environment variables.
In react components you can access the API keys as seen below.
Hide API key information with the create-react-app command
In this dotenv npm, dependency is not required, As the create-react-app tool handles the adding environment files differently.
Assume the application is created with the
create-react-app CLI command.
At the root of the project, Create a
each key is appended with REACTAPP_notation for creating a key, if you don’t add REACT_APP to keys, It returns empty while accessing in react components.
Access the key using the process.env object.
Finally, You can add the .env file to the .gitignore file to ignore the file while committing changes.
Hiding API key details can be achieved with the .env file which is not committed to the git repository.