'How to solve "Firebase: Error (auth/invalid-api-key)" error in react app environment

I'm using environment variables to avoid from hardcoding my API key into my config files.

Tried a lot of things: making sure I copied the API keys correctly, restarting my dev server, verifying identity using the firebase-admin npm module etc. etc.

src/firebase.init.js

const firebaseConfig = {
    apiKey: process.env.REACT_APP_apiKey,
    authDomain: process.env.REACT_APP_authDomain,
    projectId: process.env.REACT_APP_projectId,
    storageBucket: process.env.REACT_APP_storageBucket,
    messagingSenderId: process.env.REACT_APP_messagingSenderId,
    appId: process.env.REACT_APP_appId,
};

.env.local

REACT_APP_apiKey=xxxx
REACT_APP_authDomain=xxx
REACT_APP_projectId=xxx
REACT_APP_storageBucket=xxx
REACT_APP_messagingSenderId=xxx
REACT_APP_appId=xxx

then in console show this error

Firebase: Error (auth/invalid-api-key).

How solve this error?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source