AngularFire2 (4.0) authentication with CanActivate not working

Question

I'm building an Angular 4 + FireBase (4.0.0.rc0) application based on the following tutorial: https://coursetro.com/posts/code/32/Create-a-Full-Angular-Authentication-System-with-Firebase

The tutorial is based on a older version of FireBase. I was able to convert almost everything to the latest version. I'm struggling with transforming this canActivate function. It throws on Observable.from(this.afAuth) the following error:

[ts]
Argument of type 'AngularFireAuth' is not assignable to parameter of type 'ArrayLike<{}>'.
Property 'length' is missing in type 'AngularFireAuth'.
(property) AuthGuard.afAuth: AngularFireAuth

export class AuthGuard implements CanActivate {

  constructor(private afAuth: AngularFireAuth, private router: Router) { }

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

How can I make this work?

Thanks!

Answer 1

it should be afAuth.authState and it's already Observable<firebase.User> so you don't need Observable.from

constructor(private afAuth: AngularFireAuth, private router: Router) { }

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