1

When I click on the "sign up with google button" nothing is displayed on the pop-up window.

I have gone through some of the previous posts in SO but they didn't fix this issue:

Links Visited

Here is the output :

Pop up window

This the JS Authorized Origin Configuration

Authorized Origin Image

I'm using Django as backend and here is the code to display the google sign up button :

<html>

<head>
  <script src="https://accounts.google.com/gsi/client" async defer></script>
</head>

<body>
  <div id="g_id_onload" data-client_id="client_id" data-context="signup" data-ux_mode="popup" data-login_uri="http://localhost:8000/users/register/signinWithGoogle" data-nonce="" data-auto_prompt="false">
  </div>

  <div class="g_id_signin" data-type="standard" data-shape="rectangular" data-theme="outline" data-text="signup_with" data-size="large" data-logo_alignment="left">
  </div>

</body>

</html>

Django settings.py configuration :

SECURE_REFERRER_POLICY = "no-referrer-when-downgrade"

CSRF_COOKIE_SECURE = True
SESSION_COOKIE_SECURE = True
CSRF_COOKIE_SAMESITE = 'None'
SESSION_COOKIE_SAMESITE = 'None'

Why is the "sign up with google" button not working am I missing something and how we can fix it?

Michael M.
  • 10,486
  • 9
  • 18
  • 34
Udesh
  • 2,415
  • 2
  • 22
  • 32
  • I tested your signin button and it works fine for me. The error message implies that you have not set the Javascript origin correctly but http://localhost:8000 should be correct are you sure you put it on the correct client in the correct project? – Linda Lawton - DaImTo Feb 04 '23 at 12:27
  • @LindaLawton-DaImTo what do you mean by correct client in the correct project can you please elaborate? – Udesh Feb 04 '23 at 12:42
  • When I switch to `developer mode` on the popup window(SignUp With Google) its displaying this error message `m=credential_page_library:45 [GSI_LOGGER]: The given origin is not allowed for the given client ID.` – Udesh Feb 04 '23 at 12:48
  • origin is the javascript origin. Your app appers sto be running from localhost:8000 which would mean that you should be able to add localhost:8000 or just localhost which i can see you have done. Making me think maybe your changing it on the wrong client. – Linda Lawton - DaImTo Feb 04 '23 at 13:52
  • If more details from me let me know I will update the answer – Udesh Feb 04 '23 at 13:55
  • now instead of 127.0.0.1 I'm using localhost and now its showing `Uncaught TypeError: Cannot read properties of null (reading 'postMessage') at Ei (m=credential_page_library:202:183)` in the popup window – Udesh Feb 04 '23 at 14:27
  • @devp Go to the Google Developers Console. Select the project associated with your API client ID. Go to the "Credentials" page. Locate the API client ID you are using in your code. Click on the "Edit" button next to the API client ID. In the "Authorized JavaScript origins" section, add the origin (URL) of your website where the Google Sign-In integration is located. Save the changes. – mirodil Feb 07 '23 at 05:55
  • What's displayed under the `Console` tab? Do you have any extensions, VPN, adblockers, PiHole, etc? – Slbox Feb 08 '23 at 00:35
  • Can you share the entire URL from the sign-in popup? – Heiko Theißen Feb 11 '23 at 08:54
  • `https://accounts.google.com/gsi/select?client_id=mine_client_id&ux_mode=popup&ui_mode=card&context=signin&as=6tu%2Bpcu8BxQtCcYkJS7Htw&channel_id=900ae4df16409775cb8bcd203f0c39324fe0fa8aad457d8329148223623a0e1f&origin=http%3A%2F%2Flocalhost%3A8000` – Udesh Feb 13 '23 at 08:58
  • I have replaced my client id with mine_client_id – Udesh Feb 13 '23 at 08:58

3 Answers3

3

If you don't mind using Javascript for your Google Sign In, you can follow these steps that I had to undertake to achieve the entire flow. You would also need to add your localhost to the Authorized origins which I believe you are doing.:

First create a button that will hold the HTML element:

<button id="btnGoogleSignIn" style="border:none;background: none;"> </button>

You can then use the below script and associated functions in which I am getting the JWT token from Google and then decoding it to get the required information out like email address etc. Note that I am calling the onSignInGSI as callback on the button initialization.

<script>  
    function decodeJwtResponseFromGoogleAPI(token) {
            let base64Url = token.split('.')[1]
            let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
            let jsonPayload = 
           decodeURIComponent(atob(base64).split('').map(function (c) {
                return '%' + ('00' + 
           c.charCodeAt(0).toString(16)).slice(-2);
            }).join(''));
            return JSON.parse(jsonPayload)
        }

    function onSignInGSI(response) {
        //console.log(response)
        responsePayload = decodeJwtResponseFromGoogleAPI(response.credential);
        console.log("ID: " + responsePayload.sub);
        console.log('Full Name: ' + responsePayload.name);
        console.log('Given Name: ' + responsePayload.given_name);
        console.log('Family Name: ' + responsePayload.family_name);
        console.log("Image URL: " + responsePayload.picture);
        console.log("Email: " + responsePayload.email);
    }

    window.onload = function () {

        google.accounts.id.initialize({
            client_id: client_id,
            context: 'signin',
            callback: onSignInGSI
        });

        google.accounts.id.prompt((notification) => {
             if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
               document.cookie =  `g_state=;path=/;expires=Thu, 01 Jan 1970 00:00:01 GMT`;
               google.accounts.id.prompt()
            }
         });
        
        google.accounts.id.renderButton(document.getElementById("btnGoogleSignIn"), 
        {
            type: "standard",
            text: "signin_with",
            logo_alignment: "left",
            width: 375
        });
    };
</script>
<script src="https://accounts.google.com/gsi/client" async defer></script>

For more configuration options on the button you can refer here:

Rahul Sharma
  • 7,768
  • 2
  • 28
  • 54
  • isn't this technique is deprecated we can't use this technique in future? – Udesh Feb 12 '23 at 11:47
  • @devp This is the new technique which uses the GSI library. The old technique uses the platform.js library which is being deprecated. – Rahul Sharma Feb 12 '23 at 15:09
  • I tried this method I'm getting this error in my Javascript console it also generated in previous code `Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute Because a cookie’s SameSite attribute was not set or is invalid, it defaults to SameSite=Lax, which prevents the cookie from being sent in a cross-site request. This behavior protects user data from accidentally leaking to third parties and cross-site request forgery. Specify SameSite=Strict or SameSite=Lax if the cookie should not be sent in cross-site requests. 18 cookies` – Udesh Feb 12 '23 at 15:30
  • When I press google signIn button the dialog pops up but nothing is displayed and in console this error message is generated `client:110 POST https://accounts.google.com/gsi/log?client_id=YOUR_CLIENT_ID&as=77esRGA2kLL2lppDXuIEzg&event=onetap.closed.buttonFlowStarted net::ERR_BLOCKED_BY_CLIENT` – Udesh Feb 12 '23 at 15:33
  • @devp I have my updated answer in the `google.accounts.id.prompt` function. You should also try clearing out your cookies on the development environment. – Rahul Sharma Feb 12 '23 at 16:45
  • `Uncaught TypeError: Cannot read properties of null (reading 'postMessage') at Ki (m=credential_page_library:201:183) at Li (m=credential_page_library:201:105) at _.Pi.i (m=credential_page_library:203:342) at _.uj.i (m=credential_page_library:211:947) at Object.bootstrap (m=credential_page_library:348:68) at select?client_id=my_client_id&ux_mode=popup&ui_mode=card&context=signin&as=llc7zFJCPS1G/%2BNy9boj%2Bw&channel_id=54e263e7e0620ba9574113bcb48a1badaeac275d302967691cbd5a4aa5879e8c&origin=http://localhost:8000&authuser=0:4:513` – Udesh Feb 13 '23 at 08:31
  • after I clear by browser and tried to login to pop window with my google account its showing black screen and the error message generated on the console of the pop up window is mentioned above – Udesh Feb 13 '23 at 08:33
  • Now when I try to login for `second time` its just showing the black screen on the popup window and the same error message mentioned on the `3rd` and `4th` comment. – Udesh Feb 13 '23 at 08:35
  • @devp Are you running your localhost on http or https? Can you trying running on https. I think google is blocking the request because of SSL error – Rahul Sharma Feb 13 '23 at 09:22
  • @devp Your 3rd comment (related to cookie) is related to server side setting of cookie which you should remove on the development environment and should only be set on production environment – Rahul Sharma Feb 13 '23 at 09:34
  • I will test google sigin on https for that I have to deploy my application to the server and within some days I will do that. – Udesh Feb 13 '23 at 09:44
  • for the project Using `django` as the backend framework and I have set `cookies` but its still showing these errors. These are the settings for the project backend server `SECURE_REFERRER_POLICY = "no-referrer-when-downgrade" CSRF_COOKIE_SECURE = True SESSION_COOKIE_SECURE = True CSRF_COOKIE_SAMESITE = 'None' SESSION_COOKIE_SAMESITE = 'None'` – Udesh Feb 13 '23 at 09:45
  • @devp Have you tried removing this configuration on your server side and then try on localhost? When you deploy on production environment with `https` then it should work without any problems since I have tried and tested this myself on live sites. – Rahul Sharma Feb 13 '23 at 09:48
  • Yes I have tested without these settings and it showed more error messages `Failed to load responded with a status of 400 m=credential_button_library:45 [GSI_LOGGER]: The given origin is not allowed for the given client ID. @ m=credential_button_library:45 accounts.google.com/gsi/iframe/select?client_id=my_client_id_here&ux_mode=popup&ui_mode=card&context=signin&as=long_msg&channel_id=some_id_here&origin=http%3A%2F%2Flocalhost%3A8000:1 Failed to load resource: the server responded with a status of 400 accounts.google.com/gsi/log?client_id=my_client_id_here&::ERR_BLOCKED_BY_CLIENT` – Udesh Feb 13 '23 at 09:54
  • I had to reduce the error message generated cause it was too long and the replaced my original client id with my_client_id – Udesh Feb 13 '23 at 09:55
  • @devp As per Google documentation: https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid#get_your_google_api_client_id , you need to set the `Referrer-Policy: no-referrer-when-downgrade ` header when testing using http and localhost. – Rahul Sharma Feb 13 '23 at 10:07
  • I have set this variable in the server `SECURE_REFERRER_POLICY = "no-referrer-when-downgrade"` – Udesh Feb 13 '23 at 10:10
  • @devp Do you see any errors when you try in incognito mode.? – Rahul Sharma Feb 13 '23 at 10:19
  • In Incognito it shows the same error msg. – Udesh Feb 13 '23 at 10:23
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/251832/discussion-between-rahul-sharma-and-devp). – Rahul Sharma Feb 13 '23 at 12:28
1

from the details you had mentioned, Auth code flow failed as soon as it started due to unauthorized origin.

As per the message "m=credential_page_library:45 [GSI_LOGGER]: The given origin is not allowed for the given client ID" you had mentioned, you need to add "http://localhost:8000/users/register/signinWithGoogle" to authorized javascript origins.

Also you need to validate that client id you are using is correct.

Vivek Agrey
  • 21
  • 2
  • We can't add `http://localhost:8000/users/register/signinWithGoogle` to the authorized URL list its giving error `Invalid origin: URIs must not contain a path or end with '/'.` – Udesh Feb 12 '23 at 11:45
1

The error occurs for apps with "Publishing Status = In production" when your "Authorized JavaScript origin" does not start with https:// but with http://.

  • http://my.server.name:8000 is not accepted, a message is shown:

    Invalid Origin: This app has a publishing status of "In production". URI must use https:// as the scheme.

  • http://localhost:8000 shows no such message, but still leads to the error.
  • https://my.server.name:8000 works.

Strangely, when "Publishing Status = Testing", the behavior is the same, except that the message for http://my.server.name:8000 does not appear.

(The Publishing Status of an app is maintained in the Google Cloud console under "APIs and Services > OAuth consent screen".)

Heiko Theißen
  • 12,807
  • 2
  • 7
  • 31