4

I'm trying to integrate the new Google sign in button via HTML ( https://developers.google.com/identity/gsi/web/guides/display-button#button_rendering ) into an SPA.

The <div>s with the app details and the one containing the button itself (g_id_onload, g_id_signin) are only mounted to the DOM in certain views.

The button renders with 0 height (see picture) if mounted after the first page render. enter image description here

Am I doing something wrong here? The Google guide doesn't mention anything about the dynamic rendering case.

Is there a way around this?

ocramz
  • 816
  • 6
  • 18
  • 3
    Google's script cannot constantly watch the whole document for appearance of the button markup. It only does that on first load. If you want the button to appear in some cases, but not in others, you'll have to render it via JavaScript. – Fyodor Soikin Dec 29 '21 at 14:09
  • 1
    Thanks, I will try to make an example of this and Halogen: https://developers.google.com/identity/gsi/web/guides/display-button?hl=en#javascript – Peter Becich Sep 25 '22 at 05:24

1 Answers1

3

You can render the button dynamically using the google.accounts.id.renderButton() method. The google variable is exposed globally.

google.accounts.id.renderButton(
  myContainerDiv,
  {
    // Options go here, for example:
    type: "standard",
    shape: "rectangular",
    theme: "outline",
    text: "signin_with",
    size: "large",
    logo_alignment: "left",
  }
);
LuisAFK
  • 846
  • 4
  • 22