Search code examples
reactjsgoogle-one-tap

Google One Tap SignIn Popup not showing


I was trying to implement Google One Tap SignIn in my project. At the first time after building the project the google one tap prompt will display. But next time onwards if we refresh the page also the prompt is not displaying.

Here is my code snippet.

import { addScript } from 'Util/DOM';

/**
 * Loads One Tap Client Library
 */
const loadOneTapClientLibrary = async() => {
    await addScript('https://accounts.google.com/gsi/client');
}

/**
 * Loads One Tap Javascript API
 * @param {*} resolve 
 */
const loadOneTapJsAPI = (resolve) => {
    window.onload = () => {
        google.accounts.id.initialize({
          client_id: "My client Id",
          callback: data => resolve(data)
        });
        google.accounts.id.prompt();
    }
}

export const loadOneTap = async() => {
    return new Promise( (resolve, reject) => {
        loadOneTapClientLibrary();
        loadOneTapJsAPI(resolve);
    })
}

After page loads i am calling loadOneTap();


Solution

  • To avoid One Tap UI prompting too frequently to end users, if users close the UI by the 'X' button, the One Tap will be disabled for a while. This is the so-called "Exponental Cool Down" feature. More detail at: https://developers.google.com/identity/one-tap/web/guides/features#exponential_cool_down

    I believe you triggered this feature during development. To avoid this, use Chrome incognito mode (and restart the browser when necessary).