Google identity service Signin Button don't appear without page refresh

Question

I got a strange behavior from Google Identity Service signin button while implementing it with react. When I first visit the signin page the Google signin button do not appear but one tap window appear. If I refresh the page then both appears. After that if I navigate to other page and come back to signin page button disappear again but one tap window appear.

page first loading

page after browser refresh

I used the following code for signin button

renderGoogleSignInButton = () => {
return (
  <>
    <div
      id="g_id_onload"
      data-client_id="MY_CLIENT_ID"
      data-auto_prompt="false"
      data-auto_select="true"
      data-callback="handleCredentialResponse"
    ></div>
    <div
      className="g_id_signin mt-4 flex justify-center"
      data-type="standard"
      data-size="large"
      data-theme="outline"
      data-text="sign_in_with"
      data-shape="rectangular"
      data-logo_alignment="left"
    ></div>
  </>
)

}

and following code for one tap window

componentDidMount() {
google.accounts.id.initialize({
  client_id: MY_CLIENT_ID,
  callback: this.handleCredentialResponse,
})
google.accounts.id.prompt()

}

I didn't find any clue using google search, not even in the docs. Thanks in advance for your help.

For the sign-in button it might be the same problem as https://stackoverflow.com/a/70993934/6113915 Don't know about the one-tap problem. — Stian Jørgensrud, Feb 04 '22 at 23:30

score 4 · Answer 1 · answered Aug 28 '21 at 03:24

For those who will have this problem in future with react.

constructor(props) {
super(props)
window.handleCredentialResponse = this.handleCredentialResponse
this.myRef = React.createRef()
}
componentDidMount() {
if (window.google) {
  window.google.accounts.id.initialize({
    client_id:MY_CLIENT_ID
    callback: this.handleCredentialResponse,
  })
  window.google.accounts.id.prompt()
  window.google.accounts.id.renderButton(this.myRef.current, {
    theme: 'outline',
    size: 'large',
  })
 }
}
......
}

Would be nice to have a full example. what to return as view? (also for functional component) — softmarshmallow, Sep 09 '22 at 18:20

score 0 · Accepted Answer · answered Aug 27 '21 at 21:56

It sounds like the One Tap prompt is being displayed as expected, but it was a little unclear. If you're having issues with One Tap, Check out the PromptMomentNotification and getNotDisplayedReason values, they should help you to understand the reason why the One Tap prompt may not be displayed. You might also consider One Tap in an iframe if there's an issue with React being hard to debug.

For the button, if you've not found anything suspicious with pre-rendering, caching or when the div tag containing g_id_signin is loaded you might try rendering the button browser side using JS and renderButton.

Thanks! HTML didn't work. I used JS renderButton and that solved my problem. — M.Islam, Aug 28 '21 at 03:09

score 0 · Answer 3 · answered Sep 28 '22 at 21:35

I had the same issue - login button would not appear without a refresh. For me, it was simply a matter of moving the below logic from App.tsx to Login.tsx.

useEffect(() => {

    dispatch(setCurrentPage("login"));

    google.accounts.id.initialize({
        client_id: process.env.REACT_APP_GOOGLE_CLIENT_ID!,
        callback: handleCallbackResponse
    });

    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    const googleLoginDiv: HTMLElement = document.getElementById("googleLoginDiv")!;

    google.accounts.id.renderButton(googleLoginDiv, { 
        type: "standard",
        theme: "outline", 
        size: "large"
    });

}, []);

Google identity service Signin Button don't appear without page refresh

3 Answers3