I recently developed a form authentication application that required an API key in order for users to gain access to the backend. It was suggested that I keep my API key in a dotenv file. I went ahead and completed this because I had never previously stored my API key in a dotenv file. I looked up how to do this on the internet and found a solution, but when I tried it, it gave me errors. I thought I was crazy until I realized it was an error because the application I built was a Vite + React application, not just a React application created with CRA.

You will no longer be frustrated if you follow this tutorial.

What are environment variables?

Environment variables are key-value pairs used to store and transfer data between programs. They are typically used to store sensitive information such as API keys, and they can be easily accessed from within your code. They can be kept in a separate file, similar to the dotenv file. Environment variables include "NODE ENV", "API KEY", and "DATABASE URL".

Why do we need to store API keys?

You may be wondering why there is a need to hide or store your API keys, and why it is best practice not to use them directly in your code. It all depends on the information to which your API key provides access. Why use your API key carelessly in your code if it gives you access to something you don't want others to have?

Storing and using API keys in a dotenv file

A dotenv package is an excellent tool for keeping API keys, passwords, and other sensitive information out of your code. It allows you to create environment variables rather than include them directly in your code. The first step would be to add a ".env" file to the root of your project. This should look something like this:

Following that, we would add the API key and any other sensitive information to the newly created ".env" file. This code should be in the ".env" file:

VITE_API_KEY="your_api_key_should_be_here"

The API's name is "VITE_API_KEY," and that's what we'll use in our code. We used "VITE_API_KEY" instead of "REACT_API_KEY" because the React application was built with Vite rather than CRA. So be careful not to mix them.

Go to your "App.jsx" file or any other file you want to use and "console.log" it to see if you can now access your API key. If the "console" does not display your API key after saving the file and refreshing the page, try restarting the react server. Remove your API key after you've seen it in your console.

  console.log(import.meta.env.VITE_API_KEY)

You'll notice that "import.meta.env" rather than "process.env" was used. This is because the application we're working with was built with Vite rather than the standard "create-react-app" command. If you use "process.env", it will throw a reference error that says "process is not defined". The property "import.meta.env" is available in JavaScript modules. It gives you access to the environment variables.

To use the ".env" variable in your code, do this:

const apiKey = import.meta.env.VITE_API_KEY

The variable "apiKey" can now be used anywhere in your code. The final step is to add the ".env" file to gitignore. This prevents your ".env" file from being committed to your GitHub repository. You should include the ".env" file as follows:

*.env

Conclusion

Storing and utilizing API keys in a ".env" file can be a convenient and secure method of managing sensitive information in your project. By storing your API keys in a ".env" file, you can keep them separate from your codebase and avoid accidentally checking them into version control.