0

When clicking on the Continue With Google button, a popup appears (on my website that I created using Django in Python) as expected in Google Chrome asking which account to continue with etc...

By doing the same thing in Microsoft Edge, the popup is blank, there is no content. I'm not sure if it's a problem with my code, my OAUTH account or Microsoft Edge itself.

This is the popup in Google Chrome (working as normally)

This is the popup in Microsoft Edge (not working at all)

I expect the top image to be happening in both browsers. Does anyone have any idea why this isn't working in Microsoft Edge?

EDIT:

The following two errors appear in the Microsoft Edge console but they also show up in Google Chrome:

Failed to load resource: the server responded with a status of 400 ()

[GSI_LOGGER]: The given origin is not allowed for the given client ID.

I tested the website in Firefox and everything works as expected similar to Google Chrome.

Why is Edge the only browser that isn't working (My Microsoft Edge is up to date)

HTML Code:

<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload"
    data-client_id="**********.apps.googleusercontent.com"
    data-login_uri="http://localhost:8000/accounts/continue-with-google/?source=signup"
    data-auto_prompt="false">
</div>
<div id="continueWithGoogleButton" class="g_id_signin"
    data-type="standard"
    data-size="large"
    data-theme="outline"
    data-text="continue_with"
    data-shape="pill"
    data-logo_alignment="left"
    data-width="300">
</div>
Bob The Builder
  • 40
  • 5
  • Please leave a comment if the question is not clear – Bob The Builder Jan 04 '23 at 17:46
  • Can you give us more details? Something like - are there any errors in the console of Microsoft Edge, or inside the Network tab? Has Edge been updated to the latest version? Does this happen in browsers like Firefox and Safari? – FiddlingAway Jan 04 '23 at 17:57
  • I am installing Firefox to test it there, I have edited as requested. Do these errors mean anything to you? @FiddlingAway – Bob The Builder Jan 04 '23 at 18:08
  • I have installed Firefox and it seems to work fine there @FiddlingAway – Bob The Builder Jan 04 '23 at 18:11
  • Take a look at [this SO question](https://stackoverflow.com/questions/68438293/). Even though the OP in that question was asking about `localhost`, there were suggestions and solutions which worked for live websites. Be sure to read and try all of the answers, as there are various solutions suggested. – FiddlingAway Jan 04 '23 at 18:25
  • I have added both http://localhost and http://loaclhost:8000 to my Authorised JavaScript Origins but there is no difference (as the SO question mentioned) @FiddlingAway – Bob The Builder Jan 04 '23 at 18:39
  • Be sure [to read this](https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid#cross_origin_opener_policy), because it seems that might be causing the issue (blank window). Also, [the keypoints](https://i.imgur.com/1ABoCaT.png) are important (#2, and #3), since you're developing in `localhost`. This would also mean that you might need to add (if you don't have it already) a `meta` tag regarding the [referrer policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy#integration_with_html). – FiddlingAway Jan 04 '23 at 19:19
  • Thank you so much, the cross-origin-opener-policy needed to be set to "same-origin-allow-popups". You've really helped me today. @FiddlingAway – Bob The Builder Jan 04 '23 at 19:59
  • Glad I could help. Good luck with the project! – FiddlingAway Jan 04 '23 at 20:00

1 Answers1

1

Be sure to read this, because it seems that might be causing the issue (blank window). Also, the key points are important (#2, and #3), since you're developing in localhost. This would also mean that you might need to add (if you don't have it already) a meta tag regarding the referrer policy.

This was answered in the comments by FiddlingAway. I wanted to post this as an answer to make it clearer for future references. To save a bit of research, in Django, you'll need to write in settings.py file SECURE_CROSS_ORIGIN_OPENER_POLICY = "same-origin-allow-popups". Check the above links to find out what this means.

Hope this helps!

Bob The Builder
  • 40
  • 5