Hello All,
I’m doing some react portfolio work and wanted to rehash the Weather App a little bit.
I’d like to deploy it on Firebase when all is said and done. I turned to the Weather App I did for FCC back a couple of years ago and noticed that it doesn’t contain an API key and the API used is meant for FCC projects. However, other free APIs require an API key.
I would think that the API key should be interjected server-side somehow using environment variables, but none of that makes sense when talking about a front-end react app that just needs to make some ajax calls. I know Firebase can handle the environment variables, but I’m lost after that.
I imagine the latter is outside of the scope of what that project is meant for, but has anyone tried to secure the API key?
Anything you deploy thru Firebase hosting is essentially public, your just as safe hard-coding the variable into your React code somewhere.
The “correct” way to protect your secret when using Firebase is using Firebase functions (which are essentially google cloud functions+Firebase apis). You will make a request to the weather API from this micro-service and return the data to your client React code. This way your Firebase function will have the API key, but no one has access to your server code, and thus no one can see/take/use your API key.
Now I should mention the scope of the project does not include any of this, so you will be going out of your way to properly secure your project. The goal of the project is just being able to call and display the data. The rest of the stuff I talked about is extra stuff you’d consider for a real world project.
If you wanted to learn all this, awesome. It’s not hard and a great learning experience
Ah so Firebase can provide backend functions like that. I had only gotten to the hosting/db stuff with it. That’s pretty cool! Thank you very much. I do wish the FCC project touched on that a little bit though. I’ve seen a lot of tutorials about how to do that project that include sending the API key (if not using the FCC weather api) straight from the app. Obviously, for a demo project it’s not a big deal but I think properly securing things would show an aptitude for understanding the bigger picture.
Firebase functions aren’t specific or exclusive to Firebase, they are essentially google cloud functions, which is google’s “server-less micro-service” offering. You could build an entire back end without a server using these things. There are plenty of pros and cons to this approach, but thats a story for another day haha.
Now its possible FCC could teach these things, but since its more operations specific, and definitely platform specific, since the setup/apis/info for google clouds functions are totally different than amazons, you would have to make it too generic or platform specific. It could be something that the guides could touch on, but it would be pretty tough to teach and integrate.
