Cloud Build Variables are not getting imported into my React Application

Question

Bare with me as I'm new to a lot of these concepts and my terminology may not be correct.

I have a React application that I have running in a Google App Engine. I've set up a Cloud Build to automatically run whenever I push changes to GitHub. This is all working as expected.

The issue started when I attempted to configure a Firebase DB with the application. I've set up all my Firebase secrets as Substitution Variables within Cloud Build.

Below is my cloudbuild.yaml. In step 0, I'm testing that the variables are being read, and that is working without issue ( I can see the secrets in the Cloud Build Log). The Cloud Build job completes without error, but when I try and connect to the database, it is coming back as undefined.

steps:
  # Print environment variables for debugging
  - name: 'gcr.io/cloud-builders/gcloud'
    entrypoint: 'bash'
    args:
      - '-c'
      - |
        echo "FIREBASE_API_KEY: ${_FIREBASE_API_KEY}"
        echo "FIREBASE_AUTH_DOMAIN: ${_FIREBASE_AUTH_DOMAIN}"
        echo "FIREBASE_PROJECT_ID: ${_FIREBASE_PROJECT_ID}"
        echo "FIREBASE_STORAGE_BUCKET: ${_FIREBASE_STORAGE_BUCKET}"
        echo "FIREBASE_MESSAGING_SENDER_ID: ${_FIREBASE_MESSAGING_SENDER_ID}"
        echo "FIREBASE_APP_ID: ${_FIREBASE_APP_ID}"
  
  - name: "gcr.io/cloud-builders/npm"
    dir: "dev"
    entrypoint: "bash"
    args:
      - "-c"
      - |
        set -e

        # Install dependencies
        npm install

  - name: "gcr.io/cloud-builders/npm"
    dir: "dev"
    entrypoint: "bash"
    env:
      - "FIREBASE_API_KEY=${_FIREBASE_API_KEY}"
      - "FIREBASE_AUTH_DOMAIN=${_FIREBASE_AUTH_DOMAIN}"
      - "FIREBASE_PROJECT_ID=${_FIREBASE_PROJECT_ID}"
      - "FIREBASE_STORAGE_BUCKET=${_FIREBASE_STORAGE_BUCKET}"
      - "FIREBASE_MESSAGING_SENDER_ID=${_FIREBASE_MESSAGING_SENDER_ID}"
      - "FIREBASE_APP_ID=${_FIREBASE_APP_ID}"
    args:
      - "-c"
      - |
        set -e

        # Build the project
        npm run build

  - name: "gcr.io/cloud-builders/gcloud"
    dir: "dev"
    entrypoint: "bash"
    env:
      - "FIREBASE_API_KEY=${_FIREBASE_API_KEY}"
      - "FIREBASE_AUTH_DOMAIN=${_FIREBASE_AUTH_DOMAIN}"
      - "FIREBASE_PROJECT_ID=${_FIREBASE_PROJECT_ID}"
      - "FIREBASE_STORAGE_BUCKET=${_FIREBASE_STORAGE_BUCKET}"
      - "FIREBASE_MESSAGING_SENDER_ID=${_FIREBASE_MESSAGING_SENDER_ID}"
      - "FIREBASE_APP_ID=${_FIREBASE_APP_ID}"
    args:
      - "-c"
      - |
        set -e

        # Source environment variables
        source .env

        # Deploy the app
        gcloud app deploy --project=my-project --appyaml=app.yaml

timeout: "1200s"
options:
  logging: CLOUD_LOGGING_ONLY

substitutions:
  _FIREBASE_API_KEY: ""
  _FIREBASE_AUTH_DOMAIN: ""
  _FIREBASE_PROJECT_ID: ""
  _FIREBASE_STORAGE_BUCKET: ""
  _FIREBASE_MESSAGING_SENDER_ID: ""
  _FIREBASE_APP_ID: ""

Here is the firebaseConfig.js that is configuring the connection.

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.FIREBASE_APP_ID
};

// REMOVE - used for testing connection
console.log('Firebase Config:', {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.FIREBASE_APP_ID
});

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export { db };

The database is then being accessed by counter.js which is just a basic visitor counter.

import { db } from "./firebaseConfig"
import { doc, getDoc, setDoc, updateDoc } from "firebase/firestore"

export async function updateVisitorCount() {
  const visitorCountElement = document.getElementById("visitor-count")
----------SNIP-----------

When accessing the site, I get this in the console output

Object { apiKey: undefined, authDomain: undefined, projectId: undefined, storageBucket: undefined, messagingSenderId: undefined, appId: undefined }
​apiKey: undefined
​appId: undefined
​authDomain: undefined
​messagingSenderId: undefined
​projectId: undefined
​storageBucket: undefined

I've been troubleshooting this for a number of days now. At first I was having issues with cloudbuild.yaml not being able to read the env variables, but now that that's sorted I'm off to the next issue.

I anticipate their are far better ways to accomplish all of this, but I'm still learning and just trying to get it to work at this stage.

Thanks!