MusicKit User Token Issues

Question

gonzosan OP

Created Apr ’22

Replies 3

Boosts 0

Views 2.5k

Participants 2

I'm building a music streaming application using Music Kit JS. The frontend uses Vue and the backend uses Express.

That said I had a few questions. I'm trying to generate a token that can be used with the music player configuration. This is how I have it setup currently:

  const mk = await (window as any).MusicKit;
  musicKit.value = await mk.configure({
    developerToken: "DevTokenExample",
    userToken:"userTokenExample",
    app: {
      name: "Apple Streaming Example",
      build: "1.0.0",
    },
  });

I've omitted my developer token and user token. I'm able to stream music just fine, but it plays "previews" of the songs.

I have a login system setup for Apple OAuth authentication using this process: https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_js

And all that works fine, I can get tokens and everything. I tried using the access_token as the userToken in the music kit configuration and the player still plays the previews of the songs.

I also used the id_token for the userToken to see if that would make a difference and it didn't do anything different, still played the previews.

To clarify, yes the account used is signed up to Apple Music.

Since that didn't work, I then used the "musicKit.authorize()" method which gave me a popup and I was trying to log in like that. Once I added in my 2FA code it just says there was an error connecting and I see in the URL an "UNABLE TO VERIFY JWT".

The few posts regarding that issue don't seem to have any fixes.

My questions are:

Can I use the Sign In With Apple Rest API method shown for the music kit user token?
If I can't use the Rest API method, how do I resolve the JWT error when using musicKit.authorize()?

Answered by gonzosan in 710191022

Ok as I suspected the extra "aud" and "sub" when creating the JWT was causing the issue, at least that's the way it seems while testing. I recreated the developer token without them and used that for the music player and logged in with an account that has a subscription to Apple Music and it worked the first time with no issue. I will consider this solved and will also update my Feedback Assistance ticket as well. Thanks for the help!

Boost

Answer 1

Media Engineer OP

Apple

Apr ’22

Thank you for your question, @gonzosan

Sign in with Apple JS provides users of your app or website the ability to securely create and authenticate an account within your app or website. This new account via Sign in with Apple would not have any direct access to a user’s Apple Music account, as it is intended to only to be used for features of your app or website itself.

If the user has an Apple Music subscription and authorizes your app to make requests for data specific to their Apple Music account, you would need a Music User Token. This token is provisioned by MusicKit on the Web using the authorize() method you mentioned, which is what triggers the popup for the authorization flow, when necessary. See MusicKit on the Web | User Authorization documentation for more details.

The UNABLE TO VERIFY JWT error during the authorization flow would indicate that the JWT provided as the developerToken value while configuring MusicKit may be malformed or otherwise not matching the expectations for use with the Apple Music API.

The Generating Developer Tokens documentation explains the specific requirements for the JWT, and provides an example request using curl that can be used to verify the JWT outside of the user authorization flow.

curl -v -H 'Authorization: Bearer [developer token]' "https://api.music.apple.com/v1/test"

If you are having trouble diagnosing the issue, or are seeing the test curl command yields a 200 response but the authorization flow is still responding with an error, then please file a ticket using the Feedback Assistant, including a sample of a JWT that you are expecting to work, details on what steps you have tried thus far, and the verbose curl output showing an error response or a har export from the network inspector capturing the authorization popup flow including the error page.

0

Answer 2

gonzosan OP

Apr ’22

Thanks, I did test my developer token using curl as mentioned above and got a 200 response. I also tested this through Postman with the same 200 response. This is what I have included in the JWT (blocked out potential sensitive info):

I did add in the "sub" and the "aud" as this was needed for the Apple Login logic from what I remember, so I don't know if that is causing the issue.

I'm also able to use this token for various Apple Music API endpoints with no issue. I'm also able to use the Apple Music player just fine, but it only plays in preview mode. I'm using my developer token within the configuration there as mentioned:

const waitForAppleMusic = async () => {
  const mk = await (window as any).MusicKit;
  const token = await getAppleDevToken();
  musicKit.value = await mk.configure({
    developerToken: token,
    app: {
      name: "MusicKit Music Example",
      build: "1.0.0",
    },
  });
};

I submitted a ticket through Feedback Assistance after I submitted my original post here but have not seen any updates.

0

Answer 3

gonzosan OP

Apr ’22

Accepted Answer

Ok as I suspected the extra "aud" and "sub" when creating the JWT was causing the issue, at least that's the way it seems while testing. I recreated the developer token without them and used that for the music player and logged in with an account that has a subscription to Apple Music and it worked the first time with no issue. I will consider this solved and will also update my Feedback Assistance ticket as well. Thanks for the help!

0