Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Fetching Data with the Fetch API

Seth Foss
Seth Foss
7,097 Points
Posted by Seth Foss
Seth Foss
7,097 Points

Best practice for sensitive data (API key) in React

I realize this was hardcoded for the sake of focusing on the actual content of the course (data fetching), but in this lesson the API Key for Giphy is hardcoded directly into App.js.

I'm committing many of my Treehouse projects to Git, and I definitely don't want an API Key sitting in my commit history. How does React normally handle this type of data securely?

1 Answer

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

Hi Seth Foss you will have to look at an approach in doing that such as encryption etc. As for a basic git repo such as these projects, you will want to ensure that any sensitive data is gitignored through their respective files, in your case this is your api credentials config.js file (if you are following along with project 7 of the full stack javascript techdegree that is). You can mention in the read me that the application relies on adding your own version of this file as the app relies on it (through it's import statement) in order for it to work properly. This is a best practice for developers to ensure they have a good read me file / their apps work remotely.

Seth Foss
Seth Foss
7,097 Points
Seth Foss
Seth Foss
7,097 Points

A gitignored config file seems like a good solution for a workshop project like this. I found this Stackoverflow post describing a few ways to go about reading in that type of config file: https://stackoverflow.com/questions/30568796/how-to-store-configuration-file-and-read-it-using-react

Thanks!

Update: Specifically for this project, the answer about using .env files for a "Create React App" project is relevant. I created a .env with the variable REACT_APP_GIPHY_API_KEY=123thekey456, and accessed it in my app using process.env.REACT_APP_GIPHY_API_KEY. Apparently ENV variables set this way must be prefixed with REACT_APP_. I put the .env in my .gitignore, and problem solved!