Firebase warning connecting to database emulator

[Joebayld]

[REQUIRED] Describe your environment

• Operating System version: macOS 11
• Browser version: Chrome 89
• Firebase SDK version: 8.4.1
• Firebase Product: database emulator

[REQUIRED] Describe the problem

I was on firebase v8.2 and just made some updates to the latest v8.4.1, but now I can no longer connect my app to the local database emulator. All other emulators work - just not the database one.

I can confirm the emulator is working as I can access it from the dashboard, and if I run version 8.2 it's also fine. When I go to my site, I get the following warning:

@firebase/database: FIREBASE WARNING: Provided authentication credentials for the app named "[DEFAULT]" are invalid. This usually indicates your app was not initialized correctly. Make sure the "apiKey" and "databaseURL" properties provided to initializeApp() match the values provided for your app at https://console.firebase.google.com/.

Note that I've changing nothing other than the firebase version.

Steps to reproduce:

import firebase from 'firebase/app'
import 'firebase/functions'
import 'firebase/firestore'
import 'firebase/analytics'
import 'firebase/auth'
import 'firebase/storage'
import 'firebase/database'
import { isDevelopment, isStaging } from '@/utility/env'

firebase.initializeApp(config) // hiding my config from here

const firebaseAuth = firebase.auth()
const firestore = firebase.firestore()
const functions = firebase.functions()
const storage = firebase.storage()
const analytics = firebase.analytics()
const database = firebase.database()

if (isDevelopment && !isStaging) {
  localStorage.clear()
  functions.useEmulator(window.location.hostname, 5001)
  // @ts-ignore // disableWarnings flag is still broken in typescript :(
  firebaseAuth.useEmulator('http://' + window.location.hostname + ':9099', { disableWarnings: true })
  firestore.useEmulator(window.location.hostname, 8079)
  database.useEmulator(window.location.hostname, 9000)
}

Any ideas?

[looptheloop88]

Thanks for the report @Joebayld, however I wasn't able to replicate this issue. I used the SDK version 8.4.1 and I was able to use the emulator for Realtime Database without any issue.

Try to delete the node_modules directory and package-lock.json file, then run npm install again. If the issue persists, please share a sample project that I can run locally to replicate the issue.

[hubertkuoch]

Have the same issue (w. v8.4), all emulators work except the firestore one. It appears in the firebase emulator UI panel but cannot read/write with the following though in browser console @firebase/firestore: Firestore (8.4.0): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds.. Not sure why it behaves like that.

[Joebayld]

@looptheloop88 I just tried your steps and am still getting the issue. Everything is working except the database emulator with that warning. This was introduced in v8.3.

I'll work on making a test project - just need a minute for that.

[Joebayld]

Struggling to make a very stripped down version to test - but I made this. Just need to update the config to a test project.

https://github.com/Joebayld/firebase-issue

Weird thing is still project shows an error - but a different one than I'm posting on here. It does indeed stop working after using the latest version of firebase. Not sure if the different error is because my other app is a nodeJS app versus CDN?

[Joebayld]

Okay so did a little more research. That project does indeed show the issue. The part I really can't figure out is how you couldn't reproduce.

My findings is that database.useEmulator(window.location.hostname, 9000) is not doing anything. I discovered this because in the test project I was getting a 'permission denied' when writing to the database - even though my rules were public. The reason for this is that instead of trying to connect to the emulator, it's trying to talk to the live production servers which has locked down rules.

How can I say this? Well I took some screenshots of the network tab in v8.2.10 and v8.4.1. When in 8.2, it's connecting to a localhost (emulator), when in 8.4 (and I believe 8.3), it connects to Google's firebase servers - no bueno! See screenshots below.

v8.2.10

v8.4.1

Fingers crossed that you can reproduce it. I've made a new app in VueJS that might be easier to work with. Readme has instructions in it.

https://github.com/Joebayld/firebase-issue-vue

[schmidt-sebastian]

We made a lot of changes to the RTDB recently. This might have been caused by them - we will have to verify. In the meantime, can you continue to use the old version?

[Joebayld]

Absolutely. thanks

[tomhicks]

Same issue here updating to 8.4.1

Do you think it could be worth somehow putting these updates into an alpha- or next-type release? There's been lots of issues with RTDB lately, which is understandable if you're making lots of changes. It would be good if there could be some more real-world vetting before release. I'm sure you'd find some willing participants here ;)

Firebase used to be on my "update to latest version without concern" list, but now it's not :(

[looptheloop88]

Hi @Joebayld, thanks for the clarification. I was able to replicate the issue now. I've verified that database.useEmulator(host, port) is working fine in SDK version 8.2.10, but not in version 8.4.1.

As a workaround for version 8.4.1, you may change the value of databaseURL in the configuration object. See below:

let config = {
  ...
 databaseURL: "https://sample-project.firebaseio.com",
  ...
};

if (location.hostname === "localhost") {
   config = {
      databaseURL: "http://localhost:9000/?ns=sample-project",
   };
}

firebase.initializeApp(config);

This will work even without using database.useEmulator(host, port).

I've also filed an internal bug for this issue. I will keep this thread posted for any updates.

[schmidt-sebastian]

Fix is pending review.