Andre Smith Andre Smith - 2 months ago 39
TypeScript Question

Auth2 Object unidentified when trying to sign out (Angular2)

Good Day,

I am trying to sign out an auth2 client. This process was working fine before I upgraded my router to fit in with new RC requirements. Now it seems as if the auth2 object is cleared or lost along the way from signing in to signing out.

Here is my sign out tag:

<a role="button" (click)="signOut()" style="padding-left: 30px;">Log out</a>


it simply calls a signOut() function found in navbar.component.ts (See below)

signOut() {
var auth2 = this._navigationService.getAuth2();
auth2.signOut().then(function () {
});
console.log('User signed out.');
sessionStorage.clear();
localStorage.clear();
this.router.navigate(['Login'])
window.location.reload()
}


here is the navigationService code it is calling:

import { Injectable } from '@angular/core';

@Injectable()
export class NavigationService {
onEditMode:boolean;
auth2:any;
constructor() {
this.onEditMode=true;
}

getEditMode(){
return this.onEditMode;
}

setEditMode(editMode:boolean){
this.onEditMode=editMode;
}

setAuth2(auth2:any){
this.auth2=auth2;

}

getAuth2(){
return this.auth2;

}

}


Here is my login.component.ts which sets the auth2 object seen in navigationService.ts:

onGoogleLoginSuccess = (loggedInUser) => {

this.isLoading=true;
console.log(loggedInUser)
this._navigationService.setAuth2(gapi.auth2.getAuthInstance());

console.log("Google gapi" + gapi.auth2.getAuthInstance());
sessionStorage.setItem('gapi',gapi.auth2.getAuthInstance());

this._zone.run(() => {

this.userAuthToken = loggedInUser.hg.access_token;
this.userDisplayName = loggedInUser.getBasicProfile().getName();
var strClientID = document.getElementsByTagName('meta')['google-signin-client_id'].getAttribute('content')
this.objTrimbleAuthentication.ClientID = document.getElementsByTagName('meta')['google-signin-client_id'].getAttribute('content');
this.objTrimbleAuthentication.IDToken = loggedInUser.getAuthResponse().id_token;

this._trimbleAuthenticationService.sendAndVerify(this.objTrimbleAuthentication).subscribe(data=>{
if(data.tokenIsValid==true){

sessionStorage.setItem('S_USER_EMAIL',loggedInUser.getBasicProfile().getEmail());
sessionStorage.setItem('S_USER_NAME',loggedInUser.getBasicProfile().getName());
sessionStorage.setItem('S_ID_TOKEN',this.userAuthToken);

this.objExternalBindingModel.ExternalAccessToken=this.userAuthToken;
this.objExternalBindingModel.Provider="Google";
this.objExternalBindingModel.UserName = loggedInUser.getBasicProfile().getName();

this._LoginService.obtainLocalAccessToken(this.objExternalBindingModel).subscribe(data=>{

// console.log(data);
this.isLoading=false;
this._router.navigate(['/Home']);
sessionStorage.setItem("access_token",data.access_token);

},error=>{
console.log(error);
})

}else{
this.isLoading= false;
this.showModal('#trimbleAuthError');

}
}, error=>{

})
});
}


onGoogleLoginSuccess is called from login.component.html:

<div style="margin-left:8% !important" id="{{googleLoginButtonId}}"></div>


So this process was working fine until I update my router to use the latest Angular2 Release Candidate. I am out of ideas on what could possibly be causing the following error when I click the sign out button:

Error in component.html/navbar.component.html:12:33
ORIGINAL EXCEPTION: TypeError: Cannot read property 'signOut' of undefined


if you need any other information or components please ask I hope I have given enough information. As I said it was working so keep that in mind, please.

Answer

Right, the solution i found to the above question was that signing out using localhost will not work. So i just used this block of code when deploying the website and keep it commented out when running the website on localhost.

this is my signOut() function found in navbar.component.ts:

signOut() {

    //////////////////////////////////////// Uncomment block for live deployment //////////////////////////////


    // var auth2 = gapi.auth2.getAuthInstance();
    // auth2.signOut().then(function () {
    //     console.log('User signed out.');
    // });


    //////////////////////////////////////////////////////////////////////////////////////////////////////////

    sessionStorage.clear();
    localStorage.clear();
    this.router.navigate(['/']);
    window.location.reload();

}

although getAuthInstance gives an error when trying to run it in localhost, deploying the web application to a server seems to work fine.