title: How to solve "Firebase: Error (auth/invalid-api-key)" error in Reactjs?
body: <p>I have a very frustrating error involving the use of API key with Firebase Authentication.</p>
  <pre><code>Firebase: Error (auth/invalid-api-key).
  </code></pre>
  <p>I'm using environment variables to avoid from hardcoding my API key into my config files.</p>
  <p>Tried a lot of things: making sure I copied the API keys correctly, restarting my dev server, verifying identity using the <code>firebase-admin</code> npm module etc. etc.</p>
  <h2>./src/config/firebase.js</h2>
  <pre><code>import firebase from &quot;firebase/compat/app&quot;;
  import &quot;firebase/compat/auth&quot;;
  import &quot;firebase/compat/firestore&quot;;
  
  const app = firebase.initializeApp({
    apiKey: process.env.QUIZZI_FIREBASE_API_KEY,
    authDomain: process.env.QUIZZI_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.QUIZZI_FIREBASE_PROJECT_ID,
    storageBucket: process.env.QUIZZI_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.QUIZZI_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.QUIZZI_FIREBASE_APP_ID
  });
  
  export const auth = app.auth();
  export const database = firebase.firestore();
  export default app;
  </code></pre>
  <h2>.env.local</h2>
  <pre><code>QUIZZI_FIREBASE_API_KEY=xxx
  QUIZZI_FIREBASE_AUTH_DOMAIN=xxx
  QUIZZI_FIREBASE_DATABASE_URL=xxx
  QUIZZI_FIREBASE_PROJECT_ID=xxx
  QUIZZI_FIREBASE_STORAGE_BUCKET=xxx
  QUIZZI_FIREBASE_MESSAGING_SENDER_ID=xxx
  QUIZZI_FIREBASE_APP_ID=xxx
  </code></pre>
  <p>I also referred to <a href="https://github.com/firebase/quickstart-js/issues/61" rel="nofollow noreferrer">this thread</a> but none of the solutions are working for me.</p>
  <p>How do I get rid of this error?</p>