How to access secrets when using flutter web with github actions

Question

I have a flutter web app and for accessing the database I have hardcoded an APIKey in a secrets.dart file, And this works perfectly fine. I have added this file to .gitignore in order to prevent it from pushing it to version control. But when it comes to deploying the app using GitHub actions The script fails because it doesn't detect the secrets file.

I did look at the docs on Encrypted secrets from Github which basically allows storing the secrets.But it seems like those secrets are only accessible in the yml file.

I would like to know how can I use this secret in my app so that my script runs successfully and deploys the app. Here is my folder structure

lib/
  services/
     database.dart /// this file uses the APIkey from secrets.dart
  secrets.dart /// contains the APIkey

One way to solve this issue I can think of is to use a .env file but I am not much familiar with How to add the secret keys in .env file through the CI script. I believe that would also solve my problem.

Heres my CI script

# 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
      - uses: actions/setup-java@v1
        with:
          java-version: "12.x"
      - uses: subosito/flutter-action@v1
        with:
          channel: "master"
      - run: flutter pub get
      - run: flutter pub run build_runner build --delete-conflicting-outputs
      - run: flutter build web --release
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "${{ secrets.GITHUB_TOKEN }}"
          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_VOCABHUB_34C7F }}"
          channelId: live
          projectId: vocabhub-34c7f
        env:
          FIREBASE_CLI_PREVIEWS: hostingchannels

Answer 1

Here is my setup where I define the environment value in the job itself, however, the variables are above it (in env section), as a result, I don't have to repeat them in every job. In turn, the build takes value from the secrets related to the environment

name: Deploy prod

on:
  workflow_dispatch:

env:
  AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
  AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
  TF_VAR_docker_image_tag: ${{ github.sha }}

jobs:
  pre_deployment:
    name: Something here
    runs-on: ubuntu-20.04
    environment: prod
    steps:
      - name: Checkout Repository
        uses: actions/checkout@master
...

Answer 2

if you're using Environment Secrets rather than Repository Secrets, you should define what environment will u use, check this out

jobs:
  build:
    environment: **ENVIRONMENT NAME HERE**

    steps:
      - name: blah blah
        run: echo blah blah

---

UPDATE (2022-08-09)

jobs:
    build:
    ...
    environment: Foo
    steps:
        - uses : actions/checkout@v3
        - name : Run some customized action
          env :
            a : ${{ secrets.Bar }}
            b : $ Mona  
            c : ${{ secrets.Lisa }}
          run : |
            echo $a 
            echo $b
            echo $c

There were a lot of updates since I answered, so to summarize, There are 3 secrets in GitHub now

1. Environments Secrets
2. Actions Secrets (Repository Secrets)
3. Dependabot Secrets

Dependabot is out of this range.

Environments Secrets are:

Settings -> Environments -> New Environments -> Environment Secrets

Actions Secrets are:

Settings -> Secrets -> Actions -> Repository Secrets

so if we want to access the environment's secret value logically, we need to know 2 arbitrary variables: Environment Name and Environment Secret Name, for example: EnvironmentName.EnviromentSecretName.EnvironmentSecretValue

As I wrote, Foo is EnvironmentName

and

Bar is EnvironmentSecretName

and

Mona is constant

and

Lisa is Actions(Repository) Secret Name

so that if we set Environment Secret as Mark and Repository Secret as Twain

the console output will be:

Mark

Mona

Twain

Additionally, GitHub will redact the secret value like "***" consider https://zellwk.com/blog/debug-github-actions-secret/ URI to debug it.

Answer 3

You can use your secrets.dart file while being ignored in the source control.

Here are the steps

1. In your local machine, encode the content of your secrets.dart using the base64 command:

     base64 lib/path/to/secrets.dart
   

2. Copy and paste the output into your GitHub secrets, name it $SECRETS_FILE_CONTENT or whatever you want.
3. Add this CI step into your yaml script just before the flutter pub get step.

     # other stuff ...
     - run: echo $SECRETS_FILE_CONTENT | base64 -d > lib/path/to/secrets.dart
       env:
         SECRETS_FILE_CONTENT: ${{ secrets.SECRETS_FILE_CONTENT }}
     - run: flutter pub get
     - run: flutter pub run build_runner build --delete-conflicting-outputs
     - run: flutter build web --release
     # other stuff ...
   

To add the secret in the GitHub user interface, follow these steps:

Your secret should appear in the lower "repository secrets" half of the UI, it should NOT appear in the "Environment secrets" as those do not work with a simple ${{ secrets.name_of_variable }}.

To provide more context, here's what the "actions" file, e.g. .github/workflows/ci.yml in your repository, should look like:

name: CI

on:
  push:
    branches: [ main, dev ]
  pull_request:
    branches: [ main ]

  # Allows to run this workflow manually from the Actions tab
  workflow_dispatch:
  
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Decode base64 secrets
        run: echo $SECRETS_FILE_CONTENTS | base64 -d > lib/path/to/secrets.dart
        env:
          SECRETS_FILE_CONTENTS: ${{ secrets.SECRETS_FILE_CONTENTS }}
      # … put your steps here
        run: flutter pub get

Edit

This is also the same process when hiding google-services.json when people work with firebase. Or with signing keys (key.jks or key.keystore).