MusicKit JS v1 token not set in storage

Question

digableincpatrick OP

Created Dec ’22

Replies 1

Boosts 0

Participants 2

Hello!

I'm working to integrate my web application with MusicKit JS. I am experiencing an issue with the authentication flow where the proper localStorage key is not set with the music token after authenticating successfully.

The expected output after going through the authentication flow is a localStorage key to be set with a name similar to "music.r4p2h4kf4l.u". I have tested my developer token using a simple HTML file, and after successfully authenticating, the localStorage key is set successfully. My web application that I am developing and experiencing this issue on is built using strapi/reactjs.

I have dug into this issue much deeper in the vendor JS code and have possibly narrowed the issue down to immediately after inputting the 6 digit security code. When testing using my simple JS file, a sessionStorage key named "ac" is set to my app's URL (in this example, localhost:3000). When I test using my strapi/react application, this sessionStorage key is not set, and thus I believe this is preventing calls to postMessage and localStorage to not function properly.

I have confirmed that when initially opening the auth dialog, the /woa endpoint is called and the referrer parameter is properly set.

Does anyone have any idea why this wouldn't work for a reactjs/strapi app? My actual authentication is succeeding and I see a music user token being successfully retrieved in the console within the auth popup.

I have spent a lot of time on this and am running out of ideas!

Boost

Answer 1

kttyo OP

Jan ’23

I ran into the same problem before, but with Django, not strapi/react.

The cause for my issue was that I was using an anchor tag with a dummy link like , so by the time the sign-in pop-up would open, my main window's URL was something like "http://localhost:8000/#".

This "#" at the end was causing the issue, and I fixed it by avoiding the "#" to be appended in the URL.

0