trello authenticate user for token

Question

async authenticateTrello() {
    const authUrl = `https://trello.com/1/authorize?expiration=1hour&name=TrelloPlanner&scope=read,write&response_type=token&key=${TRELLO_APP_KEY}`;

    const token = await new Promise((resolve) => {
        const popup = window.open(authUrl, 'Trello Auth', 'width=800,height=800');
        let tokenFound = false;

      
        const interval = setInterval(() => {
            try {
                if (popup.closed && !tokenFound) {
                    clearInterval(interval);
                    resolve(null);
                    return;
                }

                if (popup.location.href.includes('/token/approve')) {
                    const preElement = popup.document.querySelector('pre');
                    if (preElement && preElement.innerText) {
                        tokenFound = true;
                        const token = preElement.innerText.trim();
                        clearInterval(interval);
                        popup.close();
                        resolve(token);
                    }
                }
            } catch (error) {
              console.log(error)
            }
        }, 500);
    });

    if (token) {
        console.log('Token received:', token);
        this.trelloToken = token;
        sessionStorage.setItem('trelloToken', token);
        this.checkAuth();
    } else {
        console.error('Failed to authenticate with Trello');
    }
}

When I try to authenticate I see a token in the popup in a pre text which has the token. The pop up has the approve URL but the code doesn't grab the token and I cannot figure out why.

I expect that the token is saved and stored to the local storage and the pop up is closed but the program doesn't close the popup.

I tried to log some URL locations and the URL location is correct.