Can't authenticate to use Firebase API-s on Android with React-Native

user_8206522 0
Viewed 85

I'm getting an error when authenticating with firebase. See the following error present in the Metro console window:

ERROR [Error: Your API key is invalid, please check you have copied it correctly.]

This happens upon running react-native run-android in my React-Native project. The app itself runs just fine, and I can use all functionality when running the web version of the project (thanks to react-native-web).

I configure firebase in a simple config file:

import firebase from 'firebase/app';
import '@firebase/auth';
import '@firebase/firestore';

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
  measurementId: process.env.REACT_APP_MEASUREMENT_ID,
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

export {firebase};

and import the exported firebase object in various places of my code. As you can see, the config is loaded from a .env file. If the values provided in it are for the web app, I can talk with the API-s just fine. However, if I provide config for Android, I keep getting the error mentioned before. I am completely clueless on why this happens.

I have tried various combinations of the config (including no config at all), but couldn't quite succeed. I have google-services.json file in the android/app directory, and I believe I have all required dependencies and other configuration bits properly added to the android gradle files.

firebase react-native reactjs
1 Answers

A possible cause to this could be due to firebaseConfig relying on process.env. As stated in the node.js documentation: process.env "...returns an object containing the user environment". When running your app on android this environment won't be available since it is not node.js running your application. I would recommend looking into react-native-dotenv to use environmental variables in a reliable way.

user_48628550
Related