Member-only story
Quick Tutorial: How To Deal With Secret Keys in React Apps
Learn about hiding and using secret keys in React.
I remember the moment when I first learned about dotenv. It’s not something you learn about in normal computer science classes at school, yet something you’ll inevitably need to understand if you’re building any sort of app that interfaces with another service. I was first exposed to all this a long time ago when I was trying to figure out how to properly integrate a web app with Slack.
Simply put, dotenv allows you to both hides and use the secret keys in your app. These are keys that you’ll use in API calls, for example, so that the external service that you’re interacting with knows who you are and what you want. Oftentimes these services give you secret keys that you need to use in order to successfully interact with them.
What do I mean by hiding the keys? Of course, as a developer behind the scenes, you’ll be able to see and edit the keys. What hiding means is that when you upload your code to Github or publish your app to the internet, for example, the keys won’t show up for other folks to see. This is how you avoid the dangerous consequences of exposing your secret keys. This article is focused just on the basics of how to hide and use keys within a React app.
