Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Request] authCanMatchGuard + helpers #3544

Open
celestius0 opened this issue Jun 1, 2024 · 1 comment
Open

[Feature Request] authCanMatchGuard + helpers #3544

celestius0 opened this issue Jun 1, 2024 · 1 comment

Comments

@celestius0
Copy link

Feature Request - authCanMatchGuard + helpers

Description

The current auth-guard provided with angular fire is still using the now deprecated class based approach and targets the canActivate property on route definitions.

To freshen things up a bit, I have generated a new guard which utilizes the new functional approach and targets the newer canMatch route definition property. This has the added benefit of preventing components from being unnecessarily loaded which seems to work well and should be more performant.

I based the new code off of the previous implementation documented here. You will notice similarities with the previous guard code here. Would love to see this incorporated into the AngularFire package but honestly I'm too lazy to write tests 😅 so if someone would be interested in owning that and collaborating, I'd be happy to open up a PR.

Code

auth-can-match.guard.ts

import { inject } from '@angular/core';
import { Auth, user, User } from '@angular/fire/auth';
import { CanMatchFn, Route, Router, UrlSegment } from '@angular/router';
import { Observable, of, pipe, UnaryFunction } from 'rxjs';
import { map, switchMap, take } from 'rxjs/operators';

/** Utility type to allow for adding an additional property to the CanMatchFn type */
type ExtendFn<BaseFnT, AddPT extends any[]> = BaseFnT extends (...a: infer P) => infer R
  ? (...a: [...P, ...AddPT]) => R
  : never

export type AuthPipe = UnaryFunction<Observable<User | null>, Observable<boolean | string | any[]>>;
export const authCanMatchGuard: ExtendFn<CanMatchFn, [authPipe: AuthPipe]> = (route, segments, authPipe?) => {
  const auth = inject(Auth)
  const user$ = user(auth)
  const router = inject(Router)

  const authPipeFactory = authPipe
    ? authPipe
    : loggedIn

  return user$
    .pipe(
      take(1),
      authPipeFactory,
      map(can => {
        if (typeof can === 'boolean') {
          return can;
        } else if (Array.isArray(can)) {
          return router.createUrlTree(can)
        } else {
          return router.parseUrl(can)
        }
      })
    )
}

/** canMatch helper to be used with spread operator to make route definitions more concise.
 * @example
 * const redirectUnauthorizedToLogin = redirectUnauthorizedTo(['login'])
 * ...
 * export const routes: Routes = [
 *  {
 *    ...authCanMatch(redirectUnauthorizedToLogin)
 *    path: 'authProtectedRoute'
 *  },
 */
export const authCanMatch = (authPipe: AuthPipe) =>
  ({ canMatch: [(route: Route, segments: UrlSegment[]) => authCanMatchGuard(route, segments, authPipe)] })

/** Predefined auth guard helper pipes. So friendly & helpful 😍 */
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) => AuthPipe =
  // eslint-disable-next-line no-prototype-builtins
  (claim) => pipe(customClaims, map(claims => claims.hasOwnProperty(claim)))
export const redirectUnauthorizedTo: (redirect: string | any[]) => AuthPipe =
  (redirect) => pipe(loggedIn, map(loggedIn => loggedIn || redirect))
export const redirectLoggedInTo: (redirect: string | any[]) => AuthPipe =
  (redirect) => pipe(loggedIn, map(loggedIn => loggedIn && redirect || true))
@google-oss-bot
Copy link

This issue does not seem to follow the issue template. Make sure you provide all the required information.

@celestius0 celestius0 changed the title Feature Request - authCanMatchGuard + helpers [Feature Request] authCanMatchGuard + helpers Jun 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants