Firebase authentication using react hooks

Code Example: https://github.com/brunobraga95/ultimate-firebase-authentication-react-hooks/tree/master

Hello Everyone, its Bruno here.
For the last few months I have been working on a side project with a friend. Because of some prior experience with firebase and react I decided to choose those two as part of my stack. Specially, I decided to use firebase to handle authentication.

After spending some time with it, I came up with a very good set up that I would like to share with you all. It is an encapsulation of the most common methods provided by firebase, which will make ramping up your future projects much easier. We will create a provider that will always give you the current state of the logged in user and update your component every time it changes, it is very handy =)

Let's jump in!

Here is what you should expect to have after this post:
A plug and play set up that will notify your application about the user authentication status being updated.

1. Facebook, Google and email helper authentication methods.
2. Account linking between Facebook, Google and Email login.
3. Update email address.
4. Send email verification helper method.

First let us create our main file, firebase.js which is responsible for encapsulating and abstracting interaction with firebase.

firebase.js

The file above shows our main class. It encapsulates and handles much of the logic around authentication, handling errors and providing useful log messages.

As you can see, a lot of its methods receive a setAuthState function param. This will be introduced in a second, but in a nutshell it is a React Hook state. Calling this method updates this state, ultimately triggering a rendering of every component that is interested in the authentication context.

Now let us talk more about where this authentication state is defined and how one can use it.
AuthStateContext.js

There are two main points to make about the provider above:

1. It is another layer of encapsulation around the class introduced in Firebase.js. The difference here is that now we are talking about a Provider that will expose the firebase methods to our whole application.
2. It introduces the AuthState hooks value (i.e the method we call in the Firebase.js file to update the caller). Which has both the current authentication state and the user details returned by firebase.

In order to finally use the functionalities we created above, we need to inject the AuthStateProvider created in AuthStateContext.js in the root file of our application. Since I am using create react app, this file is called App.js.

And that is it

const { authState } = useAuthStateContext();

The call above will always give you the state of the current user and will re-render the component every time it changes, making it much easier to handle the user life cycle, getting private routes right, updating the view on login and logout, etc.

hope you liked it, feedbacks are more than welcomed

twitter: @onurbraga
instagram: @brnbraga

cheers!!!

Comments

[Roei Finkelstein]

Thanks for a great post. Just a little fix to anyone using Firebase v9 and above.
To make this work, you need to change all the imports from:
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/analytics";
import "firebase/database";
import "firebase/firestore";

To:
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/analytics";
import "firebase/compat/database";
import "firebase/compat/firestore";

[Yevhen Polyushchenkov]

Genius!

[Albert]

Thanks! Helped me to solve my problem with firebase integration into react 😁