Firebase DatabaseURL - configuring firebase

Question

I'm trying to use Firebase with my react app.

I have a file with the config as follows:

import * as firebase from 'firebase';

const config = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.FIREBASE_DB_URL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGE_ID,
}

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

const database = firebase.database();
const auth = firebase.auth()

export {firebase, auth, database };

When I try this, I get an error that says:

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

I can't understand this error because I have config included in the call to initialise the app. Config includes the database URL.

How do you initialise the database?

Answer 1

Same issue here. Context: Gatsby - gatsby-node.js

For SOME reason it dsnt like my env db url. need to hardcode just that value.

    const config = {
      apiKey: process.env.GATSBY_FIREBASE_API_KEY,
      authDomain: process.env.GATSBY_FIREBASE_AUTH_DOMAIN,
      databaseURL: "https://blabla.firebaseio.com",
      projectId: process.env.GATSBY_FIREBASE_PROJECT_ID,
      storageBucket: process.env.GATSBY_FIREBASE_STORAGE_BUCKET,
      messagingSenderId: process.env.GATSBY_FIREBASE_MESSAGING_SENDER_ID
    }

and it worked.

cya

Answer 2

You don't need that if statement around the firebase.initializeApp(config);

  import * as firebase from 'firebase';

  const config = {
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.FIREBASE_DB_URL,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGE_ID,
  }

  firebase.initializeApp(config);

You shouldn't need to export these objects, once you initialise the app it should be usable within the project without exporting.

  const database = firebase.database();
  const auth = firebase.auth()

  export {firebase, auth, database };

Answer 3

Don't initialize firebase more than once.

https://github.com/firebase/firebase-functions/issues/228

Answer 4

I think it is a copy paste error :)

in .env file REACT_APP_DATABASE_URL

but i use process.env.REACT_APP_DB

Please check it , it worked fine

import firebase from 'firebase/app'
import 'firebase/database';
const config = {
    apiKey: process.env.REACT_APP_APIKEY,
    authDomain: process.env.REACT_APP_AUTHDOMAIN,
    databaseURL: process.env.REACT_APP_DATABASE_URL,
    projectId: process.env.REACT_APP_PID,
    storageBucket: process.env.REACT_APP_SB,
    messagingSenderId: process.env.REACT_APP_SID,
    appId: process.env.REACT_APP_APPID,
    measurementId: process.env.REACT_APP_MID
};


firebase.initializeApp(config);
const database = firebase.database();

export { database };
export default firebase;

Answer 5

Restarting the development server solves the issue, if you have just written the code and trying to compile it throws this error. So you can try to exit the batch job and again restart the server.

Answer 6

I also got this uncaught error related to firebase.Atlast Finally error should be solved. Actually when we are using environment variables they should not pass in to bundle.js file which is a client side javascript file..We can use "DefinePlugin" which is a webpack plugin that should manually pass those env variables in to bundle.js file.

Answer 7

Seems like your code is just fine. Just print and check process.env.FIREBASE_DATABASE_URL and its exactly same as mentioned in firebase console. (If you are using create react app, dont forget to add REACT_APP_ to all your env variables, https://create-react-app.dev/docs/adding-custom-environment-variables/)

import * as firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/functions';
import 'firebase/storage';

const appConfiguration = {
    apiKey: process.env.REACT_APP_API_KEY,
    authDomain: process.env.REACT_APP_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_DATABASE_URL,
    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
};

export const session_type = firebase.auth.Auth.Persistence.LOCAL;

export const app = firebase.initializeApp(appConfiguration);
export const auth = app.auth();
export const db = app.firestore();
export const storage = app.storage();

will get the job done.

Answer 8

I just paste the hardcode config and it worked for me

const config = {
  apiKey: "AIzaSyBA2C8S7****************-gCw",
  authDomain: "e**********-2aa4c.firebaseapp.com",
  databaseURL: "https://************.firebaseio.com",
  projectId: "ea********2aa4c",
  storageBucket: "ea************2aa4c.appspot.com",
  messagingSenderId: "1765********26",
}

Answer 9

Same issue here but after putting firebaseconfig in componentDidMount() it will solved.

componentDidMount(){

const firebaseConfig = {
  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
};
firebase.initializeApp(firebaseConfig);
const myitem = firebase.database().ref('items/').once('value',snapshot=>{
  console.log(snapshot.val())
})

}

Answer 10

In the firebase.js, when I removed the blank between databaseURL: and process.env.FIREBASE_DATABASE_URL., it worked.

const config = {
  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
};