canActivate firebase auth route implementation

[peterwiebe]

Is there a suggested way to use the canActivate property on a route while using firebase authentication?

I am using the latest alpha router and trying to implement the authGuard as provided in the docs but I run into an issue with the asynchronous auth observable that returns after the authGuard has completed (this appears to only happen when you refresh the page after having already logged in). The results is that no component shows because the subscription (see below) doesn't complete until after loggedIn returns false. Should I be trying to find a way to stop execution to wait for a response from the observable or is there another solution I should try?

Here is the example of my authGuard:

    import { Injectable } from '@angular/core';
    import { CanActivate, Router } from '@angular/router';

    import { AngularFire, AuthProviders, AuthMethods } from 'angularfire2';

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

      canActivate(): boolean {
          var loggedIn = false;
          console.log("Authenticating");
          this.af.auth.subscribe(auth => {
            if (auth) {
                loggedIn = true;
            } else {
                this.router.navigate(['/login']);
            }
          })
          return loggedIn;
        }
    }

I should note that I am using email/password authentication. I noticed there is another issue created about persisting oauth credentials, this issue may run in the same vein as that one.

I could go back to using logic in the template to show components but I prefer using the guard.

[r-park]

Rather than subscribing directly to this.af.auth, you can try returning it instead, since canActivate() can return a Observable<boolean> :

import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/take';

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { FirebaseAuth, FirebaseAuthState } from 'angularfire2';

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

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

[peterwiebe]

thank you @r-park! that got me over the hump (with slight alterations). I suppose I should spend time on rxjs to have a better foundation.

[davideast]

Great solution @r-park! @peterwiebe We are looking to integrate with the router in the future so hang tight, this will get easier!

[5amfung]

@r-park Do you have any idea why your example didn't work for me. I'm using the exact code, but for some reasons, when authenticated is true, my HomeComponent is not executed at all, but I can see that the code in AuthGuard is run from the debug logging.

Here is my route setup.

const routes: RouterConfig = [
    { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
    { path: 'login', component: LogInComponent }
];

[ivoviz]

@davideast I'm not sure how that integration would look like, but it would be really nice to have an easy solution for a global "wait-for-auth" thing. It's a PITA at the moment to do stuff on page loads where the uid is needed since we have to subscribe everywhere to af.auth and do the stuff we want in that subscription.

A really simple example: user opens randomurl/issue/123 and wants to increment the view counter for issue 123. Since the auth object is async we can't just simply .set the counter at views/issueID/uid to +1 because auth.uid doesn't exist at that point, so first we have to subscribe to af.auth. I really hope there will be an easier way to do this. (If there already is one please tell me!)

[iam10k]

Anyone else having this problem should take a look at this solution if the one above is not exactly working for you. angular/angular#9613 (comment)
Almost the same as @r-park but without the .do()

[ubenzer]

Hello,

The code piece @r-park provided is very useful to me. I didn't get one thing though. Why did you use take(1) there? I was using .asObservable()(and it wasn't working). It looks like I didn't get usage of rxjs there. Can you explain if you have some some? :) You can also post it as answer here if interested.

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

  canActivate(): Observable<boolean> {
    return this.auth
      .take(1) // <-- WHY? I thought it would be .asObservable() instead
      .map((authState: FirebaseAuthState) => !!authState)
      .do(authenticated => {
        if (!authenticated) this.router.navigate(['/login']);
      });
  }
}

[awiseman]

@ubenzer I think the rationale is that, logically, the router must make a single decision in response to a navigation event. In the case of an async value, the guard must wait for a single value and then make its decision.

Consider a user clicking a link to navigate somewhere: The guard either says "yes, this is ok to go forward" or "no, cancel the navigation". If a new value appears for the observable after it has made its decision, the router can't re-evaluate the navigation. It has already responded to the user. Therefore, it doesn't really make sense to have the guard try to respond to more than one value from the Observable.

So, the purpose of the .take(1) operator is to say "give me the first value out of this Observable. I don't care about the rest." That way, each invocation of the guard will get a single value to use to make their decision and then move on.

[ubenzer]

@awiseman Thanks for the explanation. The logic you tell makes sense, router supposed to care about only the first response.

On the other hand, I still didn't get why it doesn't work because I am pretty sure that (1) it fires only once (2) even it had fired more than once, router supposed to got its answer and disregard following events or at least give an error.

[soywod]

Great solution @r-park ! But I had to convert this.auth to an Observable to get the code works

canActivate(): Observable<boolean> {
  return Observable.from(this.auth)
    .take(1)
    .map(state => !!state)
    .do(authenticated => {
      if (!authenticated) this.router.navigate([ '/login' ]);
    })
}

[fabriziocacicia]

Any solution to avoid that user opens the login page if he is already authenticated?

[artworkad]

@fabryx92 you have to create another auth guard, that navigates away from login/register routes, e.g.:

canActivate(): Observable<boolean> {
    return this.af.auth.map(authState => {
      if (authState) this.router.navigate(['/dashboard']);
      return !authState;
    }).take(1);
}