# 🚀 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!** 🚀