How to Secure Keys in Reactjs?

3 min readJun 30, 2020

When we go out of our home we always keep your keys secure so as to prevent any theft so how can we forget to secure our web application.

In every web application we are having secret keys which might belong to SSL certificate, hashing a password or for any payment service, we need to secure these key from end user or any other person or hacker which might attack in our system and can make huge loss.

Developer often make mistakes but this type of mistakes should be avoided. They often uses these key directly hard coded in their codebase which can be accessed by any developer which could be security theft. So the question is how we can secure these key in any web application ? I will walk you through the process of keeping secret keys into environment variable.

NOTE: “This process will be similar for any language or framework”

How?

When you create a react application using command create-react-app that includes a npm package dotenv which allows our web application to access environment variable from the process object (every program in execution is a process and each process is associated with some variables) which includes environment variable contains information related to the environment such as development, production etc.

Steps -

Create react application -

If you already created move to next step if not than first create react application by using “create-react-app” command than you may have got this kind of folder structure.

2. Create “.env” file in src folder -

Note that the file name must be same and “never include this file in your code repository” only keep this file to your development server.

3. Include Variable - Before including your secret keys and other variables in this file use this naming convention for environment variable given below :-

In case of react prefix every variable with “ REACT_APP_ ”,
The variable name should be in upper case,
Variable name cannot have space, can contain underscore,
Values can be of any type, which will always be returned one string,
There may be a key with no value, which returns an empty string.

.env file

In case of express backend - You need to include this package in index.js file.

require('dotenv').config()

4. How To use these Variable -

To access these variable we use process object as I mentioned these variables are associated with process object. You can access by accessing process object than environment object (env) which includes environment variable “process.env.VARIABLE_NAME”

Accessing environment variable

Note : In the same way you can access in NodeJS.

Some Good Practices

Since it is mostly sensitive information, it is important that this data is only in your development environment, so if you intend to share your code remember to remove this file.

If you use github just add it to .gitignore the file .env and it will do the job for you.

A good practice is also to create an sample file with the keys that your project is using, without the sensitive values, so whoever clones your repository or has access to its source will not be lost.

Create file with name .env.sample by only keeping generic information without explicit secret keys.

If not working - Try to restart your server.

Concluding

I hope you enjoyed these tips that are surely going to secure your application.

About Me!

I am Harsh Digwani, JavaScript and MERN stack developer. You can connect with me on LinkedIn.

Thanks for Reading…

Don’t forget to share it with your friends and any doubt leaves the response down there.