-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bug: Cross-Origin-Opener-Policy error when login prompt opens #24
Comments
Attempted to fix but no success so far. Related thread MomenSherif/react-oauth#326 |
This is likely caused by hybrid use of Therefore a possible solution may be to refactor |
Check if repro after #30 is done, as some people say
https://www.reddit.com/r/Firebase/comments/146zcld/crossoriginopenerpolicy_policy_would_block_the/ |
Another approach is to refactor the Login component to use 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; |
Getting error in console:
client:325 Cross-Origin-Opener-Policy policy would block the window.closed call.
The text was updated successfully, but these errors were encountered: