Configuring Firebase for a React App - undefined config

Question

I'm struggling to figure out what's going wrong with my attempts to configure Firebase for my React App. I've followed at least 10 different tutorials and can't get the config variables to register as recognised.

I'm using web pack, so my webpack.config.json has the plugin as follows:

plugins: [
      CSSExtract,
      new webpack.DefinePlugin({
        'process.env.FIREBASE_API_KEY': JSON.stringify(process.env.FIREBASE_API_KEY),
        'process.env.FIREBASE_AUTH_DOMAIN': JSON.stringify(process.env.FIREBASE_AUTH_DOMAIN),
        'process.env.FIREBASE_DATABASE_URL': JSON.stringify(process.env.FIREBASE_DATABASE_URL),
        'process.env.FIREBASE_PROJECT_ID': JSON.stringify(process.env.FIREBASE_PROJECT_ID),
        'process.env.FIREBASE_STORAGE_BUCKET': JSON.stringify(process.env.FIREBASE_STORAGE_BUCKET),
        'process.env.FIREBASE_MESSAGING_SENDER_ID': JSON.stringify(process.env.FIREBASE_MESSAGING_SENDER_ID)
      })
    ],

Then, I have a .env.development file as follows:

FIREBASE_API_KEY="1"
FIREBASE_AUTH_DOMAIN="2.firebaseapp.com"
FIREBASE_DATABASE_URL="https://3.firebaseio.com"
FIREBASE_PROJECT_ID="4"
FIREBASE_STORAGE_BUCKET="5.appspot.com"
FIREBASE_MESSAGING_SENDER_ID="6"

Then, I have a firebase/firebase.js file as follows:

import * as firebase from 'firebase';
// import firebase from 'firebase/app';
// import 'firebase/auth';
// import database from 'firebase/database';
// import { firebase } from '@firebase/app';
// import '@firebase/auth';
// import * as firebaseui from 'firebaseui';
// import { settings } from './config';

// Initalize and export Firebase.
const prodConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL:process.env.FIREBASE_DATABASE_URL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID
};

const devConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL:process.env.FIREBASE_DATABASE_URL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID
};

const config = process.env.NODE_ENV === 'production'
  ? prodConfig
  : devConfig
  console.log(config);




if (!firebase.apps.length) {
  firebase.initializeApp(config);
  console.log(config);
};

const database = firebase.database();

const auth = firebase.auth();

export {firebase, auth, database  };

I have been trying to figure out why the config variables are logging as undefined.

Has anyone figured out how to successfully configure a firebase app. My previous question on this topic suggested removing the space between the : and the value in the env.development file - but that doesnt make any difference to this problem. None of the variables register as defined in the console log.

When I try to start this in development, I get an error that says:

Error: FIREBASE FATAL ERROR: Can't determine Firebase Database URL.  Be sure to include databaseURL option when calling firebase.initializeApp().

All of my variables log as undefined:

{apiKey: undefined, authDomain: undefined, databaseURL: undefined, projectId: undefined, storageBucket: undefined, …}

score 0 · Accepted Answer · answered Oct 19 '18 at 00:02

0

You can have your firebase config stored in a separate js file similar to below:

var config = {
  apiKey: "APIKEY",
  authDomain: "AUTHDOMAIN",
  databaseURL: "URL"
  projectId: "ID"
  storageBucket: "BUCKET",
  messagingSenderId: "SENDER"
};

var app = Firebase.initializeApp(config);
export const db = app.database();

If you are worried about exposing your firebase config, this is a good read: Is it safe to expose Firebase apiKey to the public?

answered Oct 19 '18 at 00:02

Alchemist Shahed

351
2
7

I don't understand your point. I do have a separate js env file to hold my config variables. I use it in firebase.js to call those variables. – Mel Oct 19 '18 at 00:53
My point is you don't really need a separate env file, just put your config into firebase.js itself. – Alchemist Shahed Oct 19 '18 at 00:59
It's better to do a separate file so that it doesn't push to git. I actually just tried your suggestion and put the config variables in the firebase.js file and I don't get that error any more - however, that doesnt solve the problem of the gitignore. – Mel Oct 19 '18 at 02:23
Could you clarify what you mean by the problem of gitignore? If you don't want to push firebase.js to git, you could just specify it in your `.gitignore` file, isn't that right? – Alchemist Shahed Oct 19 '18 at 02:29
but then all the other calls won't work with it. Testing for the environment and then giving it variables for test, dev or production gets around that. I put the test and dev env. files in gitignore. – Mel Oct 19 '18 at 06:20

Configuring Firebase for a React App - undefined config

1 Answers1