Google-api-javascript-client: message: "Missing required parameter 'client_id'

[nidri]

Facing below error when trying to include Google sign in javascript api in webpage. It is expecting 'google-signin-client_id' meta tag. Client id is being provided through init function as per 'https://github.com/google/google-api-javascript-client/blob/master/samples/authSample.html' but it is first checking meta tag and therefore failing at the script load itself.

[nidri]

This happened because there was a code to render google sign in button in the html. If this line is removed then the error is gone.
<div class="g-signin2" data-onsuccess="onSignIn"></div>

[TMSCH]

Sounds good, closing the issue.

[simeyla]

If you are actually trying to render the sign in button but don't want the meta tag you need to still have a place to render it. You just need to remove that class name, not the whole line:

 <div id="myGoogleButton"></div>

Load the API with this URL (script tag):

  https://apis.google.com/js/platform.js?onload=googleInit

Then pass your client ID in like this:

googleInit()  // you can call this anything (change in URL)
{
    gapi.load('auth2', () => {

        gapi.auth2.init({ client_id: CLIENT_ID }).then(() => {

            // DO NOT ATTEMPT TO RENDER BUTTON UNTIL THE 'Init' PROMISE RETURNS
            renderButton();

        });
    });
}

and render the button with something like this:

        renderButton() {
                 gapi.signin2.render('myGoogleButton'
                {
                    'scope': 'profile email',
                    'width': 240,
                    'height': 40,
                    'longtitle': true,
                    'theme': 'dark',
                    'onsuccess': () => {},
                    'onfailure': () => {}
                });
    }

[hhimanshu]

If you are actually trying to render the sign in button but don't want the meta tag you need to still have a place to render it. You just need to remove that class name, not the whole line:

 <div id="myGoogleButton"></div>

Load the API with this URL (script tag):

  https://apis.google.com/js/platform.js?onload=googleInit

Then pass your client ID in like this:

googleInit()  // you can call this anything (change in URL)
{
    gapi.load('auth2', () => {

        gapi.auth2.init({ client_id: CLIENT_ID }).then(() => {

            // DO NOT ATTEMPT TO RENDER BUTTON UNTIL THE 'Init' PROMISE RETURNS
            renderButton();

        });
    });
}

and render the button with something like this:

        renderButton() {
                 gapi.signin2.render('myGoogleButton'
                {
                    'scope': 'profile email',
                    'width': 240,
                    'height': 40,
                    'longtitle': true,
                    'theme': 'dark',
                    'onsuccess': () => {},
                    'onfailure': () => {}
                });
    }

This was very useful @simeyla. Thanks for the help!

[TomsTotalTech]

Your missing a meta tag with client ID. See below link

https://developers.google.com/identity/sign-in/web/sign-in

[code-citrus]

I also encountered this issue, and just wanted to add some insight on top of @simeyla answer...

The inclusion of the this scripts loads the Google Platform Library:
<script src="https://apis.google.com/js/platform.js?onload=start" async defer

In either case, when the library code executes, it will check to see if #g-signin2 element exists. If it does, it will ensure the google-signin-client_id meta-tag exists and will - internally - call gapi.auth2.init with the client ID, which immediately returns the gapi.auth2.GoogleAuth object that is ready to use.

As such, changing the id from #g-siginin2 to something else will solve the issue, but means you have to add code to manually render the sign-in button. Alternatively, you can keep the automatic initialization and simply use auth2 = gapi.auth2.getAuthInstance() inside of your gapi.load callback.

I believe the following solution works for both cases - whether the library is initialize automatically due to the presence of the element or otherwise:

var appStart = function () {
  gapi.load('auth2', function() {
    if(!(auth2 = gapi.auth2.getAuthInstance())) {
      auth2 = gapi.auth2.init({ client_id: "..." })
     // now you have access to auth2 and can still use auto rendered button!
    }
  });
};
<script src="https://apis.google.com/js/platform.js?onload=appStart" async defer></script>

[camohub]

@TMSCH What you mean by it sounds good? this is a bug. Now is 2020 and still the same error? Why should I use meta tag if I send client_id to javascript? It make no sense.