Debug: Add comprehensive logging to Plex authentication flow

- Add detailed console logs throughout auth process
  - PIN generation with CLIENT_IDENTIFIER
  - PIN polling status checks
  - Auth token received confirmation
  - Cookie setting and verification
  - User data fetch and account linking

- Helps diagnose authentication and cookie issues
- Logs show exact point of failure in auth flow
- Can be removed once issue is identified and fixed

src/components/settings/PlexSettings.vue

@@ -212,15 +212,23 @@
   // ----- OAuth flow -----
   async function completePlexAuth(authToken: string) {
     try {
+      console.log(
+        "[PlexSettings] completePlexAuth called with token:",
+        authToken.substring(0, 10) + "..."
+      );
       setPlexAuthCookie(authToken);
+      console.log("[PlexSettings] Fetching user data...");
       const userData = await fetchPlexUserData(authToken);
       if (userData) {
+        console.log("[PlexSettings] User data received:", userData.username);
         plexUserData.value = userData;
         plexUsername.value = userData.username;
         isPlexConnected.value = true;
       }
+      console.log("[PlexSettings] Linking Plex account to backend...");
       const { success, message } = await linkPlexAccount(authToken);
       if (success) {
+        console.log("[PlexSettings] ✅ Account linked successfully");
         emit("reload");
         await fetchPlexLibraries(authToken);
         messages.value.push({
@@ -229,6 +237,7 @@
           message: message || "Successfully connected your Plex account"
         } as IErrorMessage);
       } else {
+        console.error("[PlexSettings] ❌ Account linking failed:", message);
         messages.value.push({
           type: ErrorMessageTypes.Error,
           title: "Authentication failed",
@@ -236,6 +245,7 @@
         } as IErrorMessage);
       }
     } catch (error) {
+      console.error("[PlexSettings] Error in completePlexAuth:", error);
       messages.value.push({
         type: ErrorMessageTypes.Error,
         title: "Authentication failed",
@@ -247,14 +257,20 @@
   }
 
   async function authenticatePlex() {
+    console.log("[PlexSettings] Starting authentication flow...");
     loading.value = true;
     openAuthPopup(
       // onSuccess
       async (authToken: string) => {
+        console.log("[PlexSettings] onSuccess callback triggered with token");
         await completePlexAuth(authToken);
       },
       // onError
       (errorMessage: string) => {
+        console.error(
+          "[PlexSettings] onError callback triggered:",
+          errorMessage
+        );
         messages.value.push({
           type: ErrorMessageTypes.Error,
           title: "Authentication failed",

src/composables/usePlexAuth.ts

@@ -9,6 +9,10 @@ export function usePlexAuth() {
   // Generate a PIN for Plex OAuth
   async function generatePlexPin() {
     try {
+      console.log(
+        "[PlexAuth] Generating PIN with CLIENT_IDENTIFIER:",
+        CLIENT_IDENTIFIER
+      );
       const response = await fetch("https://plex.tv/api/v2/pins?strong=true", {
         method: "POST",
         headers: {
@@ -20,6 +24,10 @@ export function usePlexAuth() {
 
       if (!response.ok) throw new Error("Failed to generate PIN");
       const data = await response.json();
+      console.log("[PlexAuth] PIN generated successfully:", {
+        id: data.id,
+        code: data.code
+      });
       return { id: data.id, code: data.code };
     } catch (error) {
       console.error("[PlexAuth] Error generating PIN:", error);
@@ -40,8 +48,17 @@ export function usePlexAuth() {
         }
       );
 
-      if (!response.ok) return null;
+      if (!response.ok) {
+        console.log("[PlexAuth] PIN check response not OK:", response.status);
+        return null;
+      }
       const data = await response.json();
+      if (data.authToken) {
+        console.log(
+          "[PlexAuth] ✅ Auth token received:",
+          data.authToken.substring(0, 10) + "..."
+        );
+      }
       return data.authToken;
     } catch (error) {
       console.error("[PlexAuth] Error checking PIN:", error);
@@ -65,9 +82,13 @@ export function usePlexAuth() {
     pinCode: string,
     onSuccess: (token: string) => void
   ) {
+    console.log("[PlexAuth] Starting polling for PIN:", pinId);
     pollInterval.value = window.setInterval(async () => {
       const authToken = await checkPin(pinId, pinCode);
       if (authToken) {
+        console.log(
+          "[PlexAuth] 🎉 Authentication successful! Calling onSuccess callback"
+        );
         stopPolling();
         if (plexPopup.value && !plexPopup.value.closed) {
           plexPopup.value.close();
@@ -87,9 +108,20 @@ export function usePlexAuth() {
 
   // Set cookie
   function setPlexAuthCookie(authToken: string) {
+    console.log(
+      "[PlexAuth] Setting cookie for token:",
+      authToken.substring(0, 10) + "..."
+    );
     const expires = new Date();
     expires.setDate(expires.getDate() + 30);
-    document.cookie = `plex_auth_token=${authToken}; path=/; expires=${expires.toUTCString()}; SameSite=Strict`;
+    const cookieString = `plex_auth_token=${authToken}; path=/; expires=${expires.toUTCString()}; SameSite=Strict`;
+    document.cookie = cookieString;
+    console.log("[PlexAuth] Cookie set. Verifying...");
+    const verification = getCookie("plex_auth_token");
+    console.log(
+      "[PlexAuth] Cookie verification:",
+      verification ? "✅ SUCCESS" : "❌ FAILED"
+    );
   }
 
   // Get cookie