0

I have a React+NextJS project that I want to add an image-upload capabilities (to firebase storage) to.

In order to upload an image, I must initialize the uploader with my ApiKey. However, obviously I don't want my ApiKey to be exposed on the client.

I've googled it and saw that the recommendations are to keep it in an environment variable. But as I understand it, it protects only from the source control, but not from the actual exposure in the client browser (which is the one uploading the file to firebase).

My gut tells me it's code that should reside on the server, or maybe get a "one-time link" from the server and have the client app upload the image to it. But I can't help thinking that there must be a common (or at least best-practices) way of doing it?

I appreciate the help.

Yaron.

Doug Stevenson
  • 297,357
  • 32
  • 422
  • 441
Yaron Adler
  • 492
  • 1
  • 5
  • 15
  • 2
    Are you referring to the api keys that typically look like: `let config = { apiKey: '', authDomain: '', databaseURL: '', storageBucket: ''};`? If so, those are designed to be public. See this question: https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public/37484053#37484053 – Nicholas Tower Dec 23 '21 at 23:30
  • 2
    "obviously I don't want my ApiKey to be exposed on the client" That depends on the type of API key you are talking about, as most of the *configuration* data that you specify for your project in Firebase is not considered a type of credential. For more on this, see https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public – Frank van Puffelen Dec 24 '21 at 00:55
  • 1
    @FrankvanPuffelen and Nicholas Tower Wow, you've opened my eyes. I was used to every ApiKey being secret credentials that I haven't even thought about checking if it was actually a secret. I understand now. Thank you very much! – Yaron Adler Dec 24 '21 at 08:02

0 Answers0