Iniciar sesión con Google: popup_blocked_by_browser (aplicación Angular)

Estoy tratando de usar Google SSO en mi aplicación. Para este propósito, estoy utilizando exitosamente la biblioteca angularx-social-login.

Sin embargo, también me gustaría utilizar los botones de Google explicados aquí (Iniciar sesión con Google).

Sin embargo, surge el siguiente problema. Cuando el usuario hace clic en el botón de inicio de sesión y luego inicia sesión con su cuenta de Google, el siguiente error es lanzado por el navegador (Chrome): “popupblockedby_browser”.

Parece que ocurre porque también estoy llamando a mi backend durante el procedimiento y, por lo tanto, se bloquea el popup porque el navegador considera que no fue abierto por el usuario.

¿Podrían ayudarme a encontrar una solución para este problema?

Aquí está el código:

<!-- login-component.html -->

<div id="g_id_onload" data-client_id="dummyClientCode" data-callback="googleLogin" data-auto_prompt="false">
</div>
<div class="g_id_signin" data-type="standard" data-size="large" data-theme="outline" data-text="sign_in_with" data-shape="rectangular" data-logo_alignment="left">
</div>

// login-component.ts
import { AfterViewInit, Component, ElementRef, EventEmitter, Output } from 
'@angular/core';

@Component({
  selector: 'demo-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements AfterViewInit {

  // el componente padre realizará la llamada a la API
  @Output() login = new EventEmitter<null>(); 

  constructor(private elementRef: ElementRef) {
  }

  ngOnInit() {
    (window as any).googleLogin = this.login.emit.bind(this);
  }

  ngAfterViewInit() {
    const s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "https://accounts.google.com/gsi/client";
    this.elementRef.nativeElement.appendChild(s);
}