2

I am trying to implement Google authentication in AngularJS 2

I followed this link

I have build an app, containing 4 components

  1. Header Component
  2. Login Component
  3. Detail Component
  4. App Component (root)

Login Component has the login page code. Hence i have included the following in login.component.html -> 

<div class="g-signin2" data-onsuccess="onSignIn"></div>

Logout button is included in the Header component. The code is as follows:

header.component.html

 <div>
    <span class="log-out" (click)="signOut()"> Logout </span>
  </div>

header.component.ts

constructor (private router:Router, private ngZone: NgZone){

gapi.load('auth2', function () {
  gapi.auth2.init()
});

window['signOut'] = (user) => ngZone.run(() => this.signOut());
}

signOut() {
  var auth2 = gapi.auth2.getAuthInstance();
  auth2.signOut().then(function () {
  console.log('User signed out.');
   });
    this.router.navigate(['']);
 }

Once logout is successful, it will get navigated back to login page, address is '', which has been set in app-routing.module

When i logout, i get redirected to login page, but the Google sign button disappears. On refreshing it appears again

If i am missing something, please direct me!

zgue
  • 3,793
  • 9
  • 34
  • 39
Rahul Sharma
  • 329
  • 1
  • 3
  • 10
  • 1
    probably because your `this.router.navigate(['']);` is outside of `signOut` method... move it to the same place where your `console.log` is – Elmer Dantas Jan 22 '18 at 12:45
  • I did. It still doesnt appear. It only appears, once i refresh. – Rahul Sharma Jan 23 '18 at 04:44
  • [here](https://stackoverflow.com/questions/32625970/google-signin-button-in-angularjs-sometimes-does-not-show-up) you can find your solution and understand why was not working...also, I suggest that you read a little about async operations due to the code problem I've mentioned. Regards – Elmer Dantas Jan 23 '18 at 09:29

1 Answers1

2

I solved my problem:

So, i learned that inclusion of this.router.navigate[''] doesn't trigger the reload of whole page. It just navigates me to the desired div in the HTML.

I have loaded platform.js in index.html file. For it to load, we need to call window.open() function.

Hence i replaced it with window.open("/","_self"). Here "/" is the root page (in my case its the login page) and "_self" means it will redirect to you on the same tab.

Rahul Sharma
  • 329
  • 1
  • 3
  • 10
  • Refreshing the entire page is a workaround that will work. I wrote an answer on what the problem is and another solution here: https://stackoverflow.com/a/70993934/6113915 – Stian Jørgensrud Feb 04 '22 at 23:26