Google One Tap
Descope supports adding Google One Tap to your application through FedCM using the Descope SDKs. The Descope SDKs come with a pre-wrapped FedCM component, which you can easily use to adapt Google One Tap login within your application. This guide will cover configuring your custom Google provider and implementing code within your application to utilize One Tap. This guide also covers running post-authenticated flows after a user has successfully authenticated via Google One Tap.
Note
Google One Tap requires you to have your own Google Provider configured with the Implicit
grant type
enabled within Descope's configuration. The Google Provider Configuration
section below covers this configuration.
What is Google One Tap?
Google One Tap is a sign-in feature that allows users to log into websites or apps with just one click without remembering or entering passwords. It simplifies authentication using a secure token-based process linked to the user's Google account. This feature can be embedded into websites and apps, offering a seamless, fast login experience that reduces user friction. It's designed to improve user convenience and security by eliminating the need for repeated credential entry. Additionally, it helps businesses increase user sign-ups and engagement by minimizing barriers to entry.
Google Provider Configuration
Google One Tap requires you to have your own Google Provider configured with the Implicit
grant type
enabled within Descope's configuration. We have a thorough guide on configuring your own Google OAuth
provider here; however, the below will
expand on this configuration.
Authorized JS Origins and Redirect URIs
When it comes to Google One Tap and configuring your Google Client's javascript Origins and Redirect URIs, you need to ensure that you properly configure them to allow Google to allow the required bidirectional traffic for One Tap.
Per our Google Provider Configuration Guide,
we cover that you must include your application URL within the Authorized Javascript origins
, which is
still applicable for One Tap. Within that guide, we also cover the Authorized redirect URIs
, which
would be something like https://api.descope.com/v1/oauth/callback
or your custom
CNAME https://auth.myapp.com/v1/oauth/callback
; however, when it comes to Google One Tap, the redirect
URI will go back to your application before any further redirects to Descope's callback.
This means that when configuring your Google API Credentials for the Google provider, you'll need to
include your application URL within the Authorized redirect URIs
. Below is an example assuming that
your application is on myapp.com
and has a custom CNAME configured.
Implicit Grant Type
Now that you have successfully configured your Google OAuth Provider to be compatible with Google One
Tap, you will also need to make a change within the Google OAuth provider within the Descope console by
going to the OAuth Configuration page,
selecting Google, then adding the additional grant type of Implicit
, and saving the configuration. An
example of this configuration can be seen below.
Implementing One Tap Component
The Descope frontend SDKs support the usage of Google One tap. The examples below outline how to implement
the One Tap component within your application using the fedcm.oneTap
function of the Descope SDKs.
Example Applications
To see the experience of OneTap, check out OneTap.guru.
Descope has added Google One Tap examples within various sample applications listed below.
Post Authentication Flows with One Tap
There may be some scenarios where you want to run a post-authentication flow when using Google One Tap. A few examples may be getting additional user data on Sign-up, running connectors within a flow for just-in-time migration, or hitting your API on user sign-up or in.
Below is a React code snippet showing how to utilize a flow in a modal once One Tap authentication has been completed. The key piece to note within the example code is handling the success of One Tap and showing the modal with the Descope flow you want to use after the completion of One Tap.
Note
When you implement the post One Tap authentication flow, you must use the Load User action to get the current user's details. The section below provides an example post One Tap flow.
Example Post One Tap Flow
When implementing the post-one-tap authentication flow, you must use the Load User
action to get
the current user's details. Below is an example of how you would utilize the Load User
action within
a post-one-tap authentication flow.
Supported Browsers
Currently Google One Tap is supported on Chrome, Edge, Firefox, and Safari; however, this support is independent of Descope. To view supported One Tap browsers, see Google's Documentation