Code relevant to the issue

<SimpleButton
  onClick={this.onClickLogin}
  disabled={!this.isEmailPasswordValid()}
  style={{ width: '50%' }}
  id="gi-auth-modal-log-in-button">
    Log In
</SimpleButton>

async onClickLogin() {
    const that = this;
    this.props
      .loginWithPassword(that.state.email, that.state.password)
      .then(() => {
        that.props.closeModal();
      })
      .catch(e => console.log(e))
  }

export const loginWithPassword = (email, password) => async (dispatch) => {
  return await firebase
    .auth()
    .signInWithEmailAndPassword(email, password)
    .then(async (userData) => {
      await dispatch(login(userData));
    })
    .catch(handleFirebaseError);
};

When I run this project on localhost and try to login (with valid credentials), onClickLogin catches the following error:

{
    "code": "auth/invalid-api-key",
    "message": "Your API key is invalid, please check you have copied it correctly."
}

The error message seems simple enough but here is the kicker: the same code works in production. My assumption is that since this code works in production but not on localhost it is some kind of environment configuration issue.

Please help me understand what it can be and should there be any differences in login behavior between dev and production (assuming the same DB is used for both).

Firebase code for reference:

import * as firebaseAdmin from 'firebase-admin';

const firebaseConfig = {
  apiKey: process.env.FIREBASE_KEY,
  projectId: process.env.FIREBASE_PROJECT_ID
};
firebaseAdmin.initializeApp(firebaseConfig);