All About Google’s One-Tap Sign In

Published in

Groww Engineering

4 min readJun 23, 2018

UPDATE: Recently, Google improved its extensible version of Beta and released a stable version, which came with a few crucial updates. Google notified that their UI was redesigned, and their google one-tap option could now be configured through the HTML set-up or the JS version. The one-tap option also comes with more security features to authorize users with more control.

The new future proof version is set to take precedence from 31st June 2020, as the Beta APIs become inoperative.

Read this updated blog on how to migrate from the old version to the new.

Google recently revealed new secure, frictionless, easy to implement sign up and sign in experience by revealing “googleyolo” API in Google IO 2k18.

If you missed the event, check out this video.

I also recommend other talks for all new cool features to give the best experience to your users.

We, at Groww, wanted to provide a seamless signup experience for our users. And so we implemented One Tap Signup using googleyolo. To see this in action check this.

Why Implement Google One Tap?

Here are some of the success stories of the early adopters of one-tap sign-up and automatic sign-in. This motivated us to adopt it and provide seamless and delightful experience to your customers.

Hipmunk found that by using one-tap sign-up, registered user sign in went up by 118% and new user sign up increased by 115%.
Anghami reports that 50% of users who are presented the option to sign up with one tap take it.
Wego doubled the rate of new user registrations and increased the number of daily signed-in users by 1200% after adding one-tap sign-up to their site.

Check out other stories here at google official page.

What exactly is one tap signup?

With one tap signup, users are prompted to create an account with a dialog that’s inline with your page’s content, so they’re never taken out of context by a signup page. Since there’s minimal friction, users are much more likely to register.

Returning users are signed in automatically, even when they switch devices or platforms, or even after their session expires. The existing users with password-based accounts can also sign-in automatically if they’ve saved their password on Chrome or Smart Lock for Passwords on Android.

Lets try to integrate it on our website

The process is divided into 5 simple steps:

1. Load the googleyolo client library.

<script src="https://smartlock.google.com/client"></script>

2. Call googleyolo.retreive() to check if the user can sign in automatically.

const retrievePromise = googleyolo.retrieve({
  supportedAuthMethods: [
    "https://accounts.google.com"
  ],
  supportedIdTokenProviders: [
    {
      uri: "https://accounts.google.com",
      clientId: "YOUR_GOOGLE_CLIENT_ID"
    }
  ]
});

3. If retrieve fails then call googleyolo.hint() to prompt the user to choose a Google Account to sign up with.

/* Check user not already logged in */
if(!hasSession()){  googleyolo.hint({
    supportedAuthMethods: [
     "https://accounts.google.com"
    ],
    supportedIdTokenProviders: [{
      uri: "https://accounts.google.com",
      clientId: "YOUR_GOOGLE_CLIENT_ID"
    }],
    context: "signUp"  }).then((credential) => {    /* hit backend api and API TOKEN here */
    /* Also save basic details that we get here */  }, (error)=> {
    console.log("Error occurred: ",error.type);
  });
}

4. In credential object above, you will get Id token and other basic information like displayName, id, profilePicture. Collect the data and forward it to the backend and use it to create a new account.

However, keep in mind that you cannot get access token as of now using googleyolo API. Use Auth2 instead.

5. But here’s the catch, this API is not open yet because of security reasons. Use of this API requires review and approval. Submit the review request form to begin the process. All the above steps can be done and pushed into a separate branch. Once you get the API access, you are good to go.

All About Google’s One-Tap Sign In

Why Implement Google One Tap?

What exactly is one tap signup?

Lets try to integrate it on our website

Further Reading

Written by Vikas Singh