Google Authentication on different devices not working when testing locally (Reactjs)

Question

First of all, Google Authentication v.9 (login and registration) works fine when I test on my local (Windows) laptop (the same machine that the NodeJS server is running on).

The application is almost completely finished and ready for deployment, so I want to test it on other devices as well. So, using my iPad and iPhone, I accessed ip.address:3000, where I got the page opened. But when I click on "Sign in with Google", there is no popup. Just open a blank new tab (accounts.google). Pop-ups are allowed on both devices.

Is this normal behavior? Or am I doing something wrong in my code. Then I checked again on my (local) Windows laptop and everything was fine. But I noticed an error message in the console "Cross-Origin-Opener-Policy policy will prevent the window.postMessage call.". Is this why it doesn't work on ios devices? I've been searching for hours but there doesn't seem to be a solution to this problem.

Will the same behavior occur when I deploy it on www?

I know, this is a strange question. I'm fully aware that I may have done something wrong or forgotten something. But I hope someone can help me.

edit: This is the code I run

const { handleGoogle, loading, error } = useFetch('http://192.168.0.999:8800/login');


useEffect(() => {
    /* global google */
    if (window.google) {
        google.accounts.id.initialize({
            client_id: 'xxxxxxxxxxx.apps.googleusercontent.com',
            callback: handleGoogle
        });
        google.accounts.id.renderButton(document.getElementById('loginDiv'), {
                    theme: 'outline',
                    text: 'continue with',
                    shape: 'pill',
                    //size: 'small'
        })
    }
}, [handleGoogle]);

It works fine on my local computer. But when I try it on an iPad or iPhone, there's no popup, just a blank screen. I think this should be where I can choose which Google account. Refresh this page...remain blank. Safari, Chrome show the same behavior. This is the URL of the blank tab that opens: https://accounts.google.com/gsi/xxx.apps.googleusercontent.com&ux_mode=popup&ui_mode=card&asxxxxxxxxxxx192.168.0.999:3000

Answer 1

I have encountered the same problem when working on other platforms. I'm not familiar with React syntax, but I suspect you are setting the callback URL using the following lines...

const { handleGoogle, loading, error } = useFetch('http://192.168.0.999:8800/login');

I also suspect that the IP address is referencing your machine, everything is fine. You might want to try using localhost or 127.0.0.1 for iOS devices and see if you can at least see the phrase "callback returned" on iPhones and iPads. Until then, everything will work normally. When you return to the app (whether this happens automatically or you need to manually switch back to the app), the authentication should be approved.