Apple MusicKit JS authorization method doesn't resolve

Question

I'm building a Django application where I'm using Apple's MusicKit JS to authorize users and get their music library songs. I've correctly set up the MusicKit configuration in my HTML, and I am just doing this locally for testing purposes right now.:

MusicKit.configure({
    developerToken: 'My_developer_token',
    app: {
        name: 'My App',
        build: '1.0.0',
    },
});

And I'm using the authorize() method as per the documentation to initiate the authorization flow:

const music = MusicKit.getInstance();

music.authorize().then(() => {
    var checkAuthorization = setInterval(function() {
        if (music.isAuthorized) {
            clearInterval(checkAuthorization);
            console.log("Music User Token: ", music.musicUserToken);
        }
    }, 100);
}).catch((error) => {
    console.error("Authorization failed", error);
});

However, when the user clicks "Allow" in the authorization popup, the Promise returned by authorize() is not resolving. The popup stays on the screen and the Music User Token (MUT) is not logged to the console. Interestingly, I can see the MUT in the network tab in my browser's developer tools.

I've followed the MusicKit JS documentation and still can't figure out why this is happening. Has anyone else experienced this issue? Any suggestions on how to fix it?

Answer 1

Are you using v1? I was having the same issue (although I could not see the MUT in network, just my dev token). I tried v2 and v3 and am now getting a 403 error instead of nothing at all.

edit: Ok, so I moved back to v1 because of the 403 issue. I found that I only have this problem in safari, try it with chrome!