GitHub continuous deployment to Firebase hosting and env variables - firebase

Question

I am currently working on a React application with Firebase initialised. I am initialising my React App with Firebase by doing the following:
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'
const app = firebase.initializeApp({
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_FIREBASE_APP_ID
})
const db = firebase.firestore()
export { db, app }
For obvious reasons, I do not want to push my env file to GitHub. But if I do not, my application build fails. I am wondering how I can configure GitHub to house my env variables and for my production build to use the GitHub env variables. I have attempted to set up a GitHub build workflow, which contains the env variables, but my build still seems to fail.
On a separate note, I am curious how much of a security risk it is for my Firebase config to be exposed. I read if my application is using an email/password sign-in method, I should protect these variables. Any advice, suggestions, critiques would be much appreciated.

Answer 1

Just use GitHub Actions with secrets and echo with the runner:
- name: 🗄️ Provide credentials
id: firebase-credentials
run: echo 'const app = firebase.initializeApp({apiKey: "${{ secrets.FIREBASE_API_KEY }}", ... })' > ./some.js

Answer 2

You can use Firebase Cloud Functions and set an environment variable in the terminal:
firebase functions:config:set someservice.key="API KEY" someservice.id="CLIENT ID"
For example, to set up the Cloud Function for Firebase:
firebase init functions
npm install --save firebase-functions#latest
npm install -g firebase-tools
You can then access the variables from a function:
const functions = require('firebase-functions');
const request = require('request-promise');
exports.userCreated = functions.database.ref('/users/{id}').onWrite(event => {
let email = event.data.child('email').val();
return request({
url: 'https://someservice.com/api/some/call',
headers: {
'X-Client-ID': functions.config().someservice.id,
'Authorization': `Bearer ${functions.config().someservice.key}`
},
body: {email: email}
});
});