René's URL Explorer Experiment

Title: feat(): Angularfire auth guards by jamesdaniels · Pull Request #2016 · angular/angularfire · GitHub

Open Graph Title: feat(): Angularfire auth guards by jamesdaniels · Pull Request #2016 · angular/angularfire

X Title: feat(): Angularfire auth guards by jamesdaniels · Pull Request #2016 · angular/angularfire

Description: Checklist Issue number for this PR: #nnn (required) Docs included?: (yes/no; required for all API/functional changes) Test units included?: (yes/no; required) In a clean directory, yarn install, yarn test run successfully? (yes/no; required) Description Allow developers to protect routes in their Angular application using Firebase authentication. TODOs Get test coverage Polish the documentation Code sample Basic example import { AngularFireAuthGuard } from '@angular/fire/auth-guard'; export const routes: Routes = [ { path: '', component: AppComponent }, { path: 'items', component: ItemListComponent, canActivate: [AngularFireAuthGuard] }, ] Use our pre-built pipes for common tests import { AngularFireAuthGuard, hasCustomClaim, redirectUnauthorizedTo, redirectLoggedInTo } from '@angular/fire/auth-guard'; const adminOnly = hasCustomClaim('admin'); const redirectUnauthorizedToLogin = redirectUnauthorizedTo(['login']); const redirectLoggedInToItems = redirectLoggedInTo(['items']); const belongsToAccount = (next) => hasCustomClaim(`account-${next.params.id}`); export const routes: Routes = [ { path: '', component: AppComponent }, { path: 'login', component: LoginComponent, canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectLoggedInToItems }}, { path: 'items', component: ItemListComponent, canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectUnauthorizedToLogin }, { path: 'admin', component: AdminComponent, canActivate: [AngularFireAuthGuard], data: { authGuardPipe: adminOnly }}, { path: 'accounts/:id', component: AdminComponent, canActivate: [AngularFireAuthGuard], data: { authGuardPipe: belongsToAccount }} ]; Increase readability with our canActivate helper import { canActivate } from '@angular/fire/auth-guard'; export const routes: Routes = [ { path: '', component: AppComponent }, { path: 'login', component: LoginComponent, ...canActivate(redirectLoggedInToItems) }, { path: 'items', component: ItemListComponent, ...canActivate(redirectUnauthorizedToLogin) }, { path: 'admin', component: AdminComponent, ...canActivate(adminOnly) }, { path: 'accounts/:id', component: AdminComponent, ...canActivate(belongsToAccount) } ]; Compose your own pipes import { pipe, of } from 'rxjs'; import { map, switchMap } from 'rxjs/operators'; import { customClaims } from '@angular/fire/auth-guard'; const editorOnly = pipe(customClaims, map(claims => claims.role === "editor")); const redirectToProfileEditOrLogin = map(user => user ? ['profiles', user.uid, 'edit'] : ['login']); const onlyAllowSelf = (next) => map(user => !!user && next.params.userId === user.uid); const accountAdmin = (next) => pipe(customClaims, map(claims => claims[`account-${next.params.accountId}-role`] === "admin"));

Open Graph Description: Checklist Issue number for this PR: #nnn (required) Docs included?: (yes/no; required for all API/functional changes) Test units included?: (yes/no; required) In a clean directory, yarn install, y...

X Description: Checklist Issue number for this PR: #nnn (required) Docs included?: (yes/no; required for all API/functional changes) Test units included?: (yes/no; required) In a clean directory, yarn install, y...

Opengraph URL: https://github.com/angular/angularfire/pull/2016

X: @github

direct link

Domain: github.com

Links:

Viewport: width=device-width