title: Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key)
body: <p>Config:</p>
  <p><strong>vite v2.6.4</strong>,</p>
  <p><strong>react v17.0.0</strong>,</p>
  <p><strong>firebase v9.5.0</strong></p>
  <p>When I deployed my app on <strong>netlify</strong>, it all went good. But when I go to my app its all blank and the console log me:</p>
  <blockquote>
  <p>Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key).</p>
  </blockquote>
  <p>For the sake of my <strong>firebase</strong> project I put the api key in a <em>/.env</em> file that is ignore by git. I've read the <a href="https://vitejs.dev/guide/env-and-mode.html" rel="nofollow noreferrer">https://vitejs.dev/guide/env-and-mode.html</a> page but don't understand so much what to do.</p>
  <p><strong>.env</strong> file</p>
  <pre><code>VITE_APP_API_KEY= *thekey*
  VITE_APP_AUTH_DOMAIN= *theauthdomain*
  VITE_APP_PROJECT_ID= *theprojectid
  VITE_APP_STORAGE_BUCKET= *thebucket*
  VITE_APP_MESSAGING_SENDER_ID= *themsId*
  VITE_APP_APP_ID= *theappid*
  </code></pre>
  <p><strong>.gitignore</strong> file</p>
  <pre><code>node_modules
  .DS_Store
  dist
  dist-ssr
  *.local
  .env
  .env.local
  .env.development.local
  .env.test.local
  .env.production.local
  </code></pre>
  <p><strong>Firebase.js</strong> file</p>
  <pre><code>const firebaseConfig = {
      apiKey: import.meta.env.VITE_APP_API_KEY,
      authDomain: import.meta.env.VITE_APP_AUTH_DOMAIN,
      projectId: import.meta.env.VITE_APP_PROJECT_ID,
      storageBucket: import.meta.env.VITE_APP_STORAGE_BUCKET,
      messagingSenderId: import.meta.env.VITE_APP_MESSAGING_SENDER_ID,
      appId: import.meta.env.VITE_APP_APP_ID
  }
  </code></pre>
  <p><em>Folder Architechture</em></p>
  <p><a href="https://i.stack.imgur.com/GIPIm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GIPIm.png" alt="enter image description here" /></a></p>