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

jamesdaniels · 2019-02-22T21:00:05Z

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"));

jamesdaniels · 2019-02-23T00:13:53Z

@davideast feel free to start poking at this. Going to work on the test coverage and documentation in the meantime. Targeting 5.2 release.

jamesdaniels · 2019-05-08T21:57:51Z

FYI this has been released for testing on @next as of 5.2.0-beta.3

hiepxanh · 2019-05-13T13:13:11Z

wow, so convinent :D thank you so much

jamesdaniels · 2019-05-20T20:01:37Z

Assigning @davideast for API review. @jhuleatt if you could give a quick code review.

jamesdaniels · 2019-05-20T20:02:18Z

FYI tests and docs need more work.

docs/auth/router-guards.md

src/auth-guard/auth-guard.ts

jhuleatt · 2019-05-21T22:35:22Z

src/auth-guard/auth-guard.spec.ts

+
+    it('should be injectable', () => {
+        expect(router).toBeTruthy();
+    });


here's a StackOverflow answer with suggestions on ways to test auth guards. But maybe that's overkill and we just have a dummy user object and quick happy path tests for the different built-in pipes for now?

Maybe also spy on the AngularFireAuthGuard pipe to make sure it calls the pipe provided to it with the data provided to it?

I think I'll have to put together a proper E2E for this, something I'm working on on another branch. Think I'll punt on building more robust tests for now & take it as an action item.

docs/auth/router-guards.md

davideast

I was thinking of stronger names for these, but honestly I couldn't come up with something that much better. LGTM.

svzi · 2019-05-23T16:53:43Z

Any idea when there will be a new release with the merged PR?

jamesdaniels · 2019-05-24T07:40:32Z

@svzi you can give this a try now with the beta 4 release. npm i --save @angular/fire@next.

I'm hoping to release 5.2 stable early next week.

svzi · 2019-05-24T12:11:55Z

@jamesdaniels Thanks a lot! But it seems like I'm missing something, or there is something not working right now. I can't compile it (based on the provided examples):

ERROR in node_modules/@angular/fire/auth-guard/auth-guard.d.ts(11,5): error TS2416: Property 'canActivate' in type 'AngularFireAuthGuard' is not assignable to the same property in base type 'CanActivate'.
  Type '(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) => Observable<boolean | UrlTree>' is not assignable to type '(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree>'.
    Type 'Observable<boolean | UrlTree>' is not assignable to type 'boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree>'.

jamesdaniels · 2019-05-24T17:02:22Z

@svzi which version of typescript / Ng?

svzi · 2019-05-24T20:59:40Z

@jamesdaniels Angular 7.2.0 (CLI 7.3.9) and TypeScript 3.2.2.

jamesdaniels · 2019-05-24T21:21:41Z

I'll look into this. Will track here #2086

svzi · 2019-05-24T21:22:40Z

Thanks a lot, appreciate your support!

jamesdaniels added 5 commits November 30, 2018 21:00

feat(auth): AngularFireAuthGuard

bb720d7

docs(auth): AngularFireAuthGaurd

fd99984

feat(auth): Adding hlpers for common auth guard use-cases

67389a1

Starting server auth work + refactored the guard

da76d0a

Cleanup maps v generators

90bda62

jamesdaniels added this to the 5.2.0 milestone Feb 22, 2019

googlebot added the cla: yes label Feb 22, 2019

jamesdaniels added 2 commits February 22, 2019 15:51

Fix packaging

31118b8

Fix doc link and clarify title

e7c21a9

jamesdaniels assigned davideast and unassigned davideast Feb 23, 2019

jamesdaniels requested a review from davideast February 23, 2019 00:11

jamesdaniels added the pr_state: WIP label Feb 28, 2019

jamesdaniels requested a review from jhuleatt May 20, 2019 00:48

jamesdaniels changed the title ~~WIP Angularfire auth guards~~ feat(): Angularfire auth guards May 20, 2019

jamesdaniels added 2 commits May 19, 2019 22:31

Merged master.

3b93c79

Removing dependencies accidently brought in with ssr auth commit

bcff88e

jamesdaniels assigned davideast May 20, 2019

jamesdaniels assigned jhuleatt May 20, 2019

jhuleatt reviewed May 21, 2019

View reviewed changes

davideast approved these changes May 22, 2019

View reviewed changes

jamesdaniels added 4 commits May 22, 2019 15:34

Merged master.

5def10b

Working on the docs more

dffefa0

More docs

fe2a9f7

More docs

1335cb4

jamesdaniels merged commit e32164d into master May 23, 2019

jamesdaniels deleted the auth-gaurd branch May 23, 2019 00:03

jamesdaniels mentioned this pull request May 24, 2019

Discussion: 5.2 release #2086

Closed

Conversation

jamesdaniels commented Feb 22, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Checklist

Description

TODOs

Code sample

Basic example

Use our pre-built pipes for common tests

Increase readability with our canActivate helper

Compose your own pipes

Uh oh!

jamesdaniels commented Feb 23, 2019

Uh oh!

jamesdaniels commented May 8, 2019

Uh oh!

hiepxanh commented May 13, 2019

Uh oh!

jamesdaniels commented May 20, 2019

Uh oh!

jamesdaniels commented May 20, 2019

Uh oh!

Uh oh!

Uh oh!

jhuleatt May 21, 2019

Choose a reason for hiding this comment

Uh oh!

jhuleatt May 21, 2019

Choose a reason for hiding this comment

Uh oh!

jamesdaniels May 23, 2019

Choose a reason for hiding this comment

Uh oh!

Uh oh!

davideast left a comment

Choose a reason for hiding this comment

Uh oh!

svzi commented May 23, 2019

Uh oh!

jamesdaniels commented May 24, 2019

Uh oh!

svzi commented May 24, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jamesdaniels commented May 24, 2019

Uh oh!

svzi commented May 24, 2019

Uh oh!

jamesdaniels commented May 24, 2019

Uh oh!

svzi commented May 24, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

jamesdaniels commented Feb 22, 2019 •

edited

Loading

Increase readability with our `canActivate` helper

svzi commented May 24, 2019 •

edited

Loading