Google Identity Custom Login with JavaScript

Question

With Google Sign-In, we are using a custom button skin (following the branding guidelines mentioned on https://developers.google.com/identity/sign-in/web/build-button) and then calling to sign in manually from JS using essentially this:

gapi.load('auth2', function(){
    gapi.auth2.init().signIn().then(function(response) {
        // handle success
    }).catch(function(error) {
        // handle error/cancel
    });
});

I'm looking at the documentation for Google Identity and it appears neither of those (custom button or trigger sign-in via JS) is possible? Is there a way to do it, that I'm missing? We'd really like to be able to keep the Google sign-in button consistent with our other login buttons and handle UI-friendly resizing, etc. Thanks so much!

Note: I know that google.accounts.id.prompt() is in the documentation, but this doesn't appear to work universally. When I try it, I just get an opt_out_or_no_session error and nothing happens. Plus we'd like to use the Google button, rather than one tap, which is what I think this is for.

user_16540599 · Answer

The new button supports a set of visual data attributes to choose from. This removes the need for you to host images and maintain branding guidelines. It helps users by ensuring that sign-in using Google looks and feels the same across sites -- consistency is good for everyone.

There is a code generator that can be used to rapidly cycle through all the different size, shape, color, and text options for the sign-in button.

If you can't find attributes which meet your needs it would be great to hear more about what is lacking. If that still doesn't work you can continue with branding guidelines and directly call OpenID Connect endpoints to authenticate users.

If you only want to display the Sign In With Google button, set data-auto_prompt="true" to suppress One Tap. This isn't recommended as it increases the number of steps and friction on sign-in; One Tap improves sign-in rates.

user_10435604 · Answer

You can do that by doing something like this:

const clientLoad = new Promise(resolve => {
  gapi.load('auth2', () => {
    resolve(gapi.auth2.init({ client_id: '' }));
  });
});

async function login() {
  const client = await clientLoad;
  const response = client.signIn().catch((e) => {
    // in case user closes the popup
    if (e.error === 'popup_closed_by_user') {
      return null;
    }
    throw e;
  });

  // handle your authentication flow with the token received
  console.log(response.getAuthResponse());
}

And in your button:

Google Identity Custom Login with JavaScript

2 Answers