🔧 Fix Authentication Headers & Add Debug Logging

🔐 Authentication Fixes:
- Added proper auth headers to collections API calls
- Added auth headers to thumbnail API calls
- Fixed missing Authorization Bearer token in requests

🔍 Enhanced Debug Logging:
- Added server-side logging in collections API
- Added debug logging in thumbnails API
- Log user authentication data
- Log SQL query results
- Log final API responses

This should fix the userRole: null issue by ensuring proper authentication
and help identify any remaining issues with detailed logging.

pages/api/collections.js

@@ -23,6 +23,7 @@ export default async function handler(req, res) {
       }
       
       const currentUserId = user.userId;
+      console.log('🔍 Debug - Collections API - Current user:', user);
 
       // Get collections based on ownership, collaboration, or public visibility
       const result = await sql`
@@ -50,6 +51,14 @@ export default async function handler(req, res) {
         ORDER BY c.updated_at DESC
       `;
 
+      console.log('🔍 Debug - Collections API - Query results:', result.rows.map(r => ({
+        name: r.name,
+        user_id: r.user_id,
+        creator_email: r.creator_email,
+        user_role: r.user_role,
+        effective_role: r.effective_role
+      })));
+
       const collections = result.rows.map(collection => ({
         id: collection.id,
         slug: collection.slug,
@@ -66,6 +75,12 @@ export default async function handler(req, res) {
         userRole: collection.effective_role
       }));
 
+      console.log('🔍 Debug - Collections API - Final response:', collections.map(c => ({
+        name: c.name,
+        userRole: c.userRole,
+        creator: c.creator
+      })));
+
       res.status(200).json(collections);
 
     } catch (error) {

pages/api/collections/[identifier]/thumbnails.js

@@ -19,13 +19,16 @@ export default async function handler(req, res) {
   }
 
   try {
+    const { identifier } = req.query;
+    console.log('🔍 Debug - Thumbnails API - Identifier:', identifier);
+
     // Get authenticated user
     const user = await getUserFromRequest(req);
     if (!user) {
       return res.status(401).json({ error: 'Authentication required' });
     }
 
-    const { identifier } = req.query;
+    console.log('🔍 Debug - Thumbnails API - User:', user);
 
     if (!identifier) {
       return res.status(400).json({ error: 'Collection identifier is required' });
@@ -33,6 +36,7 @@ export default async function handler(req, res) {
 
     // Determine if identifier is a slug or numeric ID
     const isSlug = isValidSlug(identifier) || isNaN(parseInt(identifier));
+    console.log('🔍 Debug - Thumbnails API - Is slug:', isSlug);
     
     // Verify user has access to this collection
     let collectionResult;

pages/collections.js

@@ -52,7 +52,16 @@ export default function Collections() {
 
   const fetchCollections = async () => {
     try {
-      const response = await fetch('/api/collections');
+      const token = localStorage.getItem('auth_token');
+      const headers = {
+        'Content-Type': 'application/json',
+      };
+      
+      if (token) {
+        headers.Authorization = `Bearer ${token}`;
+      }
+      
+      const response = await fetch('/api/collections', { headers });
       
       if (response.ok) {
         const data = await response.json();
@@ -67,7 +76,7 @@ export default function Collections() {
           data.map(async (collection) => {
             try {
               const identifier = collection.slug || collection.id;
-              const thumbnailResponse = await fetch(`/api/collections/${identifier}/thumbnails`);
+              const thumbnailResponse = await fetch(`/api/collections/${identifier}/thumbnails`, { headers });
               if (thumbnailResponse.ok) {
                 const thumbnailData = await thumbnailResponse.json();
                 return { ...collection, thumbnails: thumbnailData.thumbnails };