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

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

Closes #2287, #2144

* refactor(auth-guard): make ternary easier to read

Co-authored-by: James Daniels <[email protected]>

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

@@ -14,7 +14,7 @@ import {
 } from '@angular/fire';
 
 export type AuthPipeGenerator = (next: ActivatedRouteSnapshot, state: RouterStateSnapshot) => AuthPipe;
-export type AuthPipe = UnaryFunction<Observable<firebase.User|null>, Observable<boolean|any[]>>;
+export type AuthPipe = UnaryFunction<Observable<firebase.User|null>, Observable<boolean|string|any[]>>;
 
 export const loggedIn: AuthPipe = map(user => !!user);
 
@@ -54,14 +54,23 @@ export class AngularFireAuthGuard implements CanActivate {
     return this.authState.pipe(
       take(1),
       authPipeFactory(next, state),
-      map(can => typeof can === 'boolean' ? can : this.router.createUrlTree(can as any[]))
+      map(can => {
+        if (typeof can === 'boolean') {
+          return can;
+        } else if (Array.isArray(can)) {
+          return this.router.createUrlTree(can);
+        } else {
+          // TODO(EdricChan03): Add tests
+          return this.router.parseUrl(can);
+        }
+      })
     );
   }
 
 }
 
 export const canActivate = (pipe: AuthPipeGenerator) => ({
-    canActivate: [ AngularFireAuthGuard ], data: { authGuardPipe: pipe }
+  canActivate: [ AngularFireAuthGuard ], data: { authGuardPipe: pipe }
 });
 
 
@@ -71,7 +80,7 @@ export const emailVerified: AuthPipe = map(user => !!user && user.emailVerified)
 export const customClaims = pipe(idTokenResult, map(idTokenResult => idTokenResult ? idTokenResult.claims : []));
 export const hasCustomClaim: (claim: string) => AuthPipe =
   (claim) => pipe(customClaims, map(claims =>  claims.hasOwnProperty(claim)));
-export const redirectUnauthorizedTo: (redirect: any[]) => AuthPipe =
+export const redirectUnauthorizedTo: (redirect: string|any[]) => AuthPipe =
   (redirect) => pipe(loggedIn, map(loggedIn => loggedIn || redirect));
-export const redirectLoggedInTo: (redirect: any[]) => AuthPipe =
+export const redirectLoggedInTo: (redirect: string|any[]) => AuthPipe =
   (redirect) => pipe(loggedIn, map(loggedIn => loggedIn && redirect || true));