I am following this documentation google one tap sign in to implement google one tap sign-in in my react app.

I have added below code to my ponent JSX and I started to have google prompt to sign-in:

  const handleCredentialResponse = response => {
    console.log('response', response);
  };

return (
    <Fragment>
      <div
        id="g_id_onload"
        data-auto_select = 'false'
        data-client_id={clientId}
        data-callback={(e) => handleCredentialResponse(e)}>
      </div>
    </Fragment>
  );

Prooblem I am facing is that callback function is not triggering. After looking for a solution I stumbled upon this SO question. Where the OP has asked the similar question, and used javascript API syntax to show google one tap instead of HTML code To follow above question I read this documentation Use the One Tap JavaScript API. But I am not able to understand that from where does the variable google is ing from?

Sample code:

window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    google.accounts.id.prompt();
  }

If someone could tell me that might solve my problem of a callback function not triggering. Thanks!

I am following this documentation google one tap sign in to implement google one tap sign-in in my react app.

I have added below code to my ponent JSX and I started to have google prompt to sign-in:

  const handleCredentialResponse = response => {
    console.log('response', response);
  };

return (
    <Fragment>
      <div
        id="g_id_onload"
        data-auto_select = 'false'
        data-client_id={clientId}
        data-callback={(e) => handleCredentialResponse(e)}>
      </div>
    </Fragment>
  );

Prooblem I am facing is that callback function is not triggering. After looking for a solution I stumbled upon this SO question. Where the OP has asked the similar question, and used javascript API syntax to show google one tap instead of HTML code To follow above question I read this documentation Use the One Tap JavaScript API. But I am not able to understand that from where does the variable google is ing from?

Sample code:

window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    google.accounts.id.prompt();
  }

If someone could tell me that might solve my problem of a callback function not triggering. Thanks!

• javascript
• reactjs
• google-signin
• google-identity
• google-one-tap

• 1 try this wrapper package github./MSalmanTariq/react-google-one-tap-login – Nilesh Patel Commented Dec 10, 2020 at 13:25
• @NileshPatel This package seems new, a little paranoid as there will be lesser support if I stuck somewhere. – Always_a_learner Commented Dec 10, 2020 at 14:21
• Getting error with this package: ReferenceError: window is not defined at useGoogleOneTapLogin (webpack:///./node_modules/react-google-one-tap-login/dist/index.es5.js?:136:17) – Always_a_learner Commented Dec 10, 2020 at 15:34

3 Answers 3

I have found a solution with help of ment posted by Nilesh Patel and this package react-google-one-tap-login.

Checking the source code in the above package I manage to find out that I have to

replace:

 google.accounts.id.initialize({
    client_id: CLIENT_ID,
    callback: data => handleCredentialResponse(data),
    state_cookie_domain: 'https://example.',
  });

with

 window.google.accounts.id.initialize({
    client_id: CLIENT_ID,
    callback: data => handleCredentialResponse(data),
    state_cookie_domain: 'https://example.',
  });

I fixed it by installing types of Google accounts

npm install @types/google.accounts

Just remove the async attribute from script tag:

before:

<script src="https://accounts.google./gsi/client" async defer></script>

after:

<script src="https://accounts.google./gsi/client" defer></script>

If you are using Typescript, you can create a google.d.ts file:

/// <reference types="google-one-tap" />
/// <reference types="google.accounts" />

declare global {
  const google: typeof import('google-one-tap');
}

google-one-tap and google.accounts can be found on NPM.