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.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Deepakds007b]

Hi @Heatmanofurioso, any solution for this..?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Alio-Kh]

I have the same issue

[akatrukhin]

Any solution on this?

[anasvikh]

Same issue Any updates?

[antoine13330]

+1

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[soyjairocosta]

+1

[MikeYef96]

@Heatmanofurioso Hi! I faced with the same issue that for user used BehaviorSubject and after reload the page(even without Google One Tap), you can reach it when sign in with any of socials, reload the page and on logout call SocialAuthService.signOut() In result you will get reject from Promise - No user logged in(or something similar)

As solution, is it possible to give possibility to set that _user and _SocialUser variables by devs? Even setUser(user) will be good if we know that user still signed in via any of socials, we can manage that state with lib without creating something outside, and it will be more clearly to understand user's state as at this moment after reload the page user becomes null even if in the apps he/she still logged in

With One Tap this issue becomes more clear as after flow sign in via google, reload the page, One Tap appears as in Google Login Provider there is condition for call of One tap:

if (this.initOptions.oneTapEnabled) {
              this._socialUser
                .pipe(filter(user => user === null)) // and this filter show us One Tap after reload the page
                .subscribe(() => {
                  google.accounts.id.prompt(console.debug);
                });
            }

P.S. maybe you could give possibility for developers to set their own condition related to their apps to call One Tap, it would be great=) For sure we will be needed for descriptions for such changes as it can bring more new Issues

showGoogleOneTapPrompt() {
    google.accounts.id.prompt();
  }