Are You Using Firebase Authentication? Write An Auth-Guard With Just 2 LINES Of CODE
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 😷
