How to pass secrets using Cloud Run, Next.js and Firebase Auth in google cloud. FirebaseError: Firebase: Error (authinvalid-api-

I'm struggling to get my next.JS app running with Firebase auth in cloud run.

cloudbuild.yml file

steps:
  # Build frontend Docker image
  - name: 'gcr.io/cloud-builders/docker'
    args:
      - 'build'
      - '-t'
      - 'europe-west2-docker.pkg.dev/$PROJECT_ID/cloud-run-source-deploy/frontend:$COMMIT_SHA'
      - 'service-name'
  # Push frontend image to container registry
  - name: 'gcr.io/cloud-builders/docker'
    args:
      - 'push'
      - 'europe-west2-docker.pkg.dev/$PROJECT_ID/cloud-run-source-deploy/frontend:$COMMIT_SHA'
  # Deploy frontend to Cloud Run
  - name: 'gcr.io/cloud-builders/gcloud'
    args:
      - 'run'
      - 'deploy'
      - 'service-name'
      - '--image'
      - 'europe-west2-docker.pkg.dev/$PROJECT_ID/cloud-run-source-deploy/frontend:$COMMIT_SHA'
      - '--platform'
      - 'managed'
      - '--region'
      - 'europe-west2'  
      - '--set-secrets'
      - 'NEXT_PUBLIC_FIREBASE_API_KEY=uat-firebase-api-key:latest'
      - '--set-secrets'
      - 'NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=uat-firebase-auth-domain:latest'
      - '--set-secrets'
      - 'NEXT_PUBLIC_FIREBASE_PROJECT_ID=uat-firebase-project-id:latest'
      - '--set-secrets'
      - 'NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=uat-firebase-storage-bucket:latest'
      - '--set-secrets'
      - 'NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=uat-firebase-messaging-sender-id:latest'
      - '--set-secrets'
      - 'NEXT_PUBLIC_FIREBASE_APP_ID=uat-firebase-app-id:latest'
      - '--set-secrets'
      - 'NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=uat-firebase-measurement-id:latest'

options:
  logging: CLOUD_LOGGING_ONLY

DockerFile

# Set working directory
WORKDIR /app

# Copy package.json and lockfile to install dependencies
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy rest of the application code
COPY . .

# Build the Next.js application for production
RUN npm run build

# Production image
FROM node:alpine

# Set working directory
WORKDIR /app

# Copy production build from builder stage
COPY --from=builder /app/.next/. /app/.next/

# Install production dependencies
COPY package.json ./
RUN npm install --production

# Expose port for Next.js server
EXPOSE 8080
# Start the Next.js server
CMD ["npm", "start"]

The app builds but in the browser console I get this error:

Uncaught (in promise) FirebaseError: Firebase: Error (auth/invalid-api-key).

and the API key is undefined when I try to log it:

The app works locally. I am confident the API credentials are correct and I think I've authorized the correct domains and the run service account has the correct permission to access the secret manager.

I have tried to set credentials at build and run time using -set-env-vars and -set-secrets and -update-secrets but no success

When and how should I be setting these secrets? Should I be setting them at build or runtime and if so how?