Google One Tap

To use Google One Tap as a social login provider, you will need the Client ID and Client Secret from your Google app as set up with Google Connect. It’s important to note that you can use both the standard Google Connect option where users can authenticate with their Google accounts as well as Google One Tap.

Why use Google One Tap?

Google One Tap allows users to authenticate anywhere on your site or application without needing to go via a dedicated authentication page. This ensures a smooth experience and you can offer users the chance to authenticate anywhere on their user journey.

To see which browsers are supported with One Tap, check out this page in Google’s developer documentation.

Prerequisites

  • You must have configured your site or application to use Google Connect as a social login provider.

  • You must whitelist the origin URL you’re using with One Tap in the configuration in your Google Cloud Platform (GCP) account.

    oneTap whitelist

Default values for Google

The default values available to ReachFive from Google are:

  • id

  • name

  • givenName

  • middleName

  • familyName

  • nickname

  • imageUrl (profile image)

  • email

  • gender

  • birthday

  • phoneNumber

With Google One Tap, you can access those default fields that are part of the id_token. However, you can’t access the additional fields typically available through the Google People API as you can with Google Connect.

Instructions

After configuring Google Connect to work with your ReachFive account, you only need to use the instantiateOneTap method to use Google One Tap. The instantiateOneTap method loads the Google scripts necessary for using One Tap in your site or application and enables the widget. The widget is loaded without checking on authentication from ReachFive, so to avoid displaying the widget to authenticated users, it’s best to doing a checkSession first as part of the implementation.

It’s up to you to decide where and when on your site where you want Google One Tap to be available. To do this, simply call the instantiateOneTap method.

Your users will see something like the following:

onetap example