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.

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.

FedCM vs non-FedCM

With FedCM (Federated Credential Management), Google One Tap relies on the browser to provide user session information, and without FedCM, One Tap uses Google's Javascript library, relying on mechanisms like cookies. FedCM is supported by Chromium-based browsers, while all major browsers support the non-FedCM version. You can specify whether or not to utilize FedCM in your implementation through our customization options.

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.

Customization

Customize the One Tap Component by passing in the following optional props in OneTapConfig:

• auto_select: boolean on whether the user is automatically signed in
• prompt_parent_id: ID of the prompt parent container, used to set location of the One Tap prompt
• cancel_on_tap_outside: boolean on whether to cancel the One Tap prompt if the user taps elsewhere on the page. Default is true
• context: modifies wording on the One Tap prompt. Context can be "signin", "signup," or "use". Default is "signin"
• intermediate_iframe_close_callback: callback function to handle the intermediate iframe close event
• itp_support: boolean on whether to support Intelligent Tracking Protection (ITP). Default is false
• login_hint: String to skip account selection if the application knows which user should be signed in
• hd: allowed domain that the user can sign in with
• use_fedcm_for_prompt: boolean on whether to use FedCM for the prompt. Default is false

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 OneTapConfig: { 
      //auto_select: boolean;
      //prompt_parent_id: string;
      //cancel_on_tap_outside: boolean;
      //context: "signup" | "signin" | "use" | undefined; 
      //intermediate_iframe_close_callback: any;
      //itp_support: boolean;
      //login_hint: string;
      //hd: string;
      //use_fedcm_for_prompt?: boolean; 
  } = {
      //auto_select: true,
      //prompt_parent_id: "example-id",
      //cancel_on_tap_outside: false,
      //context: "signin",
      //intermediate_iframe_close_callback: logBeforeClose,
      //itp_support: true,
      //login_hint: "user@example.com",
      //hd: "example.com",
      //use_fedcm_for_prompt: false, 
  };
 
  const startOneTap = useCallback(async () => {
    if (oneTapInitialized) return;
    await sdk.fedcm.oneTap('google', OneTapConfig);
    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;

FedCM Helper Functions

If you are using FedCM, you can utilize additional functions to track user behavior:

• isLoggedIn(): returns boolean on the logged in state of the user
• isSupported(): returns boolean on whether the current browser supports FedCM
• onSkip(): fired when the One Tap prompt is skipped

  const startOneTap = useCallback(async () => {
    if (oneTapInitialized) return;
    await sdk.fedcm.oneTap('google', {use_fedcm_for_prompt: true}, {},
     () => {console.log("One-Tap sign-in was skipped");}
    );
    const isLoggedIn = await sdk.fedcm.isLoggedIn();
    const isSupported = await sdk.fedcm.isSupported();
    if (isLoggedIn && isSupported) {
        console.log("One Tap prompt was actually shown.");
    }
    oneTapInitialized = true;
    navigate("/dashboard");
  }, [sdk, router]);

Non-FedCM Helper Functions

If you are not using FedCM, you can utilize these functions:

• onSkip(reason): fired when the One Tap prompt is skipped
• onDismissed(reason): fired when the One Tap prompt is dismissed

  const startOneTap = useCallback(async () => {
    if (oneTapInitialized) return;
    await sdk.fedcm.oneTap(
      "google",{use_fedcm_for_prompt: false}, {},
      (skipped_reason) => {console.log("One Tap sign-in was skipped. Reason:", skipped_reason);},
      (dismissed_reason) => {console.log("One Tap sign-in was dismissed. Reason:", dismissed_reason);}
    );
    oneTapInitialized = true;
    navigate("/dashboard");
  }, [sdk, router]);

Example Applications

Descope has added Google One Tap examples within various sample applications listed below.

• Next.js
• HTML
• Angular

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.

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.

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