Bug: Cross-Origin-Opener-Policy error when login prompt opens

[nicmart-dev]

Getting error in console: client:325 Cross-Origin-Opener-Policy policy would block the window.closed call.

[nicmart-dev]

Attempted to fix but no success so far. Related thread https://github.com/MomenSherif/react-oauth/issues/326

[nicmart-dev]

This is likely caused by hybrid use of useGoogleLoginand GoogleLogincomponents in@react-oauth/google package (likely unintended by package author as you should choose one over the other, but I wanted to get the standard Google button look and feel of the latter, with the access token that is given by the former)

Therefore a possible solution may be to refactor Login.jsx to use only useGoogleLoginand just style the Google button manually.

[nicmart-dev]

Check if repro after #30 is done, as some people say

Works locally with warning but once deployed nothing.

https://www.reddit.com/r/Firebase/comments/146zcld/crossoriginopenerpolicy_policy_would_block_the/

[nicmart-dev]

Another approach is to refactor the Login component to use google-auth-library instead of @react-oauth/google:

Example from ChatGPT:

import React from 'react';
import { GoogleAuthProvider } from 'google-auth-library';
import { useNavigate } from 'react-router-dom';
import { OAuth2Client } from 'google-auth-library'; // Assuming you have imported OAuth2Client from google-auth-library

const Login = ({ setUserDetails }) => {
    const navigate = useNavigate();

    const signInWithGoogle = async () => {
        const client = new OAuth2Client({
            clientId: 'YOUR_CLIENT_ID', // Replace 'YOUR_CLIENT_ID' with your actual client ID
        });
        const provider = new GoogleAuthProvider({ client });
        provider.options.prompt = 'select_account';
        try {
            const ticket = await client.verifyIdToken({
                idToken: 'ID_TOKEN_RECEIVED_FROM_CLIENT', // Replace 'ID_TOKEN_RECEIVED_FROM_CLIENT' with the actual ID token received from the client
            });
            const payload = ticket.getPayload();
            const userId = payload['sub'];
            // Now you can obtain access and refresh tokens using your OAuth2 client
            // Example: const tokens = await client.refreshToken(REFRESH_TOKEN);
            // Handle user authentication here, e.g., fetching user details, updating state, etc.
            navigate('/'); // Redirect to home page after successful login
        } catch (error) {
            console.error('Error signing in with Google:', error);
            // Handle error gracefully, e.g., display error message to the user
        }
    };

    return (
        <div className="flex justify-center">
            <button
                className="flex items-center bg-white border border-button-border-light rounded-full p-0.5 pr-4"
                onClick={signInWithGoogle}
            >
                <div className="flex items-center justify-center bg-white w-9 h-9 rounded-full">
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        className="w-5 h-5"
                    >
                        {/* Google logo SVG */}
                    </svg>
                </div>
                <span className="text-sm text-google-text-gray tracking-wider ml-2">
                    Sign in with Google
                </span>
            </button>
        </div>
    );
};

export default Login;

[nicmart-dev]

Still occurs after deployed to production with #30, but let's see once #64