Google API Uncaught exception when use gapi.load

Question

When I used this type of initialization:

var auth2;
gapi.load('auth2', function() {
    gapi.auth2.init({
    client_id: 'MY_CLIENT_ID.apps.googleusercontent.com',
}).then(function(){
    auth2 = gapi.auth2.getAuthInstance();
    console.log(auth2.isSignedIn.get()); //now this always returns correctly        
    });
});

I got the following error:

uncaught exception: gapi.auth2.ExternallyVisibleError: Missing required parameter 'client_id'  (unknown)
TypeError: auth2 is undefined

But if I initialized using meta tag

<meta name="google-signin-client_id" content="MY_CLIENT_ID.apps.googleusercontent.com">

That works, but auth2.isSignedIn.get() gave me inconsistent values.

How can I solved this issue?

Adil B · Accepted Answer · 2017-12-17 03:17:49Z

1

You may have included the below line of code to display Google's Sign In button.

<div class="g-signin2" data-onsuccess="onSignIn"></div>

If so, remove that from your html page and check if you are still getting error in console.

edited Dec 17, 2017 at 3:17

Adil B

17.2k12 gold badges72 silver badges92 bronze badges

answered Dec 16, 2017 at 22:00

Krishna Santosh Nidri

4404 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kermit_ice_tea Over a year ago

But that does not solve the issue at hand. Google Docs indicates that you add that class. So if it is removed, your CSS component for the button will not render

Krishna Santosh Nidri Over a year ago

You need to add button on your own.

Kermit_ice_tea Over a year ago

Google patterns. You should ensure when you use their auth methods to sign in, you use their buttons and logo for clarity.

koopmac · Accepted Answer · 2020-04-04 06:49:22Z

Building on Krishna's answer, specifically, you want to remove the data-onsuccess="onSignIn"></div> section, then create a custom button:

<div id="my-signin2"></div>
<script>
    function renderButton() {
    gapi.signin2.render('my-signin2', {
        'scope': 'profile email',
        'width': 240,
        'height': 50,
        'longtitle': true,
        'theme': 'dark',
    });
    }
</script>

As my sign-in is handled server-side I've added another jquery function to redirect to my backend flow, but you can adjust accordingly:

    <script>
    $('#my-signin2').click(function() {
        // if your sign in is handled by your backend:
        location.href = "/signin";

        // signInCallback defined in step 6.
        // auth2.grantOfflineAccess().then(signInCallback);
    });
</script>

Collectives™ on Stack Overflow

Google API Uncaught exception when use gapi.load

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related