title: How to hide firebaseConfig information in client side
body: <p>I'm setting authentication functionality by <code>firebase</code>.<br>
  It's working fine in my local docker environment.<br>
  But its <code>firebaseConfig</code> is located in client side.<br>
  I want to hide <code>firebaseConfig</code> information as environment variables.<br></p>
  
  <p>Here is the stack.</p>
  
  <pre><code>・client: react/axios
  ・api: golang/gin
  ・web server: nginx
  ・db: mysql
  ・container: docker
  ・ci-tool: travis
  ・deploy: aws elastic beanstalk
  </code></pre>
  
  <p>Here is the repository structure<br></p>
  
  <pre><code>article
    ├ client
    ├   └ src
    │      └ firebase.ts
    ├ api
    ├ nginx
    └ docker-compose.yml
  </code></pre>
  
  <p>I set <code>process.env</code> in <code>firebaseConfig</code>. </p>
  
  <pre class="lang-js prettyprint-override"><code>//firebase.ts
  import * as firebase from 'firebase';
  import 'firebase/auth';
  
  const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: '',
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID,
  };
  
  firebase.initializeApp(firebaseConfig);
  
  export default firebase;
  
  </code></pre>
  
  <p>This works fine in local environment.<br>
  But in production environment(elastic beanstalk), I have no idea to set these environment variables because they are in client side.</p>
  
  <p>Entire source code is here:<br>
  <a href="https://github.com/jpskgc/article" rel="nofollow noreferrer">https://github.com/jpskgc/article</a><br>
  Production URL is here:<br>
  <a href="http://multidocker-env.vwnrixavuv.ap-northeast-1.elasticbeanstalk.com/" rel="nofollow noreferrer">http://multidocker-env.vwnrixavuv.ap-northeast-1.elasticbeanstalk.com/</a><br></p>
  
  <p>I expect firebase authentication works in production environment(elastic beanstalk).<br>
  But the actual does not.<br></p>
  
  <pre><code>Zr {code: "auth/invalid-api-key", message: "Your API key is invalid, please check you have copied it correctly."}
  code: "auth/invalid-api-key"
  message: "Your API key is invalid, please check you have copied it correctly."
  __proto__: Error
  </code></pre>
  
  <p>****UPDATE****<br>
  I set environemt variables in <code>docker-compose.yml</code> and <code>elastic beanstalk</code>.<br>
  but still same error occurs.</p>
  
  <pre><code>//docker-compose.yml
    client:
      build:
        dockerfile: Dockerfile.dev
        context: ./client
      volumes:
        - /app/node_modules
        - ./client:/app
      environment:
        - REACT_APP_FIREBASE_API_KEY=${REACT_APP_FIREBASE_API_KEY}
        - REACT_APP_FIREBASE_AUTH_DOMAIN=${REACT_APP_FIREBASE_AUTH_DOMAIN}
        - REACT_APP_FIREBASE_DATABASE_URL=${REACT_APP_FIREBASE_DATABASE_URL}
        - REACT_APP_FIREBASE_PROJECT_ID=${REACT_APP_FIREBASE_PROJECT_ID}
        - REACT_APP_FIREBASE_MESSAGING_SENDER_ID=${REACT_APP_FIREBASE_MESSAGING_SENDER_ID}
        - REACT_APP_FIREBASE_APP_ID=${REACT_APP_FIREBASE_APP_ID}
  </code></pre>
  
  <p>here is the <code>elastic beanstalk</code> environment variables setting:<br>
  <a href="https://imgur.com/a/XvjL4dh" rel="nofollow noreferrer">https://imgur.com/a/XvjL4dh</a></p>