I am using Google API (gapi) for user log in.

My code is below. It loads google sdk asynchronously. Once it is loaded I need to call the api function gapi.auth.authorize

(function(d: any, s: string, id: string) {
    var js: HTMLScriptElement, gjs: Element = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = ".js";
    gjs.parentNode.insertBefore(js, gjs);

    if (js.readyState){  //IE
        js.onreadystatechange = function(){
            if (js.readyState == "loaded" ||
                js.readyState == "plete"){
                js.onreadystatechange = null;
                gapi.auth.authorize();   //<-- details omitted 
            }
        };
    } else {  //Others
        js.onload = function(){
            gapi.auth.authorize();   //<-- details omitted 
        };
    }
}(document, 'script', 'google-jssdk'));

Now the issue is - I get error

TypeError: gapi.auth is undefined

It should be defined right? I looked at the console, and typed gapi.auth and I get an object in response.

So I believe that js.onload event is getting triggered early, i.e when gapi.auth is not ready.

How to fix this? Or more specifically how to add onload event for gapi?

I am using Google API (gapi) for user log in.

My code is below. It loads google sdk asynchronously. Once it is loaded I need to call the api function gapi.auth.authorize

(function(d: any, s: string, id: string) {
    var js: HTMLScriptElement, gjs: Element = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://apis.google./js/client.js";
    gjs.parentNode.insertBefore(js, gjs);

    if (js.readyState){  //IE
        js.onreadystatechange = function(){
            if (js.readyState == "loaded" ||
                js.readyState == "plete"){
                js.onreadystatechange = null;
                gapi.auth.authorize();   //<-- details omitted 
            }
        };
    } else {  //Others
        js.onload = function(){
            gapi.auth.authorize();   //<-- details omitted 
        };
    }
}(document, 'script', 'google-jssdk'));

Now the issue is - I get error

TypeError: gapi.auth is undefined

It should be defined right? I looked at the console, and typed gapi.auth and I get an object in response.

So I believe that js.onload event is getting triggered early, i.e when gapi.auth is not ready.

How to fix this? Or more specifically how to add onload event for gapi?

• javascript
• google-api-js-client

• I have the same problem. I am using chrome on mac os. I am loading synchronously and when I type gapi.auth into the console it is still undefined and when I type gapi I get an object with many properties such as client, plus, etc. but no auth. Does this have something to do with the APIs enabled from the developer console? All I enabled was the Google+ API. – Nick Sotiros Commented Oct 7, 2015 at 18:27

3 Answers 3

What browser is this seen in? Also, you need to include a ?onload=myFunction parameter at the end of the script's src attribute, then implement window['myFunction'] = function() { ... } to detect library readiness. The loading typically injects an additional script node and you'll need to wait for that one, too.

window.gapi_onload = function() { gapi.auth.authorize(); }

You can also try the package gapi-script, this package provides the gapi instantly, so you don't have to wait any script to load, just import it and use:

import { gapi } from 'gapi-script';

And the package also has a function to initialize the gapi auth2:

import { loadAuth2 } from 'gapi-script';

let auth2 = await loadAuth2(clientId, scopes);