Estou a caminho de criar meu primeiro aplicativo da web Progressivo, que usa o firebase para armazenar dados. Eu também estou usandoGmail como um ponto de entrada para todos os usuários que usariam o aplicativo. No entanto, estou preso na implementação do login. Abaixo está o meu código para fazer login:

html:

<button md-raised-button color="warn" (click)="logInGoogle()"><md-icon>group</md-icon>Sign in with google to enjoy the app</button> 

ts:

logInGoogle(){
    this.authService.loginWithGoogle().then( user => {
      console.log("User is logged in");
      //this.router.navigate(['/addweather']);
    })
    .catch( err => {
      console.log('some error occured');
    })
  }

Aqui está o serviço:

loginWithGoogle() {
    return this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
  }

Também para verificar oauth estado que tenho isso no meuapp.component.ts construtor:

this.authService.afAuth.authState.subscribe(
      (auth) => {
        if(auth === null){
          console.log("Not Logged in.");
          this.router.navigate(['login']);
          this.isLoggedIn = false;
        }
        else {
          console.log("Successfully Logged in.");
          this.isLoggedIn = true;
          this.router.navigate(['']);
        }
      }
    )

Agora, existem alguns comportamentos que o aplicativo está mostrando:

Essa funcionalidade de login funciona bem nos navegadores, pois se eu clicar no botão de login, ela abre uma nova janela, me autoriza e volta para a mesma guia na qual o aplicativo é aberto.

Quando adiciono o aplicativo à tela inicial e tento fazer login novamente, ele solicita as opções abaixo:

Depois de clicar no chrome, ele me autoriza e me redireciona para o aplicativo, mas o aplicativo mostra uma tela em branco agora e a tela oAuth continua em um estado de processamento infinito.Por que isso está acontecendo? Quero dizer, não deveria funcionar da maneira normal, como funcionava quando o aplicativo era executado no navegador.

Também ao clicar no botão de login, não deve solicitar a opção, como mostrado na imagem acima; em vez disso, deve abrir uma caixa de diálogo oAuth. Eu tentei fazer isso também com o seguinte código:

logInGoogle(){
    var newWindow = window.open('https://accounts.google.com/o/oauth2/auth?scope=https://www.google.com/m8/feeds&client_id=9722-j3fstr5sh6pumie.apps.googleusercontent.com&redirect_uri=https://weatherapp321.firebaseapp.com/__/auth/handler&response_type=token', 'name', 'height=600,width=450');

  }

Isso agora, em vez de solicitar as opções, abre uma caixa de diálogo desejada. Mas depois da autorização, isso me leva de volta à página de login.Por que isso está acontecendo? quando eu já estou verificando o estado de autenticação emapp.component.ts e redirecionar o usuário para a página inicial, se o usuário for autorizado.

Obrigado por ser paciente e ler até o fim. Ajuda seria muito apreciada.

Editar

Como sugerido por Yevgen: Tentei comsignInWithRedirect. Funcionou quando entrei pela primeira vez com um pequeno atraso de 2 segundos. Mas depois que eu saí e tentei entrar novamente, eu recebo uma tela em branco depois de fazer login.