Get hands-on experience with 20+ free Google Cloud products and $300 in free credit for new customers.

How to debug Google sign-in button not rendering at all

ANY tips on how to debug this further would be great.  The button never renders at all meaning I cannot integrate google's sign in process at all into this application. Any next steps appreciated11 -> 

I am following the [documentation here] (https://developers.google.com/identity/gsi/web/guides/client-library)

There is no errors in developer tools console.  Does google sign-in scripts have logging I can turn on or something to see what is going on and why render fails?

I put this code in TWO apps(one working, one not working) at the end of the body in my index.html for my angular application

        <script src="https://accounts.google.com/gsi/client" async></script>
    </body>
</html>

I add the following html in both apps

  <div id="g_id_onload"
       data-client_id="301124526277-kkp3v1t9479jnmgqdeh2rerk9nabmo94.apps.googleusercontent.com"
       data-context="signin"
       data-ux_mode="popup"
       data-login_uri="/postGoogleToken"
       data-nonce=""
       data-auto_prompt="false">
  </div>

  <div class="g_id_signin"
       data-type="standard"
       data-shape="pill"
       data-theme="outline"
       data-text="signin_with"
       data-size="large"
       data-logo_alignment="left">
  </div>

Although, I tweaked the html in my non-working app to see where the divs would be and to make sure they had room ->

<div class="flex-auto h-20 w-10 border-2 border-blue-900"
     id="g_id_onload"
     data-client_id="309934505077-kkp3v1t9479jnmgqdeh2rerk9nab94mo.apps.googleusercontent.com"
     data-context="signin"
     data-ux_mode="popup"
     data-login_uri="/postGoogleToken"
     data-nonce=""
     data-auto_prompt="false">
</div>

<div class="flex-auto g_id_signin h-20 w-80 border-2 border-red-600"
     data-type="standard"
     data-shape="pill"
     data-theme="outline"
     data-text="signin_with"
     data-size="large"
     data-logo_alignment="left">
</div>

In the working app, the login button renders a very long button 100% of width and then re-renders into a better normal google sign-in button.

In my app that does not work, the button does not render at all.

picture of my working app AND picture of my app that does not work (no google sign-in button) with red and blue borders around the google divs to see if at least the viewing area was big enough..


<Image containing PII removed by staff>

0 0 369
0 REPLIES 0
Top Labels in this Space