On reloading the page it automatically logs out from Google

[Deepakds007b]

I have integrated the @abacritt/angularx-social-login with my web application. I have successfully implemented the login and logout feature of Google but after logging in whenever the page reloads the Google login gets lost.

[Heatmanofurioso]

Hi @Deepakds007b
Care to give us some more information? This shouldn't usually happen, and might somehow be related with your management of cookies or local storage

[Deepakds007b]

@Heatmanofurioso

I have added the code below which I am using to login using google.
Using <asl-google-signin-button class="mx-1"></asl-google-signin-button> I am able to login successfully but after logging in whenever I reload the page it logs out automatically.
FYI :- I am not using any other login method. I am using only Google login.

Before logging in

After logging in

Now on reloading it automatically logs out

app.module.ts
providers: [ { provide: 'SocialAuthServiceConfig', useValue: { autoLogin: false, providers: [ { id: GoogleLoginProvider.PROVIDER_ID, provider: new GoogleLoginProvider( "GOOGLE_KEY" ) } ] } as SocialAuthServiceConfig },

testapp.component.ts

`import { Component, OnInit } from '@angular/core';
import { Router } from "@angular/router"
import { Title } from "@angular/platform-browser";
import { GoogleLoginProvider, SocialAuthService } from '@abacritt/angularx-social-login';
import { SocialUser } from '@abacritt/angularx-social-login';
import {
  FacebookLoginProvider,
  AmazonLoginProvider,
  VKLoginProvider,
  MicrosoftLoginProvider,
} from '@abacritt/angularx-social-login';

@Component({
  selector: 'testapp-component',
  templateUrl: './testapp-component.html',
  styleUrls: ['./testapp-component.css']
})
export class TestAppComponent implements OnInit {

  constructor() {
   }

   user: SocialUser | undefined;
   GoogleLoginProvider = GoogleLoginProvider;
 
   ngOnInit() {
     this._authService.authState.subscribe((user: any) => {
       this.user = user;
     });
   }
  
   signOut(): void {
     this._authService.signOut();
   }
 
   refreshGoogleToken(): void {
     this._authService.refreshAuthToken(GoogleLoginProvider.PROVIDER_ID);
   }

}`

testapp.component.html

`<div class="jumbotron bg-transparent text-center">
    <div *ngIf="!user" class="card text-center">
      <h6 class="card-header">Social Login Demo</h6>
      <div class="card-block">
        <h4 class="card-title">Not signed in</h4>
        <p class="card-text">Sign in with</p>
      </div>
      <div class="card-block d-flex justify-content-center">
        <asl-google-signin-button class="mx-1"></asl-google-signin-button>         
      </div>
    </div>
    <div *ngIf="user" class="card text-center">
      <h6 class="card-header">Social Login Demo</h6>
      <div class="card-block"></div>
      <img
        *ngIf="user.photoUrl"
        class="card-img-top img-responsive photo"
        src="{{ user.photoUrl }}"
      />
      <div class="card-block">
        <h4 class="card-title">{{ user.name }}</h4>
        <p class="card-text">{{ user.email }}</p>
        <p class="card-text">Logged in with {{ user.provider }}</p>
      </div>
      <div class="card-block">
        <button class="btn btn-danger" (click)="signOut()">Sign out</button>
      </div>
      <div
        class="card-block"
        *ngIf="user.provider === GoogleLoginProvider.PROVIDER_ID"
      >
        <button class="btn" (click)="refreshGoogleToken()">
          Refresh google token
        </button>
      </div>
    </div>
  </div>`

[Jin-K]

The current login provider is not using storage, it uses a google lib which handles that their way.
You maybe need autoLogin: true here to login automatically on page reload.

[Heatmanofurioso]

@Jin-K We should maybe add this to the documentation a bit more explicitly

[Deepakds007b]

@Heatmanofurioso The autoLogin: true feature will automatically login the user without the user's consent.
But I have to provide a option which will ask user to whether login or not.

@Jin-K If I provide autologin: true this will not solve my problem of logging out on reload. I just want to know why it is logging out on reload and how can I solve it.

[samet-karaca-crea]

Same issue here, User logged in with google and navigated another page. When user refresh any page. Google asks to login again.

[samet-karaca-crea]

@Deepakds007b i solved problem with disabling one tap feature for temporarily. We have to check 'is user logged' before initiliaze library. I will look on the solution on my repo if i find it i will share it or will make a pr to repo

id: GoogleLoginProvider.PROVIDER_ID, provider: new GoogleLoginProvider(environment.googleClientID, {oneTapEnabled: false}),

[Deepakds007b]

@samet-karaca-crea Thanks for information, however as you mentioned this is a temporary solution and we can use it to some extent. But the problem of logging out on page reload is still there. We can use autologin: true in the google providers which log in the user automatically, but this should not be the correct way to do these things.

[samet-karaca-crea]

@Deepakds007b

Yes this is not the way i want to proceed. User is in the system and if refresh it tries to login again and if i have more accounts than 1 It doesn't choose the correct account

[zombieboy98]

Any solution to this?

[Deepakds007b]

@zombieboy98 No solution yet

[matiasrebori]

i have the same problem but autologin: true doesnt work, whenever i reload the page or open a new tab, the guard kicks me to the login page

authService

  userState() {
    this.socialAuthService.authState.subscribe((user) => {
      this.user = user;
      this.loggedIn = (user != null);
    });
  }

authGuard

    if (!this.authService.loggedIn) {
      this.router.navigate([localUrls.login])
    }
    return true

Edit:
i kinda debbuged and finded that the behaviour is as follows:
1- open new tab
2- guard checks loggedIn variable, its false
3- guard redirects to login page
4- authService receives the logged user, loggedIn is set to true
5- get stuck in the login page with the user actually logged in

anyone has a hint to solve this?

[Deepakds007b]

@matiasrebori found any solution for this...?

[matiasrebori]

@matiasrebori found any solution for this...?
@Deepakds007b

i changed the loggedIn variable that tracks the logged state to a localstorage "variable", when the user logs in for the first time i set the variable to a predefined string, so when the user logs in for the second time if i find the exact item its means the user is logged in, when the user explicitely logs out or the userState() function receives null, remove the variable.

authGuard

    if (!this.authService.isLogged()) {
      this.router.navigate([localUrls.login])
    }
    return true

isLogged()

  isLogged():boolean{
    let logged = localStorage.getItem('user-loggedin')
    return logged == 'true'
  }

i dont know if its bad in terms of security but it gets the job done with the expected behaviour in the mean time a solution is provided

Edit

dont remove the localStorage variable when the userState() function receives null, because the variable will be removed when the tab is closed.