Google-Auth shows Blank popup after clicking on "Not Now" on Suggestions Screen

[boltcoder]

Summary
My Google Auth flow in popup window works for most of the google users who have completed their profiles and have added recovery options.
For some of the users who haven't completed their google profile, the following Suggestions screen come up:

Please notice the url in the popup window is now https://gds.google.com (and earlier it was accounts.google.com).

Upon clicking on "Not Now",

The auth flow breaks and Blank Screen appears. Please notice that we're being redirected from gds.google.com to accounts.google.com

The error trace in the browser's console is
Cannot read property ‘postMessage’ of undefined

I feel the popup lost it's reference to my website's window in that redirection from accounts.google.com to gds.google.com

My webapp has the header Cross-Origin-Opener-Policy: same-origin-allow-popups set.

Browser(s)/Version(s)
All browsers

Expected Behavior
After clicking on "Not Now" in the Suggestions should continue to authenticate and call the callback registered in the initialize statement. window.google.accounts.id.initialize({callback})

Actual Behavior
After clicking on "Not Now" in the Suggestions screen, popup goes blank and browser gives the following error in console
Cannot read property ‘postMessage’ of undefined

[boltcoder]

Any suggestions here?

[jankrynauw]

do you have any details to share on the auth setup within your app?

[boltcoder]

@jankrynauw Yes.
I have a react application on [email protected].
It's a client side rendered application.

Google scripts are loaded asynchronously after pageLoad event,

<Script
src="https://accounts.google.com/gsi/client"
        strategy="afterInteractive"
/>

Then when our Login Component is loaded, we wait for the parent div element's to be mounted before calling initialize and rendering the button.

const [googleSecureSignInRef, setGoogleSecureSignInRef] = useState(null);


useEffect(() => {
    if (googleSecureSignInRef && window.google) {
      window.google.accounts.id.initialize({
        client_id : config.GOOGLE_CLIENT_ID,
        callback  : onAuthenticationResponse,
      });
      window.google.accounts.id.renderButton(googleSecureSignInRef, {
        theme          : 'outline',
        size           : 'large',
        type           : 'standard',
        shape          : 'pill',
        logo_alignment : 'center',
        width          : 300,
        height         : '54',
      });
    }
  }, [googleSecureSignInRef, window.google]);

  return (

      <div
        className={className}
        ref={setGoogleSecureSignInRef}
      />

  );

[boltcoder]

any suggestions please?

[rafaelpazl]

I have the same problem. I'm trying here, rereading the Google documentation. Anything I find, I'll post it here, bro!

[boltcoder]

Any suggestions !??

[boltcoder]

can anyone please suggest something?

[nishant-panwar-velotio]

Anyone got anything?

[boltcoder]

anyone has anything here? Please?