How can I use Github secrets in JS files

Question

I have a basic git repo set up with github actions to build and deploy (HTML and TS files mainly).

However I have to use in some API Keys that needs to be secret.

So I figure out to use GITHUB SECRETS for them.

How can I access GITHUB SECRETS in my js (or TS) files so it can build with github actions properly?

Answer 1

You can pass-in Secrets as ENV variables.

Example:

   ...
   steps:
      - name: Git checkout
        uses: actions/checkout@v2

      - name: Use Node 12.x
        uses: actions/setup-node@v1
        with:
          node-version: 12.x

      - name: Install Dependencies (prod)
        run: yarn install --frozen-lockfile --production

      - name: Run Tests (JEST)
        run: yarn test --ci --silent --testPathIgnorePatterns=experimental
        env:
          CI: true
          API_KEY: ${{ secrets.API_KEY }}

In Node.js you can access it via process.env.API_KEY.

Answer 2

I Find a way to achieve it although it might not be the best (And I'm definitly not bash expert)

So create a setEnv.sh file

mkdir env
echo "export const environment = { firebase_api_key : '$1' }"  > env/env.ts

That take as your API key as first parameter, create a env folder and save TS code with your api key.

Then add this line

- run: sh setEnvironment.sh ${{ secrets.FIREBASE_API_KEY }}

Into your github action script, which will execute your script and set the Secret Key.

You'll now just have to use environment.firebase_api_key in your code.

---

Note: Your build needs to encrypt your key otherwise it will be exposed. But this can be usefull for example if you use API keys on your website and you also want your website code to be available in public on Github, without those plain keys.