feat(auth-guard): add support for specifying a string to redirect to

Closes #2287, #2144

Author: EdricChan03

docs/auth/router-guards.md

@@ -80,7 +80,7 @@ import { customClaims } from '@angular/fire/auth-guard';
 
 // This pipe will only allow users with the editor role to access the route
 // { path: 'articles/:id/edit', component: ArticleEditComponent, ...canActivate(editorOnly) }
-const editorOnly = () => pipe(customClaims, map(claims => claims.role === "editor"));
+const editorOnly = () => pipe(customClaims, map(claims => claims.role === 'editor'));
 ```
 
 ### Using router state
@@ -98,5 +98,5 @@ const onlyAllowSelf = (next) => map(user => !!user && next.params.userId === use
 
 // Only allow navigation to the route if the user has a custom claim matching  :accountId
 // { path: 'accounts/:accountId/billing', component: BillingDetailsComponent, ...canActivate(accountAdmin) }
-const accountAdmin = (next) => pipe(customClaims, map(claims => claims[`account-${next.params.accountId}-role`] === "admin"));
+const accountAdmin = (next) => pipe(customClaims, map(claims => claims[`account-${next.params.accountId}-role`] === 'admin'));
 ```

src/auth-guard/auth-guard.ts

@@ -1,12 +1,12 @@
 import { Injectable, Inject, Optional, NgZone } from '@angular/core';
 import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
 import { Observable, of, pipe, UnaryFunction } from 'rxjs';
-import { map, switchMap, take, observeOn, shareReplay } from 'rxjs/operators'
+import { map, switchMap, take, observeOn, shareReplay } from 'rxjs/operators';
 import { User } from 'firebase/app';
 import { ɵAngularFireSchedulers, FirebaseOptions, FirebaseAppConfig, FIREBASE_OPTIONS, FIREBASE_APP_NAME, ɵfirebaseAppFactory } from '@angular/fire';
 
 export type AuthPipeGenerator = (next: ActivatedRouteSnapshot, state: RouterStateSnapshot) => AuthPipe;
-export type AuthPipe = UnaryFunction<Observable<User|null>, Observable<boolean|any[]>>;
+export type AuthPipe = UnaryFunction<Observable<User|null>, Observable<boolean|string|any[]>>;
 
 @Injectable({
   providedIn: 'any'
@@ -16,8 +16,8 @@ export class AngularFireAuthGuard implements CanActivate {
   authState: Observable<User|null>;
 
   constructor(
-    @Inject(FIREBASE_OPTIONS) options:FirebaseOptions,
-    @Optional() @Inject(FIREBASE_APP_NAME) nameOrConfig:string|FirebaseAppConfig|null|undefined,
+    @Inject(FIREBASE_OPTIONS) options: FirebaseOptions,
+    @Optional() @Inject(FIREBASE_APP_NAME) nameOrConfig: string|FirebaseAppConfig|null|undefined,
     zone: NgZone,
     private router: Router
   ) {
@@ -40,21 +40,23 @@ export class AngularFireAuthGuard implements CanActivate {
     return this.authState.pipe(
       take(1),
       authPipeFactory(next, state),
-      map(can => typeof can == "boolean" ? can : this.router.createUrlTree(<any[]>can))
+      map(can => typeof can === 'boolean' ? can :
+        Array.isArray(can) ? this.router.createUrlTree(can) : this.router.parseUrl(can)
+      )
     );
   }
 
 }
 
 export const canActivate = (pipe: AuthPipeGenerator) => ({
-    canActivate: [ AngularFireAuthGuard ], data: { authGuardPipe: pipe }
+  canActivate: [ AngularFireAuthGuard ], data: { authGuardPipe: pipe }
 });
 
 export const loggedIn: AuthPipe = map(user => !!user);
 export const isNotAnonymous: AuthPipe = map(user => !!user && !user.isAnonymous);
 export const idTokenResult = switchMap((user: User|null) => user ? user.getIdTokenResult() : of(null));
 export const emailVerified: AuthPipe = map(user => !!user && user.emailVerified);
 export const customClaims = pipe(idTokenResult, map(idTokenResult => idTokenResult ? idTokenResult.claims : []));
-export const hasCustomClaim = (claim:string) => pipe(customClaims, map(claims =>  claims.hasOwnProperty(claim)));
-export const redirectUnauthorizedTo = (redirect: any[]) => pipe(loggedIn, map(loggedIn => loggedIn || redirect));
-export const redirectLoggedInTo = (redirect: any[]) =>  pipe(loggedIn, map(loggedIn => loggedIn && redirect || true));
+export const hasCustomClaim = (claim: string) => pipe(customClaims, map(claims =>  claims.hasOwnProperty(claim)));
+export const redirectUnauthorizedTo = (redirect: string|any[]) => pipe(loggedIn, map(loggedIn => loggedIn || redirect));
+export const redirectLoggedInTo = (redirect: string|any[]) =>  pipe(loggedIn, map(loggedIn => loggedIn && redirect || true));