Getting user data with async after page refresh takes long time

[orangesoup]

I couldn't make a plunker, so I'm just gonna try to explain here. - I'm using SDK 3.0.

I have a simple Password auth (just an example, probably doesn't matter which one).

this.af.auth.login({ email, password }, {
  provider: AuthProviders.Password,
  method: AuthMethods.Password
});

Works fine, user can log in, data gets stored in localStorage, everything is shiny. However, when I refresh the page it takes almost 10 seconds to show the user data when using asyncpipe.

constructor(public _auth: FirebaseAuth, ...) { ... }

<div> {{ (_auth | async)?.uid }} </div>

Everything is loaded, I mean literally everything, and then after 8-10 seconds the uid just shows up. If I click the login button while waiting to uid to show up (so at this moment I have my data in localStorage already), the uid shows up instantly (it still makes a login request, but the uid shows up before that request actually finishes).

Honestly, I'm not sure if I'm doing something wrong here and this is an intended behavior (in this case please point me to the right direction), but it's really bad UX.

---

Not sure if it matters, but my main goal would be to show the users email address if they're logged in, but it's kinda weird when the page loads it shows nothing for ~10 seconds and then just suddenly pops out.

[Zyzle]

I've noticed this as well with the switch to beta1 and the 3.0 firebase sdk. By the sound of things I'm doing something similar to you only using Google authentication. There seems to be a fairly major downgrade in the time it takes to retrieve the auth information from firebase compared to the 2.x version. All other database interactions seem unaffected.

[orangesoup]

The interesting thing is if you subscribe to auth

this.af.auth.subscribe(auth => console.log(auth));

It logs the data pretty fast, there's no waiting there (at least for me). It seems like it's just the view that's affected (?)

[jeffbcross]

Hmm, from @orangesoup 's description, it sounds like the Angular zone isn't picking up the change. I will look into this this afternoon.

[orangesoup]

@jeffbcross I'm not sure whether it's a bug or not, so I'm asking here first and if it is I can open a new issue:

I've been debugging my app when I tried out a weird scenario: I have an AuthService and in its constructor I'm subscribing to auth and saving the user data into a variable each time it changes. When I manually delete the firebase:authUser:... object from localStorage I get null in the subscription, but when I log in again I get nothing, no event (I'm not sure how it's called in observables land?) fired. Obviously I can take the new user object from the logins promise, but shouldn't I get the object in the subscription as well?

Edit: since I'm not sure how all this works under the good I've tried out using the proper logout() function, but the result is the same. When logging out I get a null object, but when I log in again I get nothing.

[jeffbcross]

@orangesoup that does sound like a bug; a new issue would be appreciated! There is definitely some complexity in the onAuth pipeline right now to try to have some consistent behavior with the old API.

[orangesoup]

Alright, opened a new issue! Thanks for looking at it!