Show Protected Pages only to Authenticated Users with AngularFire Authentication Guard

Instructor: [0:00] Now, we have the ability to log in users into an application, but what happens if I clear browser data and after that I try to go to the tasks page, I'm still going to be able to go there because we have no way of protecting this route right now.

[0:20] We can and should protect our application's routes depending on our business logic. Right now, we are going to say that our task module, this is the tasks page and the detail page for a specific task, needs to be protected by authentication.

[0:37] It's going to be a simple protection, so we are not going to check roles or anything like that, but we are going to check that only authenticated users can navigate to the tasks page. For that, we can add an authentication route to a routes file.

[0:55] Usually with Angular, you can create these authentication guards, but AngularFire has already one that works by default and it's called AuthGuard. We can import that one from angular/fire/auth-guard.

[1:10] If I reload the page and save here, when the user tries to navigate to the home page, I'm going to get a white screen because Angular tried to load this route, but since we do not meet the criteria here because there is no authenticated user, it can't load the route.

[1:28] As a good practice, we can add a redirect URL so that when a user that's not authenticated tries to go to this route, the application instead redirects them to the login page. For that, AngularFire has a helper function called redirectUnauthorizedTo.

[1:47] We can import it here also from AngularFire AuthGuard and here, we are going to create a function called redirectUnauthorizedLoginTo. Here, redirectUnauthorizedTo takes an array of routes. We are going to pass the auth/login route.

[2:11] When I save and reload the application, you see that nothing happens again and it's because we have to let this route know that it needs to use that redirectUnauthorized function.

[2:22] For that, we can pass data and we can say that the AuthGuard pipe is our redirectUnauthorizedToLogin function. This AuthGuard pipe is a variable that AngularFire reads from here from data like that's all work that AuthGuard is doing for us.

[2:48] When I go here now and I reload the application, you see that it brings me to login. If I go to the URL, let's delete that and directly type tasks, you see that it takes us back to login.