Google One-Tap 2.0

Aman Agarwal
BYJU’S Exam Prep Engineering
2 min readMay 16, 2020

Google One-Tap is a feature that enables a user to signup or signin to your website with just a single click. It creates a smooth experience for the user to jump into the website without going through a series of authentication steps.

Previously Google One-Tap login was a beta feature, until Google released a new updated version with a new implementation. Zapier introduced an improved UX version of the similar integration. And recently google released a version which has a disclaimer of deprecation of it’s previous beta version.

Google One-Tap
Google One-Tap 2.0

The newer version has pros for its integration :

  • Multiple Implementation (HTML API and JavaScript API)
  • Google One-Tap login can be implemented on sub domains without the domain verification.
  • Improved UX (Google Material Design)
  • Multiple automated actions like dismissal after 90 seconds, user clicks on cross icon, etc.

Zapier provided a better integration of GOT (Google One-Tap) with respect to the UX. So after the release of newer version, a warning started showing on the console :

This API is deprecated and will be shutdown on 6/30/2020.Please migrate to the new One Tap API at https://developers.google.com/identity/one-tap/web as soon as possible.`

So I moved the Zapier’s Iframe Version of GOT implementation to newer updated GOT 2.0. I will save your time by not detailing the pros and cons, different scenarios on why to opt for the method of iframe to use GOT. You can refer to the article for the same mentioned in the related section.

I have added a git repository demonstrating the usage of Google One-Tap with a better and constructive way along with the support for the multiple source present per page as well as a single source to use it as a signup or signin feature.

Some Implementations :

Home Page
Google One-Tap 2.0 embedded inside an iframe in a form.
Desktop Page
Google One-Tap 2.0 in a page without background blur
Mobile Page
Google One-Tap 2.0 on a page on mobile using a card view UX (overriding default bottom_sheet on mobile)

--

--

Aman Agarwal
BYJU’S Exam Prep Engineering

Passionate about crafting seamless user experiences and overcoming coding challenges. Let's build something amazing together! https://github.com/AmanAgarwal041