From 1f62e148e5bc195d7447870d1b43380428bbcca8 Mon Sep 17 00:00:00 2001
From: iDefineHD <purpleizlegitx@gmail.com>
Date: Sun, 11 Jan 2026 03:02:54 +0000
Subject: [PATCH] fixed routes

---
 FINAL_DEPLOY_STEPS.md       | 288 ++++++++++++++++++++++++++++++++++++
 frontend/src/utils/axios.js |  25 +++-
 2 files changed, 307 insertions(+), 6 deletions(-)
 create mode 100644 FINAL_DEPLOY_STEPS.md

diff --git a/FINAL_DEPLOY_STEPS.md b/FINAL_DEPLOY_STEPS.md
new file mode 100644
index 0000000..d76161a
--- /dev/null
+++ b/FINAL_DEPLOY_STEPS.md
@@ -0,0 +1,288 @@
+# 🚀 Final Deployment Steps - Steam Login & Navbar Fix
+
+## 📋 What Was Fixed
+
+1. **WebSocket Auth Sync**: WebSocket now triggers auth state refresh when connected
+2. **Axios Configuration**: Fixed to use correct custom axios instance with proper baseURL
+3. **API URL Detection**: Smart detection of API domain in production vs development
+
+---
+
+## 🎯 Deploy to Production Server
+
+### Step 1: SSH into Your Server
+
+```bash
+ssh your-user@your-server
+```
+
+### Step 2: Navigate to Project & Pull Changes
+
+```bash
+cd /path/to/TurboTrades
+git pull origin main
+```
+
+### Step 3: Build Frontend
+
+```bash
+cd frontend
+npm install  # only if package.json changed
+npm run build
+```
+
+**Expected output:**
+```
+✓ 1588 modules transformed.
+✓ built in 2.84s
+```
+
+### Step 4: Deploy to Web Root
+
+```bash
+# Copy built files to your web server directory
+sudo cp -r dist/* /var/www/html/turbotrades/
+
+# Verify files were copied
+ls -la /var/www/html/turbotrades/
+```
+
+### Step 5: Set Yourself as Admin
+
+```bash
+# Go back to project root
+cd /path/to/TurboTrades
+
+# Run the make-admin script
+node make-admin.js
+```
+
+**Expected output:**
+```
+✅ Connected to MongoDB
+✅ Found user: ✅ Ashley アシュリー
+   Current staff level: 0
+✅ Successfully updated user to admin (staffLevel: 3)
+🎉 Done! Please restart your backend server.
+```
+
+### Step 6: Restart Backend (if needed)
+
+```bash
+pm2 restart turbotrades-backend
+
+# Check logs
+pm2 logs turbotrades-backend --lines 20
+```
+
+---
+
+## 🧪 Test the Deployment
+
+### 1. Clear Browser Cache
+
+- **Chrome/Edge**: `Ctrl + Shift + Delete` → Clear all browsing data
+- **Firefox**: `Ctrl + Shift + Delete` → Clear everything
+- **Or use Incognito/Private mode**
+
+### 2. Open Site & Console
+
+1. Navigate to `https://turbotrades.dev`
+2. Press `F12` to open DevTools
+3. Go to **Console** tab
+
+### 3. Clear Site Data
+
+In DevTools:
+- Go to **Application** tab
+- Click **Clear storage**
+- Click **Clear site data**
+
+### 4. Check API Base URL
+
+In the console, you should see:
+```
+🔵 Production API baseURL: https://api.turbotrades.dev
+```
+
+This confirms it's using the correct API domain.
+
+### 5. Test Login Flow
+
+1. Click **"Login to Steam"** button
+2. Complete Steam authentication
+3. You'll be redirected back to the site
+
+### 6. Watch Console Logs
+
+You should see this sequence:
+
+```
+🔵 Auth store initialize called - isInitialized: false
+🔵 fetchUser called - fetching user from /api/auth/me
+✅ fetchUser response: { success: true, user: {...} }
+✅ Setting user in auth store: { steamId: "...", username: "...", ... }
+🔵 fetchUser complete - isAuthenticated: true
+
+Connecting to WebSocket: wss://api.turbotrades.dev/ws
+WebSocket connected
+🟢 WebSocket received 'connected' message: { ... }
+🔵 Calling authStore.fetchUser() from WebSocket connected handler
+🔵 fetchUser called - fetching user from /api/auth/me
+✅ fetchUser response: { success: true, user: {...} }
+✅ Setting user in auth store: { ... }
+🔵 fetchUser complete - isAuthenticated: true
+```
+
+### 7. Verify Navbar Updates
+
+The navbar should now show:
+- ✅ Your Steam avatar
+- ✅ Your username
+- ✅ Your balance with green deposit button
+- ✅ User dropdown menu with Profile, Inventory, Transactions, Withdraw
+- ✅ **Admin** option (with yellow background) since you're admin
+
+### 8. Test User API Endpoints
+
+Click on **Profile** and verify:
+- User stats load correctly
+- No console errors about `/user/stats` 404
+
+### 9. Test Admin Access
+
+Click on **Admin** in the dropdown menu:
+- You should be able to access the admin dashboard
+- No permission errors
+
+---
+
+## ✅ Success Criteria
+
+- [ ] Site loads without errors
+- [ ] Console shows: `🔵 Production API baseURL: https://api.turbotrades.dev`
+- [ ] Login button works
+- [ ] After login, navbar shows logged-in state
+- [ ] Avatar, username, and balance display correctly
+- [ ] User dropdown menu works
+- [ ] Profile page loads user stats
+- [ ] Admin panel is accessible
+- [ ] WebSocket connects successfully
+- [ ] No 404 errors for `/api/user/*` routes
+
+---
+
+## 🐛 Troubleshooting
+
+### Navbar Not Updating After Login
+
+**Check console for errors:**
+```
+# If you see wrong API URL:
+🔵 Development API baseURL: /api
+```
+
+**Solution:** Hard refresh with `Ctrl + Shift + R` to clear cached JS
+
+---
+
+### 404 Errors on /api/user/stats
+
+**Check console:**
+```
+Failed to fetch user stats: 404
+```
+
+**Solution:** This should be fixed now, but if you still see it:
+1. Verify backend is running: `pm2 status`
+2. Check backend logs: `pm2 logs turbotrades-backend`
+3. Verify routes are registered: `curl https://api.turbotrades.dev/api/health`
+
+---
+
+### WebSocket Not Connecting
+
+**Check console:**
+```
+WebSocket error: ...
+```
+
+**Solution:**
+```bash
+# Check Nginx config
+sudo cat /etc/nginx/sites-available/turbotrades-api | grep -A 5 "location /ws"
+
+# Should have:
+location /ws {
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "upgrade";
+    proxy_pass http://127.0.0.1:3000/ws;
+}
+
+# Reload Nginx if changed
+sudo nginx -t
+sudo systemctl reload nginx
+```
+
+---
+
+### Admin Panel Shows 403 Forbidden
+
+**Check if admin was set correctly:**
+```bash
+# In your project directory
+node -e "
+const mongoose = require('mongoose');
+mongoose.connect('mongodb://localhost:27017/turbotrades').then(async () => {
+  const User = mongoose.model('User', new mongoose.Schema({steamId: String, username: String, staffLevel: Number}));
+  const user = await User.findOne({steamId: '76561198027608071'});
+  console.log('User:', user.username, 'Staff Level:', user.staffLevel);
+  process.exit();
+});
+"
+```
+
+**Should output:**
+```
+User: ✅ Ashley アシュリー Staff Level: 3
+```
+
+If not 3, run `node make-admin.js` again.
+
+---
+
+## 📝 Files Changed
+
+- `frontend/src/stores/websocket.js` - Added auth fetch on WebSocket connect
+- `frontend/src/stores/auth.js` - Use custom axios instance, correct paths
+- `frontend/src/utils/axios.js` - Smart API URL detection for production
+
+---
+
+## 🔄 Rollback (If Needed)
+
+```bash
+cd /path/to/TurboTrades
+
+# Revert the last 3 commits
+git revert HEAD~3..HEAD
+git push origin main
+
+# Rebuild and redeploy
+cd frontend
+npm run build
+sudo cp -r dist/* /var/www/html/turbotrades/
+```
+
+---
+
+## 🎉 You're Done!
+
+After completing all steps:
+1. ✅ Steam login works
+2. ✅ Navbar updates after login
+3. ✅ User API routes work
+4. ✅ WebSocket connects and syncs auth
+5. ✅ Admin panel is accessible
+
+**Enjoy your fully functional TurboTrades platform!** 🚀
\ No newline at end of file
diff --git a/frontend/src/utils/axios.js b/frontend/src/utils/axios.js
index 2d3705e..1418256 100644
--- a/frontend/src/utils/axios.js
+++ b/frontend/src/utils/axios.js
@@ -37,8 +37,16 @@ const getApiBaseUrl = () => {
 };
 
 // Create axios instance
+const baseURL = getApiBaseUrl();
+console.log("🔧 Creating axios instance with baseURL:", baseURL);
+console.log(
+  "🔧 Environment:",
+  import.meta.env.PROD ? "PRODUCTION" : "DEVELOPMENT"
+);
+console.log("🔧 Current hostname:", window.location.hostname);
+
 const axiosInstance = axios.create({
-  baseURL: getApiBaseUrl(),
+  baseURL: baseURL,
   timeout: 15000,
   withCredentials: true,
   headers: {
@@ -46,17 +54,22 @@ const axiosInstance = axios.create({
   },
 });
 
+console.log("✅ Axios instance created with config:", {
+  baseURL: axiosInstance.defaults.baseURL,
+  withCredentials: axiosInstance.defaults.withCredentials,
+  timeout: axiosInstance.defaults.timeout,
+});
+
 // Request interceptor
 axiosInstance.interceptors.request.use(
   (config) => {
-    // You can add auth token to headers here if needed
-    // const token = localStorage.getItem('token')
-    // if (token) {
-    //   config.headers.Authorization = `Bearer ${token}`
-    // }
+    // Log every request for debugging
+    const fullUrl = `${config.baseURL}${config.url}`;
+    console.log(`📤 Axios Request: ${config.method.toUpperCase()} ${fullUrl}`);
     return config;
   },
   (error) => {
+    console.error("❌ Axios Request Error:", error);
     return Promise.reject(error);
   }
 );