Google SignIn Login script not working

Question

I had used the following script to integrate google authentication

//google auth code
gapi.load('auth2', function() {//load in the auth2 api's, without it gapi.auth2 will be undefined
    gapi.auth2.init(
        {
            client_id: '1063305095705-k68gpfhi46tbu6kv8e8tidc751hte5pb.apps.googleusercontent.com'
        }
    );
    var GoogleAuth   = gapi.auth2.getAuthInstance();//get's a GoogleAuth instance with your client-id, needs to be called after gapi.auth2.init
    $scope.onLogInButtonClick=function(){//add a function to the controller so ng-click can bind to it
        GoogleAuth.signIn().then(function(response){//request to sign in
            console.log(response);
            console.log(response.wc.wc);
            console.log(response.wc.hg);
            console.log(response.wc.Ph);
        });
    };
});

I am trying to use this in some other application and getting the following error :-

gapi.auth2.ExternallyVisibleError: gapi.auth2 has been initialized with
different options. Consider calling gapi.auth2.getAuthInstance() 
instead of gapi.auth2.init().

I've also included

<script src="https://apis.google.com/js/platform.js?key=xxxxxxxxx"></script>

Everything seems to be fine, don't understand why it does not work..

Answer 1

Next code should help: I have been spent two hours of solving this and because I was receiving the same error, I decided to use onLoad function with custom google sign in button.

Some points, that are probably neccessary if we do not want get profile info from users...

• use onload function as in code below, when using defer async method:

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

• make your own sign in button with click event on signIn function

<a onclick="signIn();">Google Sign In</a>

Full solution is here:

<script src="https://apis.google.com/js/platform.js?onload=onLoadCallback" async defer></script>

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

<!-- I have commented default google sign in button because it didn't allow me to make my own gapi.load -->
<!--<div class="g-signin2" data-onsuccess="ConSignIn"></div>-->

<a onclick="signIn();">Google Sign In</a>

<script>

    function onLoadCallback() {

      console.log('onLoadCallback');
      gapi.load('auth2', function() {
        gapi.auth2.init({
            client_id: 'YOUR_ID.apps.googleusercontent.com',
            //This two lines are important not to get profile info from your users
            fetch_basic_profile: false,
            scope: 'email'
        });        
      });     
    }

    function signIn() {
        console.log('I am passing signIn')

        var auth2 = gapi.auth2.getAuthInstance();         
          // Sign the user in, and then retrieve their ID.
          auth2.signIn().then(function() {
            console.log(auth2.currentUser.get().getId());               
          });         
     }

</script>