Realtime Database Subscription not working: Firebase

Question

I have a setup to listen to real-time changes in firebase database:

This is how path looks like: Path = funfuse/users/connected-users/AfYXmJroEKQwnhiFXXXXXiyblti22

This is how my database is structured:

When I try to add an entry to the last child (ie. connected-users ) it updates in db but even though I have the app running on my web browser, I don't get any log messages for the update:

 useEffect(() => {
    if (isLoggedIn && firebaseToken !== '') {
      const path = `${rdb_paths.funfuse_connected_users}/${user?.uid ?? ''}`;
      const connectionsRef = ref(rdb, path);
      console.log('Path = ', path);

      onValue(connectionsRef, (snapshot) => {
        console.log('Values = ', snapshot.val());
      });
      return () => {
        console.log('Switching off listening');
        off(connectionsRef);
      };
    }
  }, [firebaseToken, isLoggedIn, user?.uid]);

Am I doing something wrong here? Why am I not able to get the updates. Here are my security rules:

{
  "rules": {
    "funfuse": {
      "users": {
        "requests-users": {
          "$uid": {
            ".read":"$uid === auth.uid && auth.token.email_verified === true",
            ".write":"$uid === auth.uid && auth.token.email_verified === true"
          }
        },
        "requested-users": {
          "$uid": {
            ".read":"$uid === auth.uid && auth.token.email_verified === true",
            ".write":"$uid === auth.uid && auth.token.email_verified === true"
          }
        },
       "connected-users": {
        "$uid": {
          ".read":"$uid === auth.uid && auth.token.email_verified === true",
          ".write":"$uid === auth.uid && auth.token.email_verified === true"
        }
      } 
      }
    }
  }
}

I did run a simulation to read and write data and it worked fine. Do I need to add additional rule for listening to the data updates?

Answer 1

I realized the problem was because it was taking the default database Url, as I wasn't passing it in my config object:

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FB_CLIENT_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FB_CLIENT_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FB_CLIENT_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FB_CLIENT_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FB_CLIENT_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FB_CLIENT_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FB_CLIENT_MEASUREMENT_ID,
};

changing the above to:

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FB_CLIENT_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FB_CLIENT_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FB_CLIENT_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FB_CLIENT_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FB_CLIENT_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FB_CLIENT_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FB_CLIENT_MEASUREMENT_ID,
  databaseURL: process.env.NEXT_PUBLIC_FB_CLIENT_DB_URL,
};

solved the issue for me.