Issues After Switching to v3

I've been having issues with authorization after switching from v1 to v3, have tried some of the suggestions provided by someone in a reply to a post of mine. Have tried to reach out to Apple Support a few times as well, though I haven't received any support that has helped me to move forward.

I have tested my token at https://jwt.io and I'm getting a "Signature Verified", tried multiple browsers in private/incognito mode, now when I try to sign into my Apple Account to test my player I am receiving an error that stats "There is a Problem Connecting. There May be an Issue with Your Network." (which is not the case).

I have tried everything I can think of, I'm at a loss and would appreciate any help to get my project moving forward. This is what I am seeing in the browser developer console (using Firefox):

Authorization failed: AUTHORIZATION_ERROR: Unauthorized MKError https://js-cdn.music.apple.com/musickit/v3/musickit.js:13 authorize https://js-cdn.music.apple.com/musickit/v3/musickit.js:28 asyncGeneratorStep$w https://js-cdn.music.apple.com/musickit/v3/musickit.js:28 _next https://js-cdn.music.apple.com/musickit/v3/musickit.js:28 media.mydomain.com:398:19 <anonymous> https://media.mydomain.com/:398

Answered by DTS Engineer in 825092022

Our engineering teams need to investigate this issue, as resolution may involve changes to Apple's software. Please file a bug report, include a small Xcode project and some directions that can be used to reproduce the problem, and post the FB number here once you do.

Bug Reporting: How and Why? has tips on creating your bug report.

Our engineering teams need to investigate this issue, as resolution may involve changes to Apple's software. Please file a bug report, include a small Xcode project and some directions that can be used to reproduce the problem, and post the FB number here once you do.

Bug Reporting: How and Why? has tips on creating your bug report.

[Error] Authorization failed: AUTHORIZATION_ERROR: Unauthorized

MKError — musickit.js:13:6443

(anonymous function) — musickit.js:28:276672

asyncGeneratorStep$w — musickit.js:28:273705

_next — musickit.js:28:273952

(anonymous function) (media.mydomain.com:398)

generate_token.js:

 const jwt = require('jsonwebtoken');  // <-- This line is required!
 const fs = require('fs');

 const privateKeyPath = '/home/theloungeuser/AuthKey_**********.p8';  // Path to your .p8 file
 const teamId = '*********';  // Your Apple Developer Team ID
 const keyId = '**********';   // Key ID for MusicKit

 const privateKey = fs.readFileSync(privateKeyPath, 'utf8');

 const token = jwt.sign(
   {
     iss: teamId,  // Issuer: Your Apple Developer Team ID
     iat: Math.floor(Date.now() / 1000),  // Issued at: current timestamp (in seconds)
     exp: Math.floor(Date.now() / 1000) + (60 * 60 * 24 * 180),  // Expiration: 180 days from now
     aud: 'music'  // Audience for MusicKit must be "music"
   },
   privateKey,  // Private key used for signing the token
   {
     algorithm: 'ES256',  // Signing algorithm
     header: { kid: keyId }  // Include your Key ID in the header
   }
 );

 console.log(token);

index.html:

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>MusicKit Minimal Test</title>
   <!-- Load MusicKit JS v3 -->
   <script src="https://js-cdn.music.apple.com/musickit/v3/musickit.js" data-web-components async></script>
 </head>
 <body>
   <!-- Minimal UI -->
   <button id="authorize-btn">Authorize Apple Music</button>
   <button id="play-preview-btn">Play Preview</button>

   <script>
     // Wait for MusicKit to finish loading
document.addEventListener('musickitloaded', async () => {
  console.log('MusicKit loaded.');

       // Configure MusicKit with your developer token
       await MusicKit.configure({
         developerToken: 'MY_VALID_TOKEN', // <-- Replace with your valid token
         app: {
           name: 'MinimalTestApp',
           build: '1.0.0'
         }
       });

       const music = MusicKit.getInstance();

       // 1) Authorization Flow
       // Per the article: "User authorization is required before your app can access
       // the user’s Apple Music data ... or for full playback of media."
       document.getElementById('authorize-btn').addEventListener('click', async () => {
         try {
           console.log('Attempting to authorize...');
           await music.authorize();
           console.log('Authorization successful!');
         } catch (error) {
           console.error('Authorization failed:', error);
         }
       });

       // 2) Playing a Preview
       // "Without user authorization, or for users who do not have a valid Apple Music subscription,
       // your app can still play previews of media from Apple Music."
       document.getElementById('play-preview-btn').addEventListener('click', async () => {
         try {
           console.log('Attempting to play a preview...');
           // Set a queue with a known track ID that supports previews.
           // This ID is just an example; you can replace it with any track that has a preview.
           await music.setQueue({ song: '1641309998' });
           await music.player.play();
           console.log('Playing preview (if available)...');
         } catch (error) {
           console.error('Error playing preview:', error);
         }
       });

       // If you want to play the full length of a song, ensure the user is authorized
       // with an active Apple Music subscription. Then do:
       //
       //   await music.authorize();
       //   await music.play();
       //
       // per the article’s guidance.
     });
   </script>
 </body>
 </html>

Figured out that my Nginx configuration for my project included a root path (/var/www/media/html/index.html)for index.html that was different from the location where I was editing index.html from. I somehow managed to created an additional index.html file in my home folder (/home/theloungeuser/index.html) that I was editing from, I switched the root path in Nginx configuration to "/home/theloungeuser".

I'm rebuilding my web player, which I started with the minimal script Pancras provided in an earlier post (https://developer.apple.com/forums/edit/answer/825987022) and have been working to integrate the features I had setup using v1 before attempting to migrate to v3. I am able to successfully authorize when signing into my paid Apple Music Account, although the music.player/music.api.library is not loading how it should, "Radio" not working. I can see images of artists/songs in the "Home" section of my Apple Music player as well as when I search for an artist/song, though they cannot be interacted with. When I click any artist/song, nothing happens.

I am seeing the following information of my Firefox developer console:

A resource is blocked by OpaqueResponseBlocking, please check browser console for details. play--v3.png MusicKit loaded and event triggered. media.mydomain.com:396:15 Attempting to authorize with Apple Music... media.mydomain.com:442:15 Opening multiple popups was blocked due to lack of user activation. musickit.js:13:86737 Storage access automatically granted for origin “https://authorize.music.apple.com%E2%80%9D on “https://media.mydomain.com”. Authorization successful media.mydomain.com:445:17 music.player is not available; skipping player event listeners. media.mydomain.com:455:19 music.api.library is not available. Skipping library calls. media.domain.com:462:19 music.player not available; cannot play item.

Issues After Switching to v3
 
 
Q