angular, Firebase App Hosting cannot find api_key that is stored in Google Secret Manager

Simple app in angular. Storing data in firestore and using firebase auth.

I am hosting app thru firebase "hosting app" and using google secret manager to store there API_KEY, MESSAGING_SENDER_ID,APP_ID, MEASUREMENT_ID.

I added this secrets using commands:

1. npm init @apphosting
2. firebase apphosting:secrets:set <name>
3. firebase apphosting:secrets:grantaccess <name> --backend=<backend_name>

# apphosting.yaml
runConfig:
minInstances: 0
env:
- variable: API_KEY
secret: projects/698946876029/secrets/API_KEY
- variable: MESSAGING_SENDER_ID
secret: projects/698946876029/secrets/MESSAGING_SENDER_ID
- variable: APP_ID
secret: projects/698946876029/secrets/APP_ID
- variable: MEASUREMENT_ID
secret: projects/698946876029/secrets/MEASUREMENT_ID


In cloud run i can see mentioned env variables(attached photo).

But when I go to URL of hosted app I can see ERROR FirebaseError: Firebase: Error (auth/invalid-api-key).

I checked if my API_KEY is valid. I'm expecting it to work

Continue reading...