como definir a variável google ao usar google one tap javascript API

Question

Estou seguindo esta documentação do google one tap sign-in para implementar o google one tap sign-in no meu app react.

Eu adicionei o código abaixo ao meu componente JSX e comecei a ter o prompt do Google para fazer login:

  const handleCredentialResponse = response => {
    console.log('response', response);
  };

return (
    <Fragment>
      <div
        id="g_id_onload"
        data-auto_select = 'false'
        data-client_id={clientId}
        data-callback={(e) => handleCredentialResponse(e)}>
      </div>
    </Fragment>
  );

O problema que estou enfrentando é que a função de retorno de chamada não está sendo acionada. Depois de procurar uma solução, tropecei nesta questão do SO . Onde o OP fez uma pergunta semelhante e usou a sintaxe da API javascript para mostrar o Google One Tap em vez do código HTML. Para seguir a pergunta acima, li esta documentação Use a API JavaScript do One Tap . Mas não estou conseguindo entender de onde vem a variável google?

Código de amostra:

window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    google.accounts.id.prompt();
  }

Se alguém pudesse me dizer isso poderia resolver meu problema de uma função de callback não disparar. Obrigado!

Answer 1

Eu encontrei uma solução com a ajuda do comentário postado por Nilesh Patel e este pacote react-google-one-tap-login .

Verificando o código-fonte do pacote acima, consigo descobrir que preciso

substituir:

 google.accounts.id.initialize({
    client_id: CLIENT_ID,
    callback: data => handleCredentialResponse(data),
    state_cookie_domain: 'https://example.com',
  });

com

 window.google.accounts.id.initialize({
    client_id: CLIENT_ID,
    callback: data => handleCredentialResponse(data),
    state_cookie_domain: 'https://example.com',
  });