AngularFire 2 - Auth.logout() callback

Question

I'm trying to logout and then navigate to a login url, but the authguard from this url prevents logged users to view it and since the second line is reached before the promise is resolved you need to click the method event twice to make it work.

logout(){
    this.angularfire.auth.logout();
    this.router.navigate(['']);
  }

Is there a way to implement router.navigate inside a callback when the promise is resolved? I've tried then(), but either my syntax was incorrect or there is a problem with auth typings...

Answer 1

AngularFire2's logout should really behave in a manner similar to the underlying Firebase SDK. Fortunately, a few days ago, a PR was merged that changes logout to return a promise - so the next release will address your issue.

Until then, you could listen to the auth changes to determine when it's okay to navigate:

import "rxjs/add/operator/filter";
import "rxjs/add/operator/first";

...

logout(){
  this.angularfire.auth
    // You only want unathenticated states:
    .filter((authState) => !authState)
    // You only want the first unathenticated state:
    .first()
    // You should now be able to navigate:
    .subscribe(() => this.router.navigate(['']));
    // The composed observable completes, so there's no need to unsubscribe.
  this.angularfire.auth.logout();
}

Answer 2

This has now been replaced with signOut() which returns a firebase promise. So if you import import { AngularFireAuth } from 'angularfire2/auth';

you can then

constructor(public afA: AngularFireAuth){}

logout(){
    this.afA.auth.signOut().then(() => {
       this.router.navigate(['']);
    });
}