import { Component } from '@angular/core' ; import { AngularFire , AuthProviders } from 'angularfire2' ; @ Component ( { moduleId : module . id , selector : 'app-root' , templateUrl : 'app.component.html' , styleUrls : [ 'app.component.css' ] } ) export class AppComponent { isAuth = false ; authColor = 'warn' ; user = { } ; constructor ( public af ) { this . af . auth . subscribe ( user => this . _changeState ( user ) , error => console . trace ( error ) ) ; } login ( from ) { this . af . auth . login ( { provider : this . _getProvider ( from ) } ) ; } logout ( ) { this . af . auth . logout ( ) ; } private _changeState ( user = null ) { if ( user ) { this . isAuth = true ; this . authColor = 'primary' ; this . user = this . _getUserInfo ( user ) ; } else { this . isAuth = false ; this . authColor = 'warn' ; this . user = { } ; } } private _getUserInfo ( user ) { if ( ! user ) { return { } ; } let data = user . auth . providerData [ 0 ] ; return { name : data . displayName , avatar : data . photoURL , email : data . email , provider : data . providerId } ; } private _getProvider ( from ) { switch ( from ) { case 'twitter' : return AuthProviders . Twitter ; case 'facebook' : return AuthProviders . Facebook ; case 'github' : return AuthProviders . Github ; case 'google' : return AuthProviders . Google ; } } }