How to mask your API key?

Your API key should remain private and to achieve that Git should not track the API key. So today I will talk about two ways for masking API key, suppose you are developing a new app using React.js and have an API key to fetch news.

First one, using the environment variable

1- Create a file called .env in the project directory and define a variable with uppercase.

REACT_APP_NEWS_KEY = 'your_API_key'

2- Ignore .env file by adding its name to .gitignore file. The purpose of .gitignore file is to ensure that certain files not tracked by Git.

# api keys
.env

3- Access API key in your project using process.env.

const API_KEY = process.env.REACT_APP_NEWS_KEY;

const getPosts = async () => {
    try {
      dispatch({ type: 'SEND_REQUEST' });
      const response = await fetch(
        `https://newsapi.org/v2/everything?q=javascript&apiKey=${API_KEY}`
      );
      const data = await response.json();
      dispatch({ type: 'REQUEST_FINISH' });
      dispatch({ type: 'SET_POSTS', payload: data });
    } catch (err) {
      console.log(err);
    }
  };

Important Note: After creating the environment variable you have to restart your server to avoid getting your API key is invalid, you will receive a 401 - Unauthorized HTTP error.

Second one, using named export

1- Create a folder in src folder called config and inside it create a js file called config.js

const reactNewKey = 'your_API_key';

export { reactNewKey };

2- Ignore config.js file by adding its path in .gitignore file

src/config/config.js

3- Acess API key in your project by importing it

import { reactNewKey } from 'path_of_your_file'

Thanks for reading! I hope this article helps, feel free to share it with your friends, any feedback will be appreciated :)