Firebase Auth & Realtime Database Apps · Lesson

Detecting Presence & Online Status

Build live online/offline indicators using Realtime Database presence, onDisconnect handlers, and the special .info/connected node to reflect connection state reliably.

Detecting Presence & Online Status is a free Firebase Auth & Realtime Database Apps lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Firebase Auth & Realtime Database Apps learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is Presence

Presence means knowing which users are currently online. Chat apps, collaborative tools, and games all rely on it to show 'active now' indicators.

Realtime Database has special features that make presence robust even when a client disconnects unexpectedly.

The Connection Challenge

The hard part is the ungraceful disconnect: a user closes their laptop or loses signal. The app never gets to set status to 'offline'. We need the server to do it for us.

The .info/connected Node

Firebase exposes a special read-only boolean at .info/connected that is true when the client has a live connection and false when it does not.

import { getDatabase, ref, onValue } from 'firebase/database';

const db = getDatabase();
onValue(ref(db, '.info/connected'), (snap) => {
  console.log('Connected?', snap.val() === true);
});

onDisconnect Basics

onDisconnect registers an action that the server performs when the client disconnects. It is the key to reliable presence.

import { onDisconnect, set } from 'firebase/database';

const statusRef = ref(db, 'status/' + uid);
onDisconnect(statusRef).set({ state: 'offline' });

Order of Operations

The correct sequence is critical:

Wait until .info/connected is true
Register the onDisconnect action first
Only then set status to online

This guarantees the offline handler is armed before you go online.

A Complete Presence Setup

Combining the pieces gives a reliable presence system.

onValue(ref(db, '.info/connected'), (snap) => {
  if (snap.val() !== true) return;
  onDisconnect(statusRef).set({ state: 'offline', at: Date.now() })
    .then(() => set(statusRef, { state: 'online', at: Date.now() }));
});

Server Timestamps

Use serverTimestamp() instead of the client clock so 'last seen' times are consistent across devices with skewed clocks.

import { serverTimestamp } from 'firebase/database';

set(statusRef, { state: 'online', lastChanged: serverTimestamp() });

Multiple Devices

A user may be online on phone and laptop at once. Track presence per connection (a unique key per session) and treat the user as offline only when all connections drop.

import { push } from 'firebase/database';

const conRef = push(ref(db, 'status/' + uid + '/connections'));
onDisconnect(conRef).remove();

Cancelling onDisconnect

If the user logs out cleanly, cancel the pending onDisconnect action and set offline yourself, so stale handlers do not fire later.

import { onDisconnect } from 'firebase/database';

await onDisconnect(statusRef).cancel();
await set(statusRef, { state: 'offline' });

Displaying Presence

Other clients simply listen to the status node. A green dot appears when state is online and disappears when the server flips it to offline on disconnect.

onValue(ref(db, 'status/' + otherUid), (snap) => {
  const online = snap.val()?.state === 'online';
  toggleDot(online);
});

Best Practices

Keep presence reliable and cheap:

Store presence in a shallow, dedicated node
Use server timestamps for last-seen
Account for multiple connections
Always register onDisconnect before going online

Quick Check

Test your understanding of presence.

Recap

You can now build reliable online indicators.

Watch .info/connected for live connection state
Use onDisconnect so the server marks users offline
Register onDisconnect before going online
Use server timestamps and per-connection tracking
Cancel handlers on clean logout

Frequently asked questions

Is the “Detecting Presence & Online Status” lesson free?

Yes — the full text of “Detecting Presence & Online Status” is free to read here on the web, and the Firebase Auth & Realtime Database Apps course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Firebase Auth & Realtime Database Apps course, upgrade to CoddyKit PRO.

What will I learn in “Detecting Presence & Online Status”?

Build live online/offline indicators using Realtime Database presence, onDisconnect handlers, and the special .info/connected node to reflect connection state reliably. You practise Firebase Auth & Realtime Database Apps with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Firebase Auth & Realtime Database Apps?

No prior experience is required. Firebase Auth & Realtime Database Apps on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Detecting Presence & Online Status” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Firebase Auth & Realtime Database Apps lesson?

Yes. Every Firebase Auth & Realtime Database Apps lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Firebase Auth & Realtime Database Apps