I have a single-page react app hosted on github pages, which comes with many limitations. In order to get my "Login with Twitter" flow working, I found it was necessary to open the dynamic twitter login url in a new tab, give the Twitter API an endpoint on my backend as the callback URL, and then have my backend redirect the user to the root url of my frontend client with the generated JWT token in the URL as a query (/?token=abcd1234). I then have some code on the landing page of my client that looks like this:

useEffect(() => {

        // at /?close, just close the window
        if (props.location.search === '?close') {
            window.close()
            closeWindow()
            setShowCloseMessage(true)

        // at /?token, save the token to localstorage, then close the window
        } else if (tokenUrlRE.test(props.location.search)) {
            const token = props.location.search.match(tokenRE)[0]
            localStorage.setItem('token', token)
            window.close()
            closeWindow()
            setShowCloseMessage(true)
        }

    }, [])

This works fine in Chrome, but not Firefox - perhaps Firefox is more stringent about requiring that Windows only be closed by the script that opened them, and Chrome allows any script on the same domain that opened a window to close it?

Anyway, several other answers here on Stackexchange recommended the following code, which I added inside the closeWindow() function appearing in the above code:

function closeWindow() {
            console.log('clicked close')
            window.open('', '_parent', '')
            window.close()
        }

But this also did not work in Firefox. Furthermore, this additional solution I found caused React to crash:

open(location, '_self').close()

Is there any way to accomplish what I want with Firefox? For the time being I have simply used that showClose state variable seen in the first code block to display a "Sign-in successful, please return to the previous tab" message, but this is less than ideal.