codenuk_backend_mine/services/ai-mockup-service/AUTH_FIX_SUMMARY.md

Authentication Fix Summary

Problem Identified

The ai-mockup-service was failing with a 401 error "Unable to verify token with auth service" when trying to save wireframes. This was caused by:

1. Missing /api/auth/verify endpoint in the user-auth service
2. JWT secret mismatch between services
3. Incorrect token verification flow in ai-mockup-service
4. User ID extraction issues in protected endpoints

Fixes Implemented

1. Added Missing Token Verification Endpoint

• File: automated-dev-pipeline/services/user-auth/src/routes/auth.js
• Added: GET /api/auth/verify endpoint
• Purpose: Allows ai-mockup-service to verify JWT tokens remotely

2. Fixed JWT Secret Configuration

• File: automated-dev-pipeline/services/ai-mockup-service/src/app.py
• Changed: JWT_SECRET from 'your-jwt-secret-key-change-in-production' to 'access-secret-key-2024-tech4biz'
• Purpose: Ensures both services use the same JWT secret for local verification

3. Improved Token Verification Logic

• File: automated-dev-pipeline/services/ai-mockup-service/src/app.py
• Enhanced: verify_jwt_token() function with better error handling and logging
• Added: Fallback to remote verification when local verification fails
• Improved: Error messages and debugging information

4. Fixed User ID Extraction

• Files: All protected endpoints in ai-mockup-service
• Changed: User ID extraction to handle both local and remote JWT verification
• Added: Support for multiple user ID field names (id, userId, user_id)
• Enhanced: Error messages for authentication failures

5. Enhanced Frontend Error Handling

• File: codenuk-frontend-dark-theme/src/components/wireframe-canvas.tsx
• Improved: Error handling in saveWireframe() function
• Added: Specific error messages for different HTTP status codes
• Enhanced: User-friendly error messages for authentication issues

6. Updated Environment Configuration

• File: automated-dev-pipeline/services/ai-mockup-service/src/env.example
• Updated: JWT configuration to match user-auth service

How It Works Now

Token Verification Flow

1. Local Verification: ai-mockup-service first tries to verify JWT tokens locally using the shared secret
2. Remote Verification: If local verification fails, it calls the user-auth service's /api/auth/verify endpoint
3. User Data: Both methods return user data that can be used for authorization

Authentication Process

1. User logs in through frontend → receives JWT token from user-auth service
2. Frontend sends requests to ai-mockup-service with JWT token in Authorization header
3. ai-mockup-service verifies token (locally or remotely) and extracts user information
4. Protected endpoints check user ID and permissions before proceeding

Testing the Fixes

1. Run the Authentication Test

cd automated-dev-pipeline/services/ai-mockup-service/src
python test_auth.py

2. Test Wireframe Generation (No Auth Required)

curl -X POST http://localhost:8021/generate-wireframe/desktop \
  -H "Content-Type: application/json" \
  -d '{"prompt": "Simple login form"}'

3. Test Wireframe Saving (Auth Required)

# First get a valid JWT token from user-auth service
# Then use it to save a wireframe
curl -X POST http://localhost:8021/api/wireframes \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer YOUR_JWT_TOKEN" \
  -d '{"wireframe": {"name": "Test"}, "elements": []}'

Environment Variables Required

ai-mockup-service (.env)

JWT_SECRET=access-secret-key-2024-tech4biz
USER_AUTH_SERVICE_URL=http://localhost:8011

user-auth-service (.env)

JWT_ACCESS_SECRET=access-secret-key-2024-tech4biz
JWT_REFRESH_SECRET=refresh-secret-key-2024-tech4biz

Troubleshooting

Common Issues

1. 401 Unauthorized: Check if JWT tokens are being sent correctly
2. Token verification failed: Verify both services are running and accessible
3. User ID not found: Check JWT payload structure and user ID field names

Debug Steps

1. Check service logs for detailed error messages
2. Verify environment variables are set correctly
3. Ensure both services are running on expected ports
4. Test token verification endpoint directly

Next Steps

1. Test the authentication flow end-to-end
2. Monitor logs for any remaining issues
3. Consider adding more comprehensive error handling
4. Implement token refresh logic if needed