Código relevante para el problema

 <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); };

Cuando ejecuto este proyecto en localhost e intento iniciar sesión (con credenciales válidas), onClickLogin detecta el siguiente error:

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

El mensaje de error parece bastante simple, pero aquí está el truco: el mismo código funciona en producción. Mi suposición es que, dado que este código funciona en producción pero no en localhost, se trata de algún tipo de problema de configuración del entorno.

Ayúdenme a comprender qué puede ser y si hay alguna diferencia en el comportamiento de inicio de sesión entre el desarrollo y la producción (suponiendo que se use la misma base de datos para ambos).

Código de Firebase para referencia:

 import * as firebaseAdmin from 'firebase-admin'; const firebaseConfig = { apiKey: process.env.FIREBASE_KEY, projectId: process.env.FIREBASE_PROJECT_ID }; firebaseAdmin.initializeApp(firebaseConfig);