access_token does not exist in the response.

[darushHamidi]

  constructor(private readonly authService: SocialAuthService){}

  ngOnInit(): void {
    this._authService.authState.subscribe((user: any) => {
      console.log(user)
    });
  }

when I console.log(user) I will see the following data:

email: "My Email"
firstName: "My First Name"
id: "xxx"
idToken: "xxx"
lastName: "My Family Name"
name: "Compelete Name"
photoUrl: "Photo URL"
provider: "GOOGLE"

where is the access_token in the response?

this is my config:

      {
        provide: 'SocialAuthServiceConfig',
        useValue: {
          autoLogin: false,
          providers: [
            {
              id: GoogleLoginProvider.PROVIDER_ID,
              provider: new GoogleLoginProvider(clientId, {
                scopes: ["profile", "email"]
              })
            }
          ],
          onError: (err) => {
            console.error(err);
          }
        } as SocialAuthServiceConfig,
      }

when I call getAccessToken method as follow
const access_token = await this.authService.getAccessToken(GoogleLoginProvider.PROVIDER_ID)

I get the following error

[GSI_LOGGER]: Failed to open popup window on url: https://accounts.google.com/o/oauth2/v2/auth?gsiwebsdk=3&client_id=1018340913905-pn7vva13q59hm5jkd1f4ogf56ht3f8l7.apps.googleusercontent.com&scope=profile%20email&redirect_uri=storagerelay%3A%2F%2Fhttp%2Flocalhost%3A4300%3Fid%3Dauth684026&prompt=select_account&login_hint=iranremotejobs.ir%40gmail.com&response_type=token&include_granted_scopes=true&enable_serial_consent=true. Maybe blocked by the browser?

[albert-nagy]

I have exactly the same problem. The authToken is missing from SocialUser object.
getAccessToken method wants to open the "Sign in with Google" popup again, but fails with

[GSI_LOGGER]: Failed to open popup window on url: ...

I am using version 1.2.5 with Angular 14.
Is there a way to get an access token?

[albert-nagy]

Meanwhile I managed to get it working by calling getAccessToken method on user log in.

IF the user manually enables the second - and seemingly identical - popup and clicks on their account to log in again, the access token gets returned and the login procedure succeeds.

this.socialAuthService.authState.subscribe(
      {
        next: (user) => {
          if(user != null) {
            const provider = user.provider.toLowerCase();
  
            if (provider == 'google') {
              this.getAccessToken();
            }
            else {        
              this.authToken = user.authToken;
              this.signIn(provider);
            }     
          }
          else
            this.authToken = undefined;
      }
    });
...
  getAccessToken(): void {
    setTimeout(() => {
      this.socialAuthService.getAccessToken(GoogleLoginProvider.PROVIDER_ID).then(accessToken => {
        this.authToken = accessToken;
        this.signIn('google');
      });
    }, 500);
  }

I strongly doubt, that this is the intended behaviour, I assume, there is a simpler way to get the access token...

[albert-nagy]

OK, finally I have found the solution!
The access token is not needed anymore, because the idToken contains all the required user information in JWT encoding, therefore any further request towards Google with the access token is redundant. Moreover you get a JWT-decoded version in the SocialUser object that you receive by subscribing to the authState - including the idToken itself as SocialUser.idToken.
You have to pass the SocialUser.idToken to the backend (instead of the access token) and modify the backend in order to JWT-decode the idToken and process the information contained.

In my case (using django-allauth) this article helped to make the necessary modifications.

[me-ashish]

when and where should we subscribe the authState i.e the following code

this.socialAuthService.authState.subscribe(
{
next: (user) => {
if(user != null) {
const provider = user.provider.toLowerCase();
if (provider == 'google') {
this.getAccessToken();
}
else {
this.authToken = user.authToken;
this.signIn(provider);
}
}
else
this.authToken = undefined;
}

as i've used asl-google-signin-button to trigger the signin with google and any methods binded to the click event on this button is not getting it done.

[rhyous]

@albert-nagy To authenticate and be done, no, you don't need the access token, but if we need the app to then query the Google calendar or anything else as part of this, the access token is needed. There are steps for this, but they don't work. I get a pop-up block when I try to follow those steps.