Angular 2 router - resolve auth with angularfire2

Question

I have a route where I want to wait until I get the auth object from firebase. Here is the code I have:

Route

{
  path: 'random',
  component: RandomComponent,
  resolve: { auth: AuthService }
}

AuthService

@Injectable()
export class AuthService implements Resolve<any> {

  constructor(private af: AngularFire) { }

  resolve(): Observable<any> {
    return this.af.auth.take(1);
  }

}

RandomComponent

export class RandomComponent {

  constructor(private route: ActivatedRoute) {
    console.log(this.route.snapshot.data);
  }

}

Weirdly it logs Object { }, so an empty object. If I change AuthService.resolve to return Observable.of('whatever'), then it logs Object { auth: "whatever" }, so I'm pretty sure this part of the code is working, it's just that for some reason the angularfire2 auth observable not working in this case. (I'm really not an observable expert, so it's probably me doing something wrong).

If I do this.af.auth.take(1).subscribe(auth => console.log(auth)); it logs the auth object, so that part is working as well.

So what's causing this problem? What am I doing wrong?

(Using latest router, angular2 and angularfire2.)

gwest7 gwest7 · Accepted Answer · 2019-07-04T11:16:41

0

votes

This should be this.af.user.pipe(take(1)) or this.af.authState.pipe(take(1)).

Angular 2 router - resolve auth with angularfire2

1 Answers