Accessing the Auth object in AngularFire2

Question

I am trying to access the auth object in angular2 using firebase but I have become confused. I can see the user auth credentials in the console but the auth variable seems to be null.

app.component.ts

import { Component } from '@angular/core';
import { AngularFire, FirebaseListObservable } from 'angularfire2';
import { AuthProviders, AuthMethods } from 'angularfire2';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

    title = 'app works!';

    constructor(public af: AngularFire) {

    this.af.auth.subscribe(auth => console.log(auth)); //nothing in the console

    console.log(this.af.auth); // shows AngularFireAuth object with user credentials but says it is private

  }
          login() {
                console.log("logging in...");
                this.af.auth.login({
                        provider: AuthProviders.Google,
                        method: AuthMethods.Popup,
                });
              }

}

app.component.html

<div *ngIf="auth">You are logged in</div>
<div *ngIf="!auth">Please log in</div>

The auth variable appears to be null even though console.log(this.af.auth); is showing the user credentials and therefore only Please log in is displayed in the html.

have you called component login method and checked after it ? — ranakrunal9
– ranakrunal9, Commented Aug 31, 2016 at 11:37
I was in similar shoes before. This is why the community suggested for a documentation on managing auth state. See github.com/angular/angularfire2/issues/343 — Jek
– Jek, Commented Sep 1, 2016 at 12:31

Stallion · Accepted Answer · 2017-01-20 04:45:25Z

1

 this.af.auth.login(value, {provider:AuthProviders.Password, method:AuthMethods.Password}).then((success) =>{
        console.log(JSON.stringify(success));
    }).catch((err) => {
        console.log(err);
    });

See the example https://github.com/Govinda-Wagle/Angular2-AngularFire-Blog/blob/master/src/app/Login/login.component.ts

edited Jan 20, 2017 at 4:45

answered Jan 20, 2017 at 4:28

Stallion

774 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cartant Over a year ago

Please read: Are answers that just contain links elsewhere really “good answers”?

Collectives™ on Stack Overflow

Accessing the Auth object in AngularFire2

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related