Twitter OAuth with popup

I want to use Twitter OAuth 2.0 in a web application within an IFrame. I can't use the redirect because there is the IFrame, so I tried with a popup.

This is the code:

import { useEffect, useState } from "react";
import Button from "@mui/material/Button";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const [code, setCode] = useState(null);
  const [externalPopup, setExternalPopup] = useState(null);

  const handleClick = (e) => {
    const width = 500;
    const height = 400;
    const left = window.screenX + (window.outerWidth - width) / 2;
    const top = window.screenY + (window.outerHeight - height) / 2.5;
    const title = `WINDOW TITLE`;
    const url = `https://twitter.com/i/oauth2/authorize?response_type=code&client_id=MYCLIENTCODE&redirect_uri=http://localhost:3000&scope=tweet.read%20users.read%20follows.read%20offline.access&state=state&code_challenge=challenge&code_challenge_method=plain`;

    const popup = window.open(
      url,
      title,
      `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=${width},height=${height},left=${left},top=${top}`
    );

    console.log("POPUP", popup);

    setExternalPopup(popup);
  };

  useEffect(() => {
    if (!externalPopup) {
      return;
    }

    externalPopup.focus();
    const timer = setInterval(() => {
      if (!externalPopup) {
        console.log(`CLEAR`);

        timer && clearInterval(timer);
        return;
      }

      const currentUrl = externalPopup.location.href;

      console.log("currentUrl", currentUrl);

      if (!currentUrl) {
        return;
      }

      const searchParams = new URL(currentUrl).searchParams;
      const codeParam = searchParams.get("code");

      console.log("codeParam", codeParam);

      if (codeParam) {
        externalPopup.close();

        setCode(codeParam);
        // clear timer at the end
        setExternalPopup(null);
        timer && clearInterval(timer);
      }
    }, 500);
  }, [externalPopup]);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Code: <code>{code}</code>
        </p>
        <Button variant="contained" onClick={handleClick}>
          Signin Twitter OAuth2
        </Button>
      </header>
    </div>
  );
}

export default App;

I can't read the popup content because the popup doesn't have the same origin. How can I bypass this problem? How does Firebase work?