Q:

Google API Sign In Button: Basic v. Custom

I'm working on adding a Google Sign-In Button to a website.  In the docs, Google offers two options, a "basic" button:
https://developers.google.com/identity/sign-in/web/sign-in
and a "custom" button using signin2.render():
https://developers.google.com/identity/sign-in/web/build-button
The problem I'm encountering is that the two buttons exhibit different behavior.  If I sign in with either button, the button's "title" changes from "Sign In" to "Signed In" to reflect the sign-in status.  However, if I now refresh the page, then the basic button retains the title "Signed In", whereas the custom button changes its title back to "Sign In", suggesting (incorrectly) that the sign-in status has changed through the page refresh.  
If I manually check the sign-in status post-refresh in the browser console by running:
auth = gapi.auth2.getAuthInstance()
auth.isSignedIn.get()

I get true as a return, showing that the refresh indeed did not alter the sign-in status, contrary to the change in the button's title.
So my question is: how can I get the custom button to behave like the basic button, so that its title does not change on refresh?  Another (related, I assume) behavior of the basic button that I like is that the button's "onsuccess" callback gets called on each page load (if the user is signed in), whereas the custom button does not do this.  So I'd also like to change this behavior on the custom button to match that of the basic button.  Any suggestions would be greatly appreciated!

The parameters I'm passing to render look as follows:
function renderButton() {
    gapi.signin2.render('mybutton', {
    'scope': 'profile email',
    'width': 125,
    'height': 40,
    'longtitle': false,
    'theme': 'light',
    'onsuccess': onSuccess,
    'onfailure': onFailure
  });
}

A:

Could you provide params that you're passing to the button? Could you confirm that there aren't any errors in JS console and there aren't any 400/403/404/4xx requests? 
I've tested this functionality using following code and it seems to work perfectly fine (you have to replace YOUR_CLIENT_ID with your actual client_id).

<head>
   <meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
</head>
<body>
  <script>
    function onSuccess(googleUser) {
       console.log('onSuccess!');
    }

    function onCustomSuccess(googleUser) {
       console.log('onCustomSignIn!');
    }

    function signOut() {
      var auth2 = gapi.auth2.getAuthInstance();
      auth2.signOut().then(function () {
        console.log('User signed out.');
      });
    }

    function onLoad() {
      gapi.signin2.render('custom_signin_button', {
        'onsuccess': onCustomSuccess
      });
    }
  </script>

  <div class="g-signin2" data-onsuccess="onSuccess"></div>
  <div id="custom_signin_button"></div>
  <a href="#" onclick="signOut();">Sign out</a>

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

Edit:
Declaring base scope as head's meta tag is the best solution.
<meta name="google-signin-scope" content="profile email">

