The Clear Concept of onAuthStateChanged

Photo by Lautaro Andreani on Unsplash

Confused about onAuthStateChanged!?!?! You are a beginner and just exploring Firebase authentication system. Other things you have understood as these are only following the steps from the documentation, but you are so confused about the working process of onAuthStateChanged. Is this your situation?

If yes, then you are in the right way… Actually, I have searched a lot but got nothing in a simple & explanatory way about this concept. So, I will try to explain it in my own way & using some real life examples.

Things to explore ->

• How to use it?
• Why do you need to unsubscribe to `onAuthStateChanged` in firebase?
• Analogy 1 & Analogy 2
• What is it?

How to use onAuthStateChanged?

There are two ways for API Call Interaction:

1. Triggering an event by clicking a button…etc
2. useEffect

Since onAuthStateChanged is a side-effect and this function needs to be called without triggering any event, it needs to be incorporated inside the useEffect hook.

The state of the user comes from firebase authentication and to get that we need to first:

• Step-1: Setup a listener to observe changes in auth state in the firebase auth provider

The onAuthStateChanged takes two parameters:

a) auth — provides an Auth instance

b) observer- it is a callback function. It gets invoked immediately after registering the onAuthStateChanged observer with the current authentication state and whenever the authentication state changes.

• Step-2: To start listening to auth state changes when our application mounts, we need do this with a useEffect hook:

• Step-3: Finally, the onAuthStateChanged() function returns the unsubscribe function to unregister the onAuthStateChanged observer. We save this function in a variable and name it unsubscribe. At the end, we return this unsubscribe function for cleanup to avoid memory leaks.

Why do you need to unsubscribe to `onAuthStateChanged` in firebase?

Calling onAuthStateChanged() “adds an observer/listener for changes to the user’s sign-in state” AND returns an unsubscribe function that can be called to cancel the listener.

So the goal of the following pattern is to listen only once for changes to the user’s sign-in state. The first time the listener is triggered it calls the unsubscribe function, so it doesn’t listen anymore.

• You should unsubscribe to avoid memory leaks.
• When you initialise onAuthStateChanged() you create a listener. If you don’t unsubscribe then this listener will continue to listen even after you stop using it. This will waste memory.
• In order to unsubscribe you need something to unsubscribe from. This is why you assign the listener to a variable. This allows you to refer to the variable when you want to unsubscribe.

Analogy 1:

In this analogy, the onAuthStateChanged function is like the doorbell.

The doorbell is installed on the wall and is waiting for someone to ring it, just like how the onAuthStateChanged function is waiting for a change in the authentication state of the user.

When someone, let’s say person y, rings the doorbell, it alerts person x, who may be busy doing their own thing. Similarly, when the authentication state of the user changes, the onAuthStateChanged function is triggered and alerts the app/ website to the change.

Person x then goes to the door, opens it, and lets person y in. This is similar to how the app responds to the onAuthStateChanged function by updating its user interface and behaviour based on the user’s authentication state.

After person y leaves, person x closes the door and may put up a photo frame in place of the doorbell. Similarly, after the app has responded to the onAuthStateChanged function and updated its user interface and behaviour, it may perform other actions or display other content, like the photo frame.

Analogy 2:

Situation: Someone(Mr. X) has appointed a spy on a person(Mr. Y).

The spy follows that person (Mr. Y) altime & gives updates about him/ her. The spy stops collecting information when all of the necessary information is collected.

Analogy with onAuthStateChanged():

Someone (Mr. X) => webpage/ web page after refresh / web page from another browser.

Spy => onAuthStateChanged() observer/ cleanup function

The person (Mr. Y) => logged in user / signed out user / registered user.

So, What is onAuthStateChanged?

• onAuthStateChanged allows us to subscribe to the users current authentication state, and receive an event whenever that state changes.
• onAuthStateChanged adds an observer for changes to the user’s sign-in state. The observer triggers when users sign in, sign out.
• The onAuthStateChanged method also returns an unsubscriber function which allows us to stop listening for events whenever the hook is no longer in use.
• Calling onAuthStateChanged() “adds an observer/listener for changes to the user’s sign-in state” AND returns an unsubscribe function that can be called to cancel the listener.

Thank you for reading until the end. Please consider following the writer and this publication. Visit Stackademic to find out more about how we are democratizing free programming education around the world.