Are You Using Firebase Authentication? Write An Auth-Guard With Just 2 LINES Of CODE

Himanshu Saraswat
2 min readApr 13, 2020

Securing your application routes has always been a priority. This is the one building block that you should never skip.

How we used to do it?

You must have definitely seen an app-routing.module.ts file like below, where we assign auth-guard classes to the canActivate guard property to secure our application routes.

These classes eventually end being verbose while defining access according to authentication status & roles. Let’s have a look at the LoginAuthGuard for the route above which ensures users are navigated to appropriate routes.

How we need to do it?

With the impressive combination of Angular & Firebase, you can protect your application routes in almost no time.

The @angular/fire package comes in with two handy pipes i.e. “redirectLoggedInTo(redirect)” & “redirectUnauthorizedTo(redirect)” among many others, which allow you to guard your routes efficiently rather than writing verbose time-consuming auth-guards.

Have a look at the code snippet below to understand how we can leverage this in any application. Explore more on the capabilities of angularFire-router-guards.

Learn to use this approach by building a real-world application to send transactional emails quickly.

Head over to HSDevStudio to see it live in action.

Hope you have learned something new today. Do appreciate with some claps. 👏👏.

Connect with me on Medium or LinkedIn for consultations.

Happy coding. 💻 #staySafe 😷

--

--

Himanshu Saraswat

MEAN Stack Engineer | Google Cloud Enthusiast | Explore Live Projects @ HSDevStudio.com