CODEWITHSUNDEEP
angular
Nikhila Mohan
Nikhila Mohan

Reputation: 2010

Google auth logout issue in angular 2

Iam new to angular js. Iam working on an angular project with version 2. I have implemented google auth login using angular2-social-login by following https://www.npmjs.com/package/angular2-social-login. Google sign in is working correctly, but after logout when i click on the login button iam still getting the previously logged in user details and google auth login page is not showing. Here is details of my implementation.

Installation via npm

npm install angular2-social-login --save

Adding angular2-social-login to your project Add map for angular2-social-login in your systemjs.config

'angular2-social-login': 'node_modules/angular2-social-login/dist/bundles/angular2-social-login.min.js'

Main module configuration

import { NgModule }      from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { Angular2SocialLoginModule } from "angular2-social-login";

let providers = {
    "google": {
      "clientId": "GOOGLE_CLIENT_ID"
    },
    "linkedin": {
      "clientId": "LINKEDIN_CLIENT_ID"
    },
    "facebook": {
      "clientId": "FACEBOOK_CLIENT_ID",
      "apiVersion": "<version>" //like v2.4 
    }
  };

@NgModule({
  imports: [ 
              BrowserModule,
              Angular2SocialLoginModule
          ],
  declarations: [AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule { 
  constructor(){}
}
Angular2SocialLoginModule.loadProvidersScripts(providers);

Component configuration for login() and logout(): For login(provider: string) provider is required it should be anyone(case-sensitive) "facebook", "google", "linkedin" .

...
import { AuthService } from "angular2-social-login";
...
@Component({
    ...
})
export class AppComponent implements OnDestroy {
  ...
  constructor(public _auth: AuthService){ }

  signIn(provider){
    this.sub = this._auth.login(provider).subscribe(
      (data) => {
                  console.log(data);
                  //user data 
                  //name, image, uid, provider, uid, email, token (accessToken for Facebook & google, no token for linkedIn), idToken(only for google) 
                }
    )
  }

  logout(){
    this._auth.logout().subscribe(
      (data)=>{//return a boolean value.} 
    )
  }

  ...

}

Advance thanks.

Upvotes: 0

Views: 2228

Answers (1)

Alex
Alex

Reputation: 649

I'm using Angular 6 and here is my code for logging out google account:

In my TS file, declare a variable auth2, a variable gapi, and a function googleLogout:

declare const gapi: any;//this line should be at the very top of your TS file
public auth2: any;
 public googleLogout() {
    gapi.load('auth2', () => {
      this.auth2 = gapi.auth2.getAuthInstance();
      this.auth2.signOut().then(function() {
        console.log("User signed out");
      });
      //this.attachSignout(document.getElementById('googleBtn2'));
    });
  }

Then, in the html file, give an element and bind with a click function:

<div id="googleBtn2" (click)="googleLogout()">Google SignOut</div>

Don't forget to include the google api in the index.html:

  <script src="https://apis.google.com/js/platform.js" async defer></script>

Upvotes: 1

Related Questions