Search code examples
firebaseconfigcreate-react-app

Expose firebase functions config to create-react-app?


I'm using two firebase projects: one for development and staging, and another for production. The Firebase CLI allows me to switch projects with firebase use _____.

For the client I'm using create-react-app and implicitly configuring firebase by using the From Hosting URLs.

The trouble comes with configuring each project's connection to third party services. For most services I have separate accounts, so need different keys (and secrets on the server), for development and production.

For firebase functions, I can use functions config vars for each project. Pretty easy.

But what's the best way to do this on the client?

create-react-app has great support for various .env files, but can I link a .env file to a firebase project rather than using their prioritization?

Or is there a way to expose the firebase functions config vars to create-react-app's start, build, and test processes as environment variables? (preferably without building all variables into the public js :-P)

What's the best way to do this?


Solution

  • The best way to do this seems to be to use GCP secret manager :

    Secret Manager stores API keys, passwords, certificates, and other sensitive data. It provides convenience while improving security

    https://cloud.google.com/secret-manager/docs/quickstart

    Beware, it's a standalone service by GCP, therefore Google charges you to store your API keys. The pricing calculation example they detail, so i'm guessing it's a typical use case, gives a monthly cost of $15.15.

    That's not cheap to store dumb API keys.

    The other way is to use cloud functions as you did.

    The benefits of using GCP SM are that the service can be combined with audit logs, that it has a version management feature, and that you can set permission levels.