title: React app build/deploy using github actions with secrets
body: <p>I am trying to accomplish build/deploy my react app that uses Firebase(for now only auth module) using github actions with secrets.
  For local development I use .env file with webpack and dotenv-webpack library. On local machine all works fine. Dev server get environment varialbles from .env file and inject it. But after build in github actions and deploying package on firebase hosting page return me an error:</p>
  <pre><code>code: &quot;auth/invalid-api-key&quot;
  message: &quot;Your API key is invalid, please check you have copied it correctly.&quot;
  </code></pre>
  <p>After some investigation I got that environment variables aren't defined properly:</p>
  <pre><code>apiKey: undefined
  authDomain: undefined
  databaseURL: undefined
  messagingSenderId: undefined
  projectId: undefined
  storageBucket: undefined
  </code></pre>
  <p>The main question if i'm doing variable injection correct or maybe there is another way to do it?
  My webpack config that I use in build:</p>
  <p><strong>webpack.build.conf.js</strong></p>
  <pre><code>const { merge } = require('webpack-merge');
  const baseWebpackConfig = require('./webpack.base.conf');
  
  const buildWebpackConfig = merge(baseWebpackConfig, {
    //!!!
    //CAUTION Production config
    //!!!
    mode: 'production',
  });
  
  module.exports = new Promise((resolve, reject) =&gt; {
    resolve(buildWebpackConfig);
  });
  </code></pre>
  <p><strong>webpack.base.conf.js</strong></p>
  <pre><code>const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const Dotenv = require('dotenv-webpack');
  
  module.exports = {
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'build'),
      publicPath: '/',
      filename: 'bundle.min.js',
    },
    resolve: {
      extensions: ['.js', '.jsx'],
      alias: {
        '@constants': path.resolve(__dirname, './src/constants'),
        '@components': path.resolve(__dirname, './src/components'),
        '@utils': path.resolve(__dirname, './src/utils'),
        '@styles': path.resolve(__dirname, './src/style'),
      },
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: ['babel-loader', 'eslint-loader'],
        },
        {
          test: /\.less$/,
          use: ['style-loader', 'css-loader', 'less-loader'],
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: path.resolve('./index.html'),
      }),
      new Dotenv(),
    ],
  };
  
  </code></pre>
  <p>File that get variables from .env file:</p>
  <pre><code>//Firebase config
  export const FB_API_KEY = process.env.REACT_APP_API_FB_KEY;
  export const FB_AUTH_DOMAIN = process.env.REACT_APP_FB_AUTH_DOMAIN;
  export const FB_DATABASE_URL = process.env.REACT_APP_FB_DATABASE_URL;
  export const FB_PROJECT_ID = process.env.REACT_APP_FB_PROJECT_ID;
  export const FB_STORAGE_BUCKET = process.env.REACT_APP_STORAGE_BUCKET;
  export const FB_MESSAGING_SENDER_ID = process.env.REACT_APP_FB_MESSAGING_SENDER_ID;
  </code></pre>
  <p>Pipeline file:</p>
  <pre><code>name: Firebase Deploy
  on:
    push:
      branches:
        - master
  jobs:
    build:
      name: Build
      runs-on: ubuntu-latest
      steps:
        - name: Checkout Repo
          uses: actions/checkout@master
          env:
            REACT_APP_API_FB_KEY: ${{ secrets.REACT_APP_API_FB_KEY }}
            REACT_APP_FB_AUTH_DOMAIN: ${{ secrets.REACT_APP_FB_AUTH_DOMAIN }}
            REACT_APP_FB_DATABASE_URL: ${{ secrets.REACT_APP_FB_DATABASE_URL }}
            REACT_APP_FB_PROJECT_ID: ${{ secrets.FB_PROJECT_ID }}
            REACT_APP_FB_STORAGE_BUCKET: ${{ secrets.FB_STORAGE_BUCKET }}
            REACT_APP_FB_MESSAGING_SENDER_ID: ${{ secrets.FB_MESSAGING_SENDER_ID }}
        - name: Variable to dotenv
            uses: CallePuzzle/envvar-to-dotenv-action@0.1.0
            with:
              variableNamesByFilter: ^REACT_(APP.*)
        - name: Install Dependencies
          run: npm install
        - name: Build
          run: npm run build
        - name: Archive Production Artifact
          uses: actions/upload-artifact@master
          with:
            name: build
            path: build
    deploy:
      name: Deploy
      needs: build
      runs-on: ubuntu-latest
      steps:
        - name: Checkout Repo
          uses: actions/checkout@master
        - name: Download Artifact
          uses: actions/download-artifact@master
          with:
            name: build
            path: build
        - name: Deploy to Firebase
          uses: w9jds/firebase-action@master
          with:
            args: deploy --only hosting
          env:
            FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
  
  </code></pre>