Session Handling with Firebase/React

This lesson is very crucial for the authentication process. Since we have all the components required to fulfill an authentication round-trip in React, all that is missing now is an overseer to overlook and inspect the session state.

The information of the currently authenticated user needs to be stored and made accessible to other components. This is the point where developers most often start using a state management library like Redux or MobX. In this course, we’ll make do by using the global state instead of state management libraries.

Since we have been building our application under the umbrella of the App component, it will be sufficient to manage the session state in the App component using React’s local state. The App component only needs to keep track of an authenticated user (session).

The App Component and the Session State

If a user is authenticated, i.e. successfully logged into the app, we either store it in the local state and pass the authenticated user object down to all components that might be interested in using it or pass the authenticated user down as null. That way, all components interested in using it can adjust their behavior (e.g. use conditional rendering) based on the session state.

For example, the Navigation component would be interested because it needs to show different options to authenticated as well as non-authenticated users. Another example is that the SignOut component shouldn’t show up for a non-authenticated user (a user that hasn’t signed into the app yet).

$$$$

Implementation

We will implement session handling in the App component in the src/components/App/index.js file. As the component handles the local state now, we will have to refactor it to a class component, which basically manages the local state of an authUser object and then passes it to the Navigation component.