Github Actions - How can I make my env variable(stored in .env file) available in my workflow

Question

I'll try to be as clear as possible. I have also asked about related issues but didn't receive a convincing response.
I'm using React and firebase for hosting.
Also, I'm storing my firebase web API key in my .env file.
I set up firebase hosting using Firebase CLI and chose to automatically deploy on merge or pull request.
After the setup finished a .github folder with .yml file was created in my working directory.

   .github
      - workflows
          -firebase-hosting-merge.yml
          -firebase-hosting-pull-request.yml

So now when I deploy my project(without pushing to GitHub) manually to firebase by running firebase deploy everything works fine and my app is up and running.
However when I make changes and push my changes to Github. Github actions are triggered and the automatic deployment to the firebase process starts. The build passes all the checks.

However, when I visit the hosted URL there is an error I get in the console saying Your API key is invalid, please check you have copied it correctly.
I tried few workarounds like storing my firebase web API key into the Github secrets and accessing it in my .yml file.

# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools
 
name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - master
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm ci && npm run build --prod
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_EVENTS_EASY }}'
          channelId: live
          projectId: my-project
        env:
          REACT_APP_API_KEY: ${{secrets.REACT_APP_API_KEY}}
          FIREBASE_CLI_PREVIEWS: hostingchannels

But I am still getting the error. I feel that the error is definitely due to the environment variables.
I have stored my firebase web API key in my .env.production file located in the root directory. Somehow GitHub actions are not using my environment variables defined.
Please let me know how can I manage my env variables so that it can be accessed by my workflow.

Answer 1

The answer is put custom env vars in first level before jobs:

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - master

env: # <--- here
  REACT_APP_API_KEY: ${{secrets.REACT_APP_API_KEY}} # <--- here

jobs:
  build_and_deploy:
...

And add this secrets in Github > Your project > Settings > Secrets