google one tap sign in not working on subdomain domain in react app

Question

I have implemented google one tap sign-in in my react app following steps in Google one tap Web.

Below is the code:

 import React, { Fragment, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getGoogleClientId } from './helpers';

const OneTapSignIn = () => {
  const script = useScript('https://accounts.google.com/gsi/client');

  const dispatch = useDispatch();
  const scriptFlag = '__googleOneTapScript__';
  const handleCredentialResponse = response => {
    if (response.credential) {
     // Use Id token here.
    }
  };

  useEffect(() => {
    if (window !== undefined && script === 'ready') {
      window.google.accounts.id.initialize({
        client_id: getGoogleClientId(),
        callback: data => handleCredentialResponse(data),
      });
      window[scriptFlag] = true;
    }
    if (window[scriptFlag] && script === 'ready') {
      dispatch(hideAddtoHome());
      window.google.accounts.id.prompt(notification => {
        // Check if google prompt is closed.
        if (notification.isSkippedMoment()) {
        }
      });
    }
  }, [script]);

  return (
    <Fragment>
      {/* <div
        id="g_id_onload"
        data-client_id=""
        data-callback={handleCredentialResponse}>
      </div> */}
    </Fragment>
  );
};

export default OneTapSignIn;

This is working as expected and showing prompt on my local environment, but nothing shows up in the DEVELOPMENT Environment. I have added my dev environment domain on google account as instructed in the documentation:

If your project doesn't have a Web application-type client ID, click Create credentials > OAuth client ID to create one. Be sure to include your site's domain in the Authorized JavaScript origins box. Please note that Google One Tap can only be displayed in HTTPS domains. When you perform local tests or development, you must add both http://localhost and http://localhost:<port_number> to the Authorized JavaScript origins box.

My dev url is something like: https://dev.example.com

UPDATE:

As per Display one tap across subdomains we need to add "data-state_cookie_domain" attribute in html code of one tap prompt but in my case as you can see above I am using JS code for displaying one tap prompt how can this be added in JS code?

Update: I added state_cookie_domain:

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

but this did not solve the problem, still not triggering code for google one tap.

Answer 1

Check if you have added http://localhost and http://localhost:<port> in Google Console API for your application

Note: I think you just need to drop the https:// from state_cookie_domain