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.

Descope - Google One Tap Pop Up Example

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.

Descope - Google One Tap Example configuration of Google Authorized JS Origins and Redirect URIs

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.

Descope - Google One Tap Example configuration of implicit grant type

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.

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import { useNavigate } from "react-router-dom";
import Home from './pages/Home';
import Dashboard from './pages/Dashboard';
import { Navigate } from 'react-router-dom';
import { Descope, AuthProvider, useDescope, useSession } from '@descope/react-sdk';
import React, { useEffect, useCallback } from 'react';
 
let oneTapInitialized = false;
 
const OneTapComp = () => {
  const sdk = useDescope();
  const { isAuthenticated, isSessionLoading } = useSession();
  const navigate = useNavigate();  // Moved inside the component
 
  const startOneTap = useCallback(async () => {
    if (oneTapInitialized) return;
    await sdk.fedcm.oneTap('google');
    oneTapInitialized = true;
    navigate("/dashboard");
  }, [sdk, router]);
 
  useEffect(() => {
    if (!isAuthenticated && !isSessionLoading) {
      startOneTap();
    }
  }, [isAuthenticated, isSessionLoading, startOneTap]);
 
  return null;  // Render null or any necessary UI
};
 
function App() {
  const projectId = "__ProjectID__";
  return (
    <AuthProvider projectId={projectId}>  {/* optional for custom CNAME baseUrl="https://auth.myapp.com"*/}
      <OneTapComp />
    </AuthProvider>
  );
}
 
export default App;

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.

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import { useNavigate } from "react-router-dom";
import Home from './pages/Home';
import Dashboard from './pages/Dashboard';
import { Navigate } from 'react-router-dom';
import { Descope, AuthProvider, useDescope, useSession } from '@descope/react-sdk';
import React, { useEffect, useCallback } from 'react';
 
let oneTapInitialized = false;
 
const ProtectedRoute = ({ component: Component }) => {
  const { isAuthenticated } = useSession();
  console.log(isAuthenticated)
  return isAuthenticated ? <Component /> : <Navigate to="/" />;
};
 
const Modal = ({ show, onClose }) => {
  const navigate = useNavigate();
  if (!show) {
    return null;
  }
  return (
    <div className="modal-overlay">
      <div className="modal">
        <h2>One-Tap Sign-In Success</h2>
        <Descope
          flowId="step-up"
          validateOnBlur="true"
          client={{"oneTapSuccess": true}}
          onSuccess={(e) => {
            onClose();
            navigate("/");
            console.log("Logged in!");
          }}
          onError={(e) => console.log("Error!")}
        />
      </div>
    </div>
  );
};
 
const OneTapComp = () => {
  const sdk = useDescope();
  const { isAuthenticated, isSessionLoading } = useSession();
  const [showModal, setShowModal] = React.useState(false);
  const startOneTap = useCallback(async () => {
    if (oneTapInitialized) return;
    await sdk.fedcm.oneTap('google');
    setShowModal(true);
    oneTapInitialized = true;
  }, [sdk]);
  useEffect(() => {
    if (!isAuthenticated && !isSessionLoading) {
      startOneTap();
    }
  }, [isAuthenticated, isSessionLoading, startOneTap]);
  
  const handleCloseModal = () => {
    setShowModal(false);
  };
  return (
    <>
      {/* The modal now needs to be rendered inside the Router */}
      <Router>
        <Modal show={showModal} onClose={handleCloseModal} />
        <nav>
          <Link to="/">Home</Link> |{" "}
          <Link to="/dashboard">Dashboard</Link>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/dashboard" element={<ProtectedRoute component={Dashboard} />} />
        </Routes>
      </Router>
    </>
  );
};
function App() {
  const projectId = "__ProjectID__";
  return (
    <AuthProvider projectId={projectId}>  {/* optional for custom CNAME baseUrl="https://auth.myapp.com"*/}
      <OneTapComp />
    </AuthProvider>
  );
}
export default App;

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.

Descope - Google One Tap Post authentication example 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

Was this helpful?

On this page