1

I am transitioning a Heroku-hosted ReactJS/NodeJS application to be hosted on Firebase. Because Firebase only handles static pages I need to reconfigure how my private environmental-specific variables for Development, Staging, Production environments are configured. For example before I defined these sorts of variables:

CLIENT_ID=secret_here       
DOMAIN=secret_here    
REDIRECT_URI=secret_here

upon the Heroku environment I was deploying to and now I must set them into firebase functions environments from the Firebase CLI for Dev, Staging and Production.

Firebase has documentation on adding environmental configurations to Firebase Functions such that I can add key/value pairs to be accessed at runtime from within a firebase function:

firebase functions:config:set mySecret.key="CLIENT_ID" mySecret.id="secret_here"

however I am unclear how added configuration variables can be accessed from Firebase-hosted static applications (rather than functions).

Is it as simple as simply referencing the firebase functions library from my application and retrieving the defined key from within my application (like so)?

const functions = require('firebase-functions');
...
functions.config().auth0.CLIENT_ID
TheFastCat
  • 3,134
  • 4
  • 22
  • 32
  • I'm not sure what you're trying to accomplish here. Allowing access to these secret variables from the client is a bad idea, which is why there no SDK that tries to make this easy. And you've already found how to access them from server-side code in Cloud Functions. – Frank van Puffelen Feb 24 '18 at 20:22
  • 1
    On Heroku too you probably had bits of the code that ran on the server, and bits of code that ran in the client/browser. The former type of code should remain running in a server, for example in Cloud Functions. – Frank van Puffelen Feb 24 '18 at 20:23

2 Answers2

1

The variables you define through the link you provided are only available via Cloud Functions. They're not made available directly to the static content served by Firebase Hosting.

If you want, you can make an HTTP function that does nothing but return the JSON from your env vars, and call that from your web content. Bear in mind that you're exposing your secret keys to the world.

Doug Stevenson
  • 297,357
  • 32
  • 422
  • 441
  • Thank you for clarifying. This must be a common situation though right? Static content requiring environmental variables/configuration - how do I solve that using best practices or what am I overlooking? Thank you for your insight. – TheFastCat Feb 24 '18 at 21:00
  • It's not a common question because people are not really excited about exposing their private secrets and keys to the world. It's definitely not a best practice to do this. – Doug Stevenson Feb 24 '18 at 21:02
  • Yes it seems that the best practice way to handle what I am trying to do is move all said application logic that currently resides on the "static content" into firebase functions and access it from there. This is the answer/solution I needed and didn't have the context to realize earlier. thanks - I will update the question. – TheFastCat Feb 24 '18 at 21:04
0

The best practice way to handle what I am trying to do is to refactor all of the application logic requiring environment configuration into firebase functions. I can then invoke said functions to reference environment config and execute the code consuming them. This is the answer/solution I needed and didn't have the context to realize earlier. thanks for edging me towards that realization.

TheFastCat
  • 3,134
  • 4
  • 22
  • 32
  • Couldn't you just build and then serve to Firebase, because you only need the config variables when you're building, presumably. – Colin Ricardo Apr 23 '18 at 09:48