How to correctly use Google's Javascript OAuth2.0 library

Question

I am trying to access some google APIs from my javascript client using Oauth2. I've succeeded in getting the user to authenticate requests, but there's some unexpected behaviour when running the code below that'd I'd like to understand. When I click the 'authorize' button the first time, the result is:

'[ { "error": { "code": 401, "message": "Login Required", "data": [ { "domain": "global", "reason": "required", "message": "Login Required", "locationType": "header", "location": "Authorization" } ] }, "id": "gapiRpc" } ] '

on the second click the result is

[ { "id": "gapiRpc", "result": { "id": "1115793426680xxxx", "email": "xxxxx@gmail.com", "verified_email": true } } ]

here is the code for the page I am testing

<div id='sign in'>
    <button onclick="init();">Authorize</button>
</div>
<p id="output">hello</p>

<script type="text/javascript">
    function init() {
        document.getElementById('output').innerHTML='loading oauth2 api'
        gapi.client.load('oauth2', 'v2', auth);
    }

    function auth() {
        var config = {
            client_id: '2264xxxxx-odt0g7jn8vspa3ot9ogjxxxxxxxxx.apps.googleusercontent.com',
            scope: 'https://www.googleapis.com/auth/userinfo.email',
            immediate:true
        };
        document.getElementById('output').innerHTML='authorizing'
        gapi.auth.authorize(config, authed());
    }

    function authed() {
        document.getElementById('output').innerHTML='authorized'
        var request = gapi.client.oauth2.userinfo.get().execute(
            function(resp, raw) {
                document.getElementById('output').innerHTML=raw
            }
        );
    }
 </script>
<script src="https://apis.google.com/js/client.js"></script>
<!--<script src="https://apis.google.com/js/client.js?onload=init"></script>-->

Could you please explain why I would get a 'login required' on the first execution of the code and a successful authentication on the second execution?

Answer 1

Due to the parentheses immediately after "authed" in the call to gapi.auth.authorize, the authed() callback is run immediately, prior to the call to gapi.auth.authorize.

Also, in your authed() handler you need to check to see whether the authorization check with immediate: true succeeded; for more details, see the reference documentation here:

https://developers.google.com/api-client-library/javascript/reference/referencedocs#gapiauthauthorize

Also refer to the section on pop-up blocking here:

https://developers.google.com/api-client-library/javascript/features/authentication#popup

When the "immediate" authorization fails, the authed callback will be invoked with a null token object, or a token object containing an "error" field; in these cases you need to present a user interface element the user can click which will re-run the gapi.auth.authorize call but with "immediate" set to false (or omitted). This allows the authorization pop-up to be opened without running afoul of your browser's pop-up blocker.