How do you access Firebase config variables in React code?

Question

I'm trying to migrate from Netlify to Firebase Hosting. I had all of my.env environment variables working fine in Netlify, but now there seems to be a problem with Firebase, and they disappear after a few minutes of being hosted.

From the docs: https://firebase.google.com/docs/functions/config-env , and from what I can piece together from around Stack, Firebase doesn't like 'environment variables' and instead uses 'config variables'. So I'm trying to implement config variables in place of my.env ones. I have successfully been able to:

Set Variables: firebase functions:config:set someservice.key="THE API KEY" someservice.id="THE CLIENT ID"

Get Variables: firebase functions:config:get

So I know the variables are saved in my app's config variables. What I can't do is access them in my React code in the same way I'd have been able to use, say:

console.log(process.env.REACT_APP_FIREBASE_PROJECT_ID)

When I try to set up in React, similarly to the documentation:

import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';
import 'firebase-functions';
admin.initializeApp();

I get the following error in the browser console:

======== WARNING! ========

firebase-admin appears to have been installed in an unsupported environment.
This package should only be used in server-side or backend Node.js environments,
and should not be used in web browsers or other client-side environments.

Use the Firebase JS SDK for client-side Firebase integrations

Answer 1

I've worked out what the problem was. When I initialised locally with firebase init I had selected an option to update from github automatically. The github repo didn't contain my.env file, which explains why it kept disappearing.

To fix the issue I ran firebase init again and selected 'n' (no) for the automatic github deploys.

The other warnings was because I was reading the documentation intended for back-end servers. Firebase-Functions was not relevant for React, at least in this instance.