Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2 AuthGuard + Firebase Auth

I'm trying to build an AuthGuard for Angular 2 routes using Firebase Auth.

This is the AuthGuard Service:

import { Injectable }             from '@angular/core';
import { CanActivate, Router,
         ActivatedRouteSnapshot,
         RouterStateSnapshot }    from '@angular/router';
import { AuthService }            from './auth.service';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private AuthService: AuthService, 
                private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (this.AuthService.loggedIn) { return true; }

    this.router.navigate(['login']);
    return false;
  }
}

And this is the AuthService which checks if the user's logged in and binds the result to the property 'loggedIn' in its constructor.

import { Injectable } from '@angular/core';
import { AngularFire } from 'angularfire2';
import { Router } from '@angular/router';

@Injectable()
export class AuthService {
loggedIn: boolean = false;

  constructor(
    public af: AngularFire,
    public router: Router) {
        af.auth.subscribe(user => {
            if(user){
                this.loggedIn = true;
            }
        });
    }
}

The problem here is obviously asynchrony. AuthGuard's canActivate() always returns a false value because the subscription doesn't receive the data in time to change 'loggedIn' to true.

What's the best practice to fix this?

EDIT:

Changed the AuthGuard to return an observable.

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.af.auth.map((auth) => {
        if (!auth) {
          this.router.navigateByUrl('login');
          return false;
        }
        return true;
    });
  }

It kind of works since you don't get redirected to login... But the target AuthGuarded Component is not rendered.

Not sure if it has to do with my app.routes. This is the code for that part:

const routes: Routes = [
  { path: '', component: MainComponent, canActivate: [AuthGuard] },
  ...
];

export const routing = RouterModule.forRoot(routes);
like image 942
cerealex Avatar asked Sep 14 '16 12:09

cerealex


2 Answers

Complete the observable using .take(1) to make the component render.

import {Observable} from "rxjs/Observable";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/take';

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.af.auth.map((auth) => {
        if (!auth) {
          this.router.navigateByUrl('login');
          return false;
        }
        return true;
    }).take(1);
  }
like image 169
codedesignr Avatar answered Oct 21 '22 11:10

codedesignr


For newer versions of AngularFire, you have to use authState instead:

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(
    private afAuth: AngularFireAuth,
    private router: Router
  ) {}

  canActivate(): Observable<boolean> {
    return this.afAuth.authState
      .take(1)
      .map(authState => !!authState)
      .do(auth => !auth ? this.router.navigate(['/login']) : true);
  }
}

Don't forget to import take, map and do from rxjs/add/operator.

like image 24
Will Avatar answered Oct 21 '22 10:10

Will