All About Google’s One Tap Sign In

Vikas Singh
Jun 23, 2018 · 3 min read

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.

This is how it looks on desktop.

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?

Login dialog that’s inline in you page.

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.

Further Reading

I recommend reading official docs. You will get to know various error types to display proper messaging in case of failure. Also, there is a section on how to get your Google Client ID if you don’t have one. For any further query ask a question under the google-identity tag here.

If you enjoyed this story, please click the 👏 button and share to help others find it! Feel free to leave a comment below.

The Groww Engineering publishes technical stuff, latest technologies and better ways to tackle common programming problems. You can subscribe to get them here.

Groww Engineering

Groww Engineering and Tech

Vikas Singh

Written by

I code to bring wow experience for users

Groww Engineering

Groww Engineering and Tech

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade