Securing Your API Keys in Frontend Projects

When you write your frontend code and commit it to your repository, using Git repositories to store sensitive information related to your projects can be a costly security mistake.

For example, attaching your API keys to your GitHub repository can cause your app to experience a DDOS (Distributed Denial of Service) attack by receiving a flood of requests.

This issue is not just limited to API keys but also includes other sensitive pieces of information like database credentials, secret access tokens, and so on.

So, this is happening on public Git repositories because everyone on the internet can access them. But what about the private ones? Why is that an issue?

Private Git repositories hosted on services such as GitHub, GitLab, and Bitbucket are exposed to a different type of risk. When you integrate a third-party application with one of these services, you may be opening your private repositories to those third parties. These applications can access your private repositories and read the information contained within.

While that alone doesn’t create a risk, imagine if one of those applications becomes vulnerable to attackers. By gaining unauthorized access to one of those third-party applications, attackers might access your sensitive data, including API keys and secrets.

So what is the solution?

There are multiple solutions for securely storing API keys and secrets. We will use “Environment variables” to hide the keys.

How to do it?

Here are the steps:

Create a new file named .env in your project's root folder.
Write all the sensitive information here.
Example .env file:

Notice that in my case, the variable name starts with the **VITE **prefix (because I made my Vue.js project with Vite). You may need to start with **REACT_APP **or another prefix based on how you created the project.
Make sure you are using the correct prefix, otherwise your project will not recognize the variables.

There is a way to change the prefix. If you are using Vite, you can change the prefix inside your vite.config.js file:

envPrefix: 'VITE',

That is how you create your .env file and store environment variables. We will later use them in other files using import.meta.env:

const url = import.meta.env.VITE_TODOS_API_KEY;
axios.defaults.baseURL = url;

Now, we will add the .env file to .gitignore to prevent committing it to the Git repository.

That’s it, now your keys are hidden and safe!

You might be wondering, as I did when I first learned about this technique:

How will you deploy your project if you don’t commit the .env file?

The answer is simple: most deployment services provide a way to configure environment variables. For instance, AWS allows you to enter all the environment variables for your applications using services like AWS Elastic Beanstalk, AWS Lambda, or AWS EC2, with options to edit them as needed.

Conclusion

Thank you for reading the article. I hope it provided you with valuable insights and knowledge. By implementing these practices, you can significantly reduce the risk of exposing your API keys and protect your application from potential security threats. Always remember to keep your keys secure and monitor for any unauthorized access.