Angularfire: Odd behavior with observing auth state change: is this a bug?

[jmarlow4]

Here's my auth.service constructor:

constructor(public auth: FirebaseAuth, private router: Router) {
    auth.subscribe((state: FirebaseAuthState) => {
      console.log('auth event: ', state);
      this.authState = state;
    });
}

When I log in it correctly console logs out the state. When I log out, it logs out 'auth event: null' like it should. When I log back in with a different email, it logs out nothing. It's as if it stops detecting changes to the auth state. But logging in still works, the problem is that the app displays the previously logged in email address, not the currently displayed one.

[davideast]

@jmarlow4 Can you try injecting the AngularFire service? The Auth and Database services are not meant to be injected directly.

Also if you could provide a plnkr reproducing your issue that would make it easier for me to debug :)

[jmarlow4]

OK So I tried doing it with just AngularFire, so it would look like af.auth in the service instead of just auth. That didn't help. It still exhibited the same strange behavior. Honestly, it's not a huge deal. But I think it is strange. I can't whip up a plunkr right now. It would just take too much time to replicate the issue. Here's a link to the repo. I put it under the branck bug/login. Also, I have the app hosted in Firebase as well, I left the console logs in there so you can open the dev tools and see.

I appreciate any help! Thanks!

[jmarlow4]

So this is weird, the old version of the app worked correctly (the one I had deployed just after I deployed this version) but this one doesn't. So the correct behavior is possible.

[jmarlow4]

So I've narrowed the problem down to the use of navigation within my authentication service. When I use this.navigate.route(['/app']) for instance, it messes with my auth state. It might have to do with my auth guard, which I'm not having an easy time with. The guards only get called once, after the page loads and that's it.

[jmarlow4]

Yeah, I'm positive the router is messing up my auth state. Every time I route from within my app the auth state gets corrupted or lost or something. I'll just ditch the router and use *ngIf. It's a really small app, anyway so it's not such a huge deal.

[captaincole]

I have noticed a similar authentication issue. I've been using this code to listen to user Authentication, and it recently (within the last few days) has been failing.

 this.af.auth.subscribe((auth) => {
    if (auth) {
      console.warn('Authentication: ', auth);
      this.rootPage = TabsPage;
    } else {
      this.rootPage = LoginPage;
      console.warn('Login', auth);
    }
   });

I had to switch to the firebase native way.

  firebase.auth().onAuthStateChanged( (user) => {
    if (user) {
      // User is signed in.
      console.log('Firebase Auth: ' , user);
      this.rootPage = TabsPage;
    } else {
      // No user is signed in.
      console.log('Firebase Auth None');
      this.rootPage = LoginPage;
    }
  });`

Any thoughts on why? Im on "angularfire2": "^2.0.0-beta.3-0930330",

[terencewhitenz]

Hi @thielCole, it looks like your issue is the same as seen in #478. Can you check and see if the solution that worked for me in that one works for you too?

[jmarlow4]

I don't thin that will resolve my issue since I've been using rxjs5.0.0-beta.6 this entire time.

[jmarlow4]

It is a similar issue, tho. Because the auth state would be cached in my app's local storage. It's just that it wouldn't register with the app itself.

[ultibo]

I had the same issue. I managed to make it work by downgrading rxjs5.0.0-beta.11 to rxjs5.0.0-beta.6