Auth state observer in Firebase - Step-by-Step Execution

Process Flow - Auth state observer

Start App

↓

Attach Auth State Observer

↓

User Signs In or Out

↓

Observer Detects Change

↓

Run Callback with User Info or Null

↓

Update UI or State Accordingly

↓

Wait for Next Auth Change

The app starts and attaches an observer to watch authentication changes. When a user signs in or out, the observer runs a callback with the current user info or null, allowing the app to update the UI.

Execution Sample

Firebase

firebase.auth().onAuthStateChanged(user => {
  if (user) {
    console.log('User signed in:', user.uid);
  } else {
    console.log('No user signed in');
  }
});

This code listens for authentication state changes and logs whether a user is signed in or not.

Process Table

Step	Event	User State	Callback Action	Output
1	App starts	No user signed in	Callback runs with null	Logs 'No user signed in'
2	User signs in	User object present	Callback runs with user	Logs 'User signed in: <uid>'
3	User signs out	User is null	Callback runs with null	Logs 'No user signed in'
4	No further auth changes	User state unchanged	No callback	Idle, waiting

💡 Execution waits indefinitely for auth state changes; no exit unless app closes.

Status Tracker

Variable	Start	After Step 2	After Step 3	Final
user	null	{uid: 'abc123'}	null	null
callback output	none	Logs user signed in	Logs no user signed in	waiting

Key Moments - 3 Insights

Why does the callback run immediately after attaching the observer even if no user signs in?

The observer triggers once on attachment to provide the current auth state, as shown in step 1 and 2 of the execution_table.

What does the 'user' variable contain when no one is signed in?

It is null, indicating no authenticated user, as shown in steps 1 and 3 in the execution_table.

Does the observer stop running after one auth change?

No, it stays active waiting for any future auth changes, as explained in the exit_note and step 4.

Visual Quiz - 3 Questions

Look at the execution_table, what is the 'user' value at Step 2?

A null

B undefined

C {uid: 'abc123'}

D empty string

💡 Hint

Check the 'User State' column at Step 2 in the execution_table.

At which step does the callback log 'No user signed in'?

A Step 2

B Step 3

C Step 1

D Step 4

💡 Hint

Look for the 'Callback Action' and 'Output' columns in the execution_table.

If the user never signs out, what happens at Step 4?

A No callback runs, waiting for changes

B Callback runs with null

C Callback runs with user object

D Observer detaches automatically

💡 Hint

Refer to the 'Exit Note' and Step 4 in the execution_table.

Concept Snapshot

Auth state observer listens for sign-in/out events.
Attach with onAuthStateChanged(callback).
Callback runs immediately with current user or null.
Updates app UI based on user presence.
Observer stays active until app closes.

Full Transcript

When your app starts, it attaches an observer to watch for authentication changes. This observer runs a callback right away with the current user state, which can be a user object if signed in or null if not. When the user signs in or out later, the observer detects this change and runs the callback again with the updated user info. This lets your app update the interface or state to match whether a user is signed in or not. The observer keeps running, waiting for any future sign-in or sign-out events until the app closes.