69 lines
1.9 KiB
Plaintext
69 lines
1.9 KiB
Plaintext
========================================
|
|
FRONTEND LOGIN DEBUGGING GUIDE
|
|
========================================
|
|
|
|
The backend API is working perfectly! ✅
|
|
Now we need to check what's happening in the frontend.
|
|
|
|
STEP 1: Open Browser Developer Tools
|
|
========================================
|
|
1. Start the frontend if not running:
|
|
cd D:\Hosted\familyhub\frontend
|
|
npm run dev
|
|
|
|
2. Open browser to: http://localhost:5173
|
|
|
|
3. Press F12 to open Developer Tools
|
|
|
|
4. Click on the "Console" tab
|
|
|
|
5. Try to login:
|
|
Username: jess
|
|
Password: password123
|
|
|
|
STEP 2: Check for Errors
|
|
========================================
|
|
Look for RED error messages in the console.
|
|
|
|
Common errors to look for:
|
|
|
|
❌ CORS Error:
|
|
"Access to fetch at 'http://localhost:8001' from origin 'http://localhost:5173'
|
|
has been blocked by CORS policy"
|
|
|
|
FIX: Check backend .env file has:
|
|
ALLOWED_ORIGINS=http://localhost:5173,http://127.0.0.1:5173
|
|
|
|
❌ Network Error:
|
|
"Failed to fetch" or "net::ERR_CONNECTION_REFUSED"
|
|
|
|
FIX: Make sure backend is running (start-backend.bat)
|
|
|
|
❌ 401 Unauthorized:
|
|
This would mean password is wrong (but we tested it works!)
|
|
|
|
STEP 3: Check Network Tab
|
|
========================================
|
|
1. In Developer Tools, click "Network" tab
|
|
|
|
2. Try to login again
|
|
|
|
3. Look for the POST request to:
|
|
http://localhost:8001/api/v1/auth/login
|
|
|
|
4. Click on it and check:
|
|
- Status Code: Should be 200
|
|
- Response: Should show {"access_token": "...", "token_type": "bearer"}
|
|
- If Status is 401: Check Request payload (username/password)
|
|
- If Status is 404: URL is wrong
|
|
- If no request appears: Frontend not sending request
|
|
|
|
WHAT TO REPORT:
|
|
========================================
|
|
Please copy and paste:
|
|
1. Any RED errors from Console tab
|
|
2. The status code of the /api/v1/auth/login request
|
|
3. The response body from Network tab
|
|
|
|
This will tell us exactly what's wrong!
|