I'm trying to build an OAuth2 sign in flow in my React app using Google as my Auth provider.
To do this, when a user hits 'login',I open up a new window and direct the user to Google to sign in. (I use this npm package https://www.npmjs.com/package/react-new-window to do so)
I want to close this pop up window when a user has signed in successfully, to check for a successful sign in I want to keep track of the URL in the pop up window (which will change to a redirect URL indicating login success). I keep track of the New Window by assigning a ref to it from the parent component.
var newWindowRef = React.createRef();
return (
<NewWindow
ref={newWindowRef}
url="http://localhost:8080/oauth2/authorization/google"
>
</NewWindow>
)
How can I keep track of the URL in the new Window?
https://www.gethugames.in/2012/04/authentication-and-authorization-for-google-apis-in-javascript-popup-window-tutorial.html -> this post suggests using an interval timer, but this seems crude.
I've also tried using a hook in the parent component:
useEffect(() => {
console.log("New Window URL Changed");
console.log(newWindowRef.current.window.document.URL);
}, [newWindowRef.current.window.document.URL]);
The problem here is that newWindowRef.current is null when the parent component is first rendered, and this errors out: "TypeError: newWindowRef.current is null"