fix(app-routing): use custom auth guards to implement redirect URLs

Until angular/angularfire#2448 is merged, query parameters can't currently be specified as arguments for `redirect*To` methods from the AngularFire auth guard module.

Author: EdricChan03

src/app/app-routing.module.ts

@@ -1,4 +1,3 @@
-import { canActivate, redirectUnauthorizedTo } from '@angular/fire/auth-guard';
 import { NgModule } from '@angular/core';
 import { Route, RouterModule } from '@angular/router';
 import { AboutComponent } from './about/about.component';
@@ -13,9 +12,9 @@ import { TipsComponent } from './tips/tips.component';
 import { TodoArchivedComponent, TodoDashboardComponent, TodoHomeComponent, TodoProjectComponent } from './todo';
 import { TodoOutletComponent } from './todo/todo-outlet/todo-outlet.component';
 import { UserViewerComponent } from './user-viewer/user-viewer.component';
-import { DevelopmentGuard } from './development.guard';
 
-const redirectUnauthorizedToLogin = redirectUnauthorizedTo(['login']);
+import { AuthGuard } from './auth.guard';
+import { DevelopmentGuard } from './development.guard';
 
 // The routes
 const routes: Route[] = [
@@ -24,11 +23,11 @@ const routes: Route[] = [
   // Account
   { path: 'account', redirectTo: '/settings/account' },
   // Chatrooms! Coming soon.
-  { path: 'chats', component: ChatsComponent, ...canActivate(redirectUnauthorizedToLogin) },
-  { path: 'chats/explore', component: ChatExploreComponent, ...canActivate(redirectUnauthorizedToLogin) },
-  { path: 'chats/:id', component: ChatViewerComponent, ...canActivate(redirectUnauthorizedToLogin) },
+  { path: 'chats', component: ChatsComponent, canActivate: [AuthGuard] },
+  { path: 'chats/explore', component: ChatExploreComponent, canActivate: [AuthGuard] },
+  { path: 'chats/:id', component: ChatViewerComponent, canActivate: [AuthGuard] },
   // Dashboard
-  { path: 'dashboard', component: DashboardComponent, ...canActivate(redirectUnauthorizedToLogin) },
+  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
   // Downloads for the app. Currently a bit empty
   { path: 'downloads', component: AppDownloadsComponent },
   // Login page
@@ -42,7 +41,7 @@ const routes: Route[] = [
   // Tips page.
   { path: 'tips', component: TipsComponent },
   {
-    path: 'todo', component: TodoOutletComponent, ...canActivate(redirectUnauthorizedToLogin), children: [
+    path: 'todo', component: TodoOutletComponent, canActivate: [AuthGuard], children: [
       // All todos
       { path: 'home', component: TodoHomeComponent },
       // Not working as of now

src/app/auth.guard.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { AngularFireAuth } from '@angular/fire/auth';
+import { CanActivate, ActivatedRouteSnapshot, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { Observable } from 'rxjs';
+import { map, take } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+  constructor(private afAuth: AngularFireAuth, private router: Router) {}
+
+  canActivate(
+    _next: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    return this.afAuth.user.pipe(
+      take(1),
+      map(user => !!user),
+      map(loggedIn => !loggedIn ? this.router.createUrlTree(['/login'], { queryParams: { redirectUrl: state.url }}) : loggedIn)
+    );
+  }
+}