Authentication with Firebase and NgRx

How many times have you implemented authentication management in your projects? Login, logout, registration, password reset… my head goes crazy every time I start a new project that needs those things. It turns out that this applies to almost 100% of the projects I worked on.

But it does not end up here. Are you not planning to add social login in 2020? Please, at least Facebook and Google login are the basic requirement for a good engagement. Do not forget also a possible email verification and account deletion (privacy is important). But remember to hash password, add some salt, hope that your server is not vulnerable to thousands of possible vulnerabilities, and who knows what else you need to consider.

Firebase Auth

Fortunately, we have Firebase Auth, a complete and free auth management, together with other tens of services that you can use, but it is not so uncommon to integrate Firebase only for authentication. I’m not going to talk about how to create a Firebase project ecc, since there are tens of great articles out there. If you are using Angular and you want to use Firebase auth check out @xtream/firebase-ngrx-user-management

Firebase Auth and NgRx

NgRx is more and more used for small and large applications as a state management pattern enriched by RxJS; firebase-ngrx-user-management is a simple utility library that hides the entire user auth management mentioned earlier in an NgRx module with actions, reducers, selectors and effects. It uses @angular/fire, an official wrapper of firebase sdk to interact with firebase auth services.

Installation and setup

Install the library using: npm i @xtream/firebase-ngrx-user-management

You also need to install @angular/fire (the firebase sdk wrapper) and initialize it as follows (pick your firebase config in the project console):

After that, in your AppComponent add this:

This action will be handled by an effect that checks if the user is already logged, resulting in a dispatch of Authenticated action (with user data) or a NotAuthenticated. The user is synced in the auth part of the state, composed like in the image below:

and you can select it using the getUserState selector exposed.

To lock your route you can create a guard like this:

Library API

We can divide the functionalities in:

• authentication: Login, Logout, Signup
• emails actions: Recover Password, recover email, and email verification
• providers management: link Google, FaceBook, email and phone number together

You can find actions to dispatch and selectors to get info about the request status/user info. Effects will interact with the firebase sdk intercepting your action, and handling the actual request.

The github repo contains the list of all the actions available to handle everything you need.

Ionic integration

What if you have to deliver the mobile version as well, but reusing your codebase? Good news there’s the ionic version of the library . It allows you to easily interact with google and Facebook native sdk for a fast user login

Thank you for reading my article. If you have any question or just some feedback about the library feel free to write here or reach me on linkedin.