Angularfire: 4.0.0 Docs refer to incorrect afAuth.subscribe method

[markterrill]

Hi, simple fix for documentation on 4.0.0 RC0:

https://github.com/angular/angularfire2/blob/4.0.0-rc.0/docs/Auth-with-Ionic2.md

refers to

this.authState = afAuth.authState;
    afAuth.subscribe((user: firebase.User) => {
      this.currentUser = user;
    });

This caught me out, after learning more about rxjs the simple solution was to subscribe to this.authstate instead:

this.authState = afAuth.authState;
        this.authState.subscribe((user: firebase.User) => {

            console.log('user is: ' + user);
            this.currentUser = user;
        });

I'll create a PR

AngularFire 4.0.0 RC0
Ionic Framework: 3.1.1
Ionic App Scripts: 1.3.6
Angular Core: 4.0.2
Angular Compiler CLI: 4.0.2
Node: 6.10.3
OS Platform: macOS Sierra
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/1

[gianpaj]

If you have 4.0.0rc0 or greater I belive the correct code is:
afAuth.authState.subscribe((user: firebase.User) => {

see https://github.com/angular/angularfire2/pull/917

[markterrill]

Hi, your code line would work.

That #917 PR used

this.af.auth.subscribe(authState => {

...which is wrong. The documentation is inconsistent and plain wrong. I've focussed on the one docu page that is largely correct as then folk can focus on one working example.

The documentation author decided to assign the local variable this.authState, which I used for left line readability. Otherwise you have a hodge podge of 'lets grab that variable, oh, this time we'll grab the original'.
I've now spent multiple hours diving into learning how rxjs works, checking source to find out what the simple solution was. Then went jumping through the hoops to submit a fix for the next poor person. If someone feels strongly about which variable to use, then so be it, lets just not spend a week debating it.

[markgoho]

Hey @markterrill I'm sorry these docs aren't more clear or clear at all! 👎

Is there anything about this issue that might be unique to Ionic or is it just general Auth methods / variable naming / best practice in general?

[markterrill]

It simply was that the docu was wrong. afAuth.subscribe() doesn't exist.
Correct solutions are either:

this.authState = afAuth.authState;
this.authState.subscribe(....

or as @gianpaj suggests, going to the constructor argument directly:

afAuth.authState.subscribe(

On a more broader note, the ionic docu has some odd references to objects not defined, ie this FirebaseAuthState interface:

signInWithFacebook(): firebase.Promise<FirebaseAuthState> {

A wish list:

• consistent login/logout naming, most things are login/logout, not signin/signout. If going with a specific provider then I'd suggest loginWithFacebook()
• inclusion of information on route guards on the ionic demo. IE using a service like suggested at https://blog.khophi.co/angularfire2-authentication/ and using that as a function on canActivate within Ionic2 route guards.
• update the Auth-with-Ionic2.md with the fix as explained in this PR as it as the wrong subscribe

I well understand and appreciate it's pretty hard for projects to keep up with documentation when things are moving fast. The trick is there are a number of tutorial sites out there charging ~120USD for their howto and they must be doing some business. The project team has left the door open to them by getting it wrong in the first place. Then the tutorial sites get it wrong and you end up with 5 different (and wrong) ways of doing it! Anyways!

I'll likely submit a new version of the AuthService on that page when I finish doing it.

[markgoho]

As far as I can tell setting this.authState = afAuth.authState; is completely pointless. Unless I'm missing something....which is possible.

[markterrill]

Seems to be a convention throughout most documentation implementations. It makes sense from the perspective that a local shorthand variable decouples user code (view and controller) from how its accessed from angularfire. Which hasn’t exactly been consistent during the great refactor.

I really don’t mind either way though its more convenient to use shorthand rather than a big find/replace each time its changed.

The key point is the docu is wrong, it points to the wrong object. As long as that’s fixed we’ll have less folk scratching their heads.

I’m going to bow out of further discussion, up to you guys.

Mark

From: Mark Goho [e-mail]
Reply-To: angular/angularfire2 [e-mail]
Date: Thursday, 11 May 2017 at 12:35 am
To: angular/angularfire2 [e-mail]
Cc: Mark Terrill [e-mail], Mention [e-mail]
Subject: Re: [angular/angularfire2] 4.0.0 Docs refer to incorrect afAuth.subscribe method (#960)

As far as I can tell setting this.authState = afAuth.authState; is completely pointless. Unless I'm missing something....which is possible.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/angular/angularfire2/issues/960#issuecomment-300502129, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ACfaUWHaZNfPBOTA1hAB_AbNMfa_Vkr_ks5r4ctIgaJpZM4NU_zM.

[gharibi]

I have used the below code and I was able to retrieve the user profile in v4.0.0:

user: Observable;
displayName: string;
email: string;
photoURL: string;

constructor(public afAuth: AngularFireAuth, private db: AngularFireDatabase) {
this.user = afAuth.authState;
afAuth.authState.subscribe((user: firebase.User) => {
this.displayName = user.displayName;
this.email = user.email;
this.photoURL = user.photoURL;
});
}

[jamesdaniels]

fixed

[SvenBudak]

There change so much... nothing from that what i found on google works... i try now to make sience 14 hours, a function that output IsLoggedIn true / false.. nothing works. i tryed every single service that is listed in google...

[Toxicable]

@BamiGorengo as mentioned above you can use this.afAuth.authState to identify if the user is logged in or not

[SvenBudak]

this.afAuth.authState outputs everytime false.. thats my problem. I found this auth.service.ts and all i tryed dont work from this service: https://angularfirebase.com/snippets/angularfire2-version-4-authentication-service/

but when i use direct this.afAuth.authState it dosnt work to. i think there is anywhere a big bug.