Check for URL change in a pop up window in React

Viewed 240

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"

0 Answers
Related