getDatabase().ref("Foo") throws error, including CORS

[Jaagrav]

Description

So it seems when I try to use the RTDB, it throws a CORS error which it never did on the stable version. I used Auth in my project, works completely fine but it's kinda strange how it throws the error stated below in the new Alpha SDK. I was not sure if this issue was my fault or Firebase's so I chose not to create an issue and instead put it here.

You might want to take a look at this,

My Environment

• Operating System version: Microsoft Windows 10 Version 2004 (OS Build 19041.746)
• Browser version: Brave Version 1.19.88 Chromium: 88.0.4324.96 (Official Build) (64-bit)
• Firebase SDK version: 0.900.12
• Firebase Product: RealTime Database

Code to Recreate this issue

import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";

const firebaseApp = initializeApp({
  apiKey: "<API Key>",
  authDomain: "<Auth Domain>",
  databaseURL: "<DB URL>",
  projectId: "<Project ID>",
  storageBucket: "<Storage Bucket>",
  messagingSenderId: "<Messaging Sender ID>",
  appId: "<App ID>",
  measurementId: "<Measurement ID>",
});

const db = getDatabase(firebaseApp).ref("Foo"); //Line that is possibly causing the error
const db = getDatabase(firebaseApp); //Works this way, but if I put .ref("Foo") later, error shows up again

export { firebaseApp, db, getAuth, signInWithPopup, GoogleAuthProvider };

Error that's showing

Now there are mainly 3 errors that's showing up,

1 of 3

errors.ts:91 Uncaught FirebaseError: Firebase: Error (auth/internal-error).
    at createErrorInternal (http://localhost:3000/static/js/0.chunk.js:1714:51)
    at _assert (http://localhost:3000/static/js/0.chunk.js:1728:31)
    at AuthImpl.registerStateListener (http://localhost:3000/static/js/0.chunk.js:6893:5)
    at AuthImpl.onIdTokenChanged (http://localhost:3000/static/js/0.chunk.js:6677:17)
    at AuthInternal.addAuthTokenListener (http://localhost:3000/static/js/0.chunk.js:9891:33)
    at FirebaseAuthTokenProvider.addTokenChangeListener (http://localhost:3000/static/js/0.chunk.js:33589:18)
    at Repo.start (http://localhost:3000/static/js/0.chunk.js:32475:29)
    at Database.get (http://localhost:3000/static/js/0.chunk.js:31969:28)
    at Database.get (http://localhost:3000/static/js/0.chunk.js:31981:49)
    at Database.ref (http://localhost:3000/static/js/0.chunk.js:32025:38)
    at FirebaseDatabase.ref (http://localhost:3000/static/js/0.chunk.js:33945:54)
    at http://localhost:3000/static/js/main.chunk.js:836:50
    at commitHookEffectListMount (http://localhost:3000/static/js/0.chunk.js:246410:30)
    at commitPassiveHookEffects (http://localhost:3000/static/js/0.chunk.js:246447:15)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/0.chunk.js:226992:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/0.chunk.js:227041:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/0.chunk.js:227094:35)
    at flushPassiveEffectsImpl (http://localhost:3000/static/js/0.chunk.js:249511:13)
    at unstable_runWithPriority (http://localhost:3000/static/js/0.chunk.js:262456:16)
    at runWithPriority$1 (http://localhost:3000/static/js/0.chunk.js:237879:14)
    at flushPassiveEffects (http://localhost:3000/static/js/0.chunk.js:249479:16)
    at performSyncWorkOnRoot (http://localhost:3000/static/js/0.chunk.js:248394:7)
    at http://localhost:3000/static/js/0.chunk.js:237933:28
    at unstable_runWithPriority (http://localhost:3000/static/js/0.chunk.js:262456:16)
    at runWithPriority$1 (http://localhost:3000/static/js/0.chunk.js:237879:14)
    at flushSyncCallbackQueueImpl (http://localhost:3000/static/js/0.chunk.js:237928:11)
    at flushSyncCallbackQueue (http://localhost:3000/static/js/0.chunk.js:237916:7)
    at unbatchedUpdates (http://localhost:3000/static/js/0.chunk.js:248569:11)
    at legacyRenderSubtreeIntoContainer (http://localhost:3000/static/js/0.chunk.js:251376:9)
    at Object.render (http://localhost:3000/static/js/0.chunk.js:251459:14)
    at Module.<anonymous> (http://localhost:3000/static/js/main.chunk.js:1301:50)
    at Module../src/index.js (http://localhost:3000/static/js/main.chunk.js:1386:30)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:852:31)
    at fn (http://localhost:3000/static/js/bundle.js:151:20)
    at Object.1 (http://localhost:3000/static/js/main.chunk.js:1778:18)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:852:31)
    at checkDeferredModules (http://localhost:3000/static/js/bundle.js:46:23)
    at Array.webpackJsonpCallback [as push] (http://localhost:3000/static/js/bundle.js:33:19)
    at http://localhost:3000/static/js/main.chunk.js:1:95

2 of 3

Uncaught TypeError: Cannot read property 'updateSnapshot' of undefined
    at Repo.updateInfo_ (Repo.ts:359)
    at Repo.ts:352
    at each (util.ts:417)
    at Repo.onServerInfoUpdate_ (Repo.ts:351)
    at PersistentConnection.handleTimestamp_ (PersistentConnection.ts:913)
    at PersistentConnection.onReady_ (PersistentConnection.ts:700)
    at Connection.onConnectionEstablished_ (Connection.ts:456)
    at Connection.onHandshake_ (Connection.ts:395)
    at Connection.onControl_ (Connection.ts:341)
    at Connection.onPrimaryMessageReceived_ (Connection.ts:312)
    at PacketReceiver.onMessage_ (Connection.ts:210)
    at PacketReceiver.ts:62
    at exceptionGuard (util.ts:598)
    at _loop_2 (PacketReceiver.ts:61)
    at _loop_1 (PacketReceiver.ts:59)
    at PacketReceiver.handleResponse (PacketReceiver.ts:54)
    at urlParams (BrowserPollConnection.ts:193)

3 of 3

Access to fetch at 'https://s-usc1c-nss-218.firebaseio.com/.lp?start=t&ser=15346936&cb=1&v=5&p=1:978497464036:web:818f87aaa099447306eef1&ns=the-coder-b3e19' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

[Feiyang1]

Good catch. It is an issue with the new SDK. I opened #4425 to track it.

For a workaround, you can call getAuth() which initializes Auth before using Database.

[Jaagrav]

Ok so, I might be wrong, but the error persists even after initializing Auth before getting the database. I still haven't tried with the RTDB or Firestore rules set to true, I tried it with Firestore as well, there's no CORS error this time but the first error I mentioned is still thrown.

What I believe is that there is some issue with Auth not being initialized successfully before, if the DB rules are set to Auth mandatory. But even if the user is authenticated on the client side, this error is thrown.

[Feiyang1]

I doubt it is the security rules, because then you should get the Permission denied error instead of an internal one. Is it possible to create a minimal repro that I can play with? Before creating the repro, can you do a clean install/build of your project, clear the browser cache including indexeddb, and try again?