New Google sign-in button (GSI) doesn't render dynamically

Question

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.

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

Is there a way around this?

Answer 1

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",
  }
);