Google-Auth(Google Identity) Blank popup

[ericel]

Google Identity Django

My Google Auth is Stuck in the popup auth flow. The one-tap authentication works just fine but not the button

. I click on it, the popup opens but that's it, it remains there blank with no progress, never closes or anything.

<script defer src="https://accounts.google.com/gsi/client" ></script>
<script>
   function handleCredentialResponse(response) {
     console.log("Encoded JWT ID token: " + response.credential);
     ...
    }
   window.onload = function () {
     google.accounts.id.initialize({
       client_id: "531144-------",
       callback: handleCredentialResponse
     });
     google.accounts.id.renderButton(
       document.getElementById("g_id_signin"),
       { theme: "outline", size: "large" }  // customization attributes
     );
     google.accounts.id.prompt(); // also display the One Tap dialog
   }
</script>
<div id="g_id_signin"></div>

I have all the domains, localhost added in Authorized redirect URIs and Redirects. But I still can't get the popup to populate and complete the authentication flow. Any help is appreciated.

At this point the error I am getting in FIREFOX:

Uncaught TypeError: window.opener is null li https://ssl.gstatic.com/_/gsi/_/js/k=gsi.gsi.en.i....O/am=wg/d=1/rs=AF0...w/m=credential_page_library:291 mi https://ssl.gstatic.com/_/gsi/_/js/k=gsi.gsi.en.i.....O/am=wg/d=1/rs=AF0...w/m=credential_page_library:29

And in CHROME:

Uncaught TypeError: Cannot read properties of null (reading 'postMessage') at li (m=credential_page_library:291:151)

The problem seems to be this picker_popup in this line of code: a,c);return b.g};li=function(a,b){"picker_popup"===a.i?window.opener.postMessage(b,a.j):window.parent.postMessage(b,a.j)};_.ni=function(a,b){var c=new _.Nd;a.g?(a.g.postMessage(b),c.resolve()):c.reject("Illegal state: try to send message before message channel set up.");return c.g};

[wasyyyy]

From the error message it looked like the popup window did not have the access to the opener page. Did you set the Cross-Origin-Opener-Policy to same-origin? If that is the case, you need to set it to same-origin-allow-popups to allow the popup window to talk to its opener.

[Sand1929]

Just kinda happened upon this, and I think I know how to fix it, so I'll leave the answer here. The Cross-Origin-Opener-Policy is likely same-origin, since that is the default for Django sites. To set it to same-origin-allow-popups on Django v4, set SECURE_CROSS_ORIGIN_OPENER_POLICY to same-origin-allow-popups in django settings. Hope it helps you or whoever also finds this!

[ccdunder]

Glad to hear that you found a solution. Please post any more authentication/authorization questions on Stack Overflow with the google-oauth tag. We're unable to provide support for it here.

[vimalkmr816]

does anyone know how to solve this in next js? i've been experiencing the same issue. the dialog box shows to signin into google if I have no accounts already signed in but does not show anything if I have already signed into any gmail account.

[andyeemavens]

does anyone know how to solve this in next js? i've been experiencing the same issue. the dialog box shows to signin into google if I have no accounts already signed in but does not show anything if I have already signed into any gmail account.

try this, it helped me https://stackoverflow.com/a/68469319

[darkddust]

Had a similar issue when using VS2022 17.3.5, where the pop-up for Google sign-in would be blank if already signed in to a Google account. Fixed it by disabling JavaScript debugging from Tools > Options.

[varad615]

I also got the same problem in my wordpress login can anyone help

[purushottam-e9]

Hi @varad615 did you found the solution of this?

[Pablo-Conte]

You need to able the origin in the user account where you generate the clientId

[varadgundap001]

Update: I was able to fix this

[lazy-manushya]

Update: I was able to fix this

Enlighten us

[Megatronicus]

Update: I was able to fix this

You're the emperor of code. Please show us mere mortals mercy by allowing a glimpse of your infinite knowledge used for solving this problem.

[Perun108]

I recently faced this problem as well when upgrading our Django from 3.2 to 4.2 and setting SECURE_CROSS_ORIGIN_OPENER_POLICY to same-origin-allow-popups didn't help, but setting it to unsafe-none solved the issue.

[Megatronicus]

Is this solution good?

unsafe-none

Settings something as unsafe-none doesn't sound, well, safe?

[Perun108]

@Megatronicus I thought the same, but again, it's the only documented value for that setting that did the job in my case. I don't know, but here's how I understand it: it's an additional layer of security introduced to django 4 and Django docs explicitly mention that it can be set to None, which is of course less secure than unsafe-none (c.f. https://docs.djangoproject.com/en/4.2/ref/middleware/#cross-origin-opener-policy). Plus, in the Mozilla HTTP docs it is stated that it's the default browser behavior.

What are you thoughts on this?

[YuliiaBi1a]

You need to able the origin in the user account where you generate the clientId

Thank you, it works!

[sanjacob]

For me it works in Chrome but not in Firefox, where I get this error

[varad615]

Hi @varad615 did you found the solution of this?

Ya while creating token ig i added Authorized JavaScript origins and it started working

[Al3676]

Good good

[Ncode-93]

does anyone know how to solve this in next js? i've been experiencing the same issue. the dialog box shows to signin into google if I have no accounts already signed in but does not show anything if I have already signed into any gmail account.

try this, it helped me https://stackoverflow.com/a/68469319

It really helped, thanks mate