How to use REACT_ENV_SECRET in firebase

Question

My app is working fine locally. I'm using ReactJS.

For instance

const currentDBAPI = process.env.REACT_APP_DB_API

Works as expected.

I have created the secrets in the secret manager.

However it seems like once my app is deployed, react is unable to read these secrets. I'm getting this error:

SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON

I was looking at the firebase documentation here It looks like the procedure is for NodeJS, Not sure if it's the same for React but I have tried to install the firebase-functions package. and follow the procedure.

I'am deploying my app using Github action and the deployment fail because it require the async_hooks package.

Module not found: Error: Can't resolve 'async_hooks' in '.../firebase-functions/lib/common'

If I install the async_hooks package I get the same error.

After some more reading I found that this package is for server side and specific to NodeJS.

How can I access my secret using react?

Update:

since the app is built and deployed in Github actions I have added the secrets there.

steps:
      - uses: actions/checkout@v3
      - run: yarn install --frozen-lockfile && yarn build
        env: 
          REACT_APP_DB_API: '${{ secrets.REACT_APP_DB_API }}'
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_project-id }}'
          projectId: my-project-id

But the result remain the same

Answer 1

The reason for this is that the secrets must be set in both workflows to work.

Firebase use a workflow on PR and on Merge, at least in my setup. Setting the secrets only in the PR workflow did not work. I had to set them in both workflows.

Note that it will also take some time before the secrets are available. On my first page load, I still got the error. I had to refresh a few time for them to get picked up.