The data-onsuccess function is not called when using Google-Sign in Javascript
<p>I want the user to be able to sign in with his Google account in his web browser. However, the data-onsuccess method isn't being called.</p>

<p>I uploaded a .html file with the sign in code to my webspace, created a Google API project with the relevant settings. I can see see login button. I can click it and input my Google account data and allow my application to access my account. However, the  data-onsuccess method isn't called and so I cannot react to the successful login.</p>

<p>I tried the login with the <a href="https://developers.google.com/identity/sign-in/web/" rel="noreferrer">umodified example code</a> from Google and my own code where I added some debugging to see if JS is working at all:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="utf-8" /&gt;
        &lt;meta name="google-signin-scope" content="profile email"&gt;
        &lt;meta name="google-signin-client_id" content="CORRECT_VALUE_HERE.apps.googleusercontent.com"&gt;
        &lt;script src="https://apis.google.com/js/platform.js" async defer&gt;&lt;/script&gt;
        &lt;title&gt;Google sign in test&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h1&gt;Google sign in test&lt;/h1&gt;
        &lt;div class="g-signin2" data-onsuccess="onSignIn"&gt;&lt;/div&gt;
        &lt;br&gt;
        &lt;a href="#" onclick="signOut();"&gt;Sign out&lt;/a&gt;
        &lt;br&gt;
        &lt;a href="index.html"&gt;Back&lt;/a&gt;
        &lt;br&gt;
        &lt;a href="#" onclick="someTest()"&gt;JavaScript Test&lt;/a&gt;
        &lt;br&gt;
        &lt;ul&gt;
            &lt;li id="gID"&gt;Google ID, temporary&lt;/li&gt;
            &lt;li id="gFullName"&gt;Full Name&lt;/li&gt;
            &lt;li id="gGivenName"&gt;Given Name&lt;/li&gt;
            &lt;li id="gFamilyName"&gt;FamilyName&lt;/li&gt;
            &lt;li id="gImg"&gt;Image URL&lt;/li&gt;
            &lt;li id="gEMail"&gt;E-Mail&lt;/li&gt;
            &lt;li id="gToken"&gt;Google Token, permanent&lt;/li&gt;
        &lt;/ul&gt;
        &lt;script&gt;
            function onSignIn(googleUser) {
                alert('in onSignIn');
                // Useful data for your client-side scripts:
                var profile = googleUser.getBasicProfile();
                document.getElementById('gID').textContent = profile.getId();
                document.getElementById('gFullName').textContent = profile.getName();
                document.getElementById('gGivenName').textContent = profile.getGivenName();
                document.getElementById('gFamilyName').textContent = profile.getFamilyName();
                document.getElementById('gImg').textContent = profile.getImageUrl();
                document.getElementById('gEMail').textContent = profile.getEmail();

                // The ID token you need to pass to your backend:
                var id_token = googleUser.getAuthResponse().id_token;
                document.getElementById('gToken').textContent = id_token;
            };
            function someTest() {
                alert('js is working');
                var x = {};
                x.getBasicProfile = function() {
                    var y = {};

                    y.getId = function() { return 'fake id'; };
                    y.getName = function() { return 'fake fake full name'; };
                    y.getGivenName = function() { return 'fake fake given name'; };
                    y.getFamilyName = function() { return 'fake fake family name'; };
                    y.getImageUrl = function() { return 'fake image'; };
                    y.getEmail = function() { return 'fake e-mail'; };

                    return y;
                };

                x.getAuthResponse = function() {
                    var z = {}

                    z.id_token = 'fake id token';

                    return z;
                };

                onSignIn(x);

            };
            function signOut() {
                var auth2 = gapi.auth2.getAuthInstance();
                auth2.signOut().then(function () {
                    console.log('User signed out.');
                });
            };
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>I don't see any error messages in my browser or my http server. Can anybody tell me what I am doing wrong?</p>

<p>Things I already tried/checked:</p>

<ul>
<li>I check that my client_id in the meta-tag is correct, several times.</li>
<li>I am sure I set the correct "Authorized JavaScript origin". Otherwise I would see and error message during the loging screen.</li>
<li>I am sure I am using a correct login. I can can see my example application among the authorized sites in my google account settings.</li>
<li>I tried moving the script-tag above the div-tags. It doesn't matter. I made sure onSignIn() is a top level JS function.</li>
<li>I tried hosting this .html file somewhere else (in case Heroku blocks this process somehow). It didn't help.</li>
<li>I tried this in up to date Firefox and Chrome on Linux and Windows. No difference.</li>
</ul>