Firebase & AngularFire In Depth

Author: Your Name

src/app/app-routing.module.ts

@@ -5,49 +5,70 @@ import {AboutComponent} from './about/about.component';
 import {CourseComponent} from './course/course.component';
 import {LoginComponent} from './login/login.component';
 import {CreateCourseComponent} from './create-course/create-course.component';
-import {AngularFireAuthGuard, hasCustomClaim, redirectUnauthorizedTo} from '@angular/fire/auth-guard';
+import {AngularFireAuthGuard, customClaims, hasCustomClaim, redirectUnauthorizedTo}
+    from '@angular/fire/auth-guard';
 import {CreateUserComponent} from './create-user/create-user.component';
 import {CourseResolver} from "./services/course.resolver";
+import {pipe} from "rxjs";
+import {map} from "rxjs/operators";
 
-const routes: Routes = [
-  {
-    path: '',
-    component: HomeComponent
-  },
-  {
-    path: 'create-course',
-    component: CreateCourseComponent
+const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['login']);
 
-  },
-  {
-    path: 'create-user',
-    component: CreateUserComponent
+const adminOnly = () => hasCustomClaim("admin");
 
-  },
-  {
-    path: 'about',
-    component: AboutComponent
-  },
-  {
-    path: 'login',
-    component: LoginComponent
-  },
-  {
-    path: 'courses/:courseUrl',
-    component: CourseComponent,
-    resolve: {
-        course: CourseResolver
+const routes: Routes = [
+    {
+        path: '',
+        component: HomeComponent,
+        canActivate: [AngularFireAuthGuard],
+        data: {
+            authGuardPipe: redirectUnauthorizedToLogin
+        }
+    },
+    {
+        path: 'create-course',
+        component: CreateCourseComponent,
+        canActivate: [AngularFireAuthGuard],
+        data: {
+            authGuardPipe: adminOnly
+        }
+    },
+    {
+        path: 'create-user',
+        component: CreateUserComponent,
+        canActivate: [AngularFireAuthGuard],
+        data: {
+            authGuardPipe: adminOnly
+        }
+    },
+    {
+        path: 'about',
+        component: AboutComponent
+    },
+    {
+        path: 'login',
+        component: LoginComponent
+    },
+    {
+        path: 'courses/:courseUrl',
+        component: CourseComponent,
+        resolve: {
+            course: CourseResolver
+        },
+        canActivate: [AngularFireAuthGuard],
+        data: {
+            authGuardPipe: redirectUnauthorizedToLogin
+        }
+    },
+    {
+        path: '**',
+        redirectTo: '/'
     }
-  },
-  {
-    path: '**',
-    redirectTo: '/'
-  }
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+    imports: [RouterModule.forRoot(routes)],
+    exports: [RouterModule]
 })
 export class AppRoutingModule {
 }