# Frontend Routing Based on User Type

## Updated Login Response

The `/api/auth/login` endpoint now returns `user_type` in the response:

```json
{
  "success": true,
  "message": "Login successful",
  "data": {
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
    "user": { "id": 1, "email": "user@example.com", ... },
    "account": { "id": 1, "name": "John Doe", "user_type": "direct_client", ... },
    "user_type": "direct_client",  // ← Use this for routing
    "redirect_url": "/dashboard"
  }
}
```

## React Example: Redirect Based on User Type

### Option 1: Simple Redirect After Login

```javascript
import { useUser } from "@clerk/clerk-react";
import { useNavigate } from "react-router-dom";
import axios from "axios";

function LoginHandler() {
  const { user, isSignedIn } = useUser();
  const navigate = useNavigate();

  useEffect(() => {
    if (isSignedIn && user) {
      handleBackendLogin();
    }
  }, [isSignedIn, user]);

  const handleBackendLogin = async () => {
    try {
      const response = await axios.post("http://localhost:5000/api/auth/login", {
        user_type: "direct_client",
        clerk_user_id: user.id,
        email: user.primaryEmailAddress?.emailAddress,
        first_name: user.firstName,
        last_name: user.lastName,
        full_name: user.fullName,
        image_url: user.imageUrl,
      });

      const { token, user_type } = response.data.data;

      // Store token and user_type
      localStorage.setItem("token", token);
      localStorage.setItem("user_type", user_type);

      // Set auth header
      axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;

      // Redirect based on user_type
      switch (user_type) {
        case "direct_client":
          navigate("/client/dashboard");
          break;
        case "agency":
          navigate("/agency/dashboard");
          break;
        case "subaccount":
          navigate("/subaccount/dashboard");
          break;
        default:
          navigate("/dashboard");
      }
    } catch (error) {
      console.error("Login failed:", error);
    }
  };

  return null;
}
```

### Option 2: Protected Routes with User Type Check

```javascript
import { Navigate } from "react-router-dom";

// Protected Route Component
function ProtectedRoute({ children, allowedUserTypes }) {
  const token = localStorage.getItem("token");
  const user_type = localStorage.getItem("user_type");

  if (!token) {
    return <Navigate to="/login" replace />;
  }

  if (allowedUserTypes && !allowedUserTypes.includes(user_type)) {
    return <Navigate to="/unauthorized" replace />;
  }

  return children;
}

// App Routes
function App() {
  return (
    <Routes>
      {/* Public routes */}
      <Route path="/login" element={<Login />} />
      
      {/* Direct Client routes */}
      <Route
        path="/client/dashboard"
        element={
          <ProtectedRoute allowedUserTypes={["direct_client"]}>
            <ClientDashboard />
          </ProtectedRoute>
        }
      />
      
      {/* Agency routes */}
      <Route
        path="/agency/dashboard"
        element={
          <ProtectedRoute allowedUserTypes={["agency"]}>
            <AgencyDashboard />
          </ProtectedRoute>
        }
      />
      
      {/* Subaccount routes */}
      <Route
        path="/subaccount/dashboard"
        element={
          <ProtectedRoute allowedUserTypes={["subaccount"]}>
            <SubaccountDashboard />
          </ProtectedRoute>
        }
      />
      
      {/* Shared routes (all authenticated users) */}
      <Route
        path="/dashboard"
        element={
          <ProtectedRoute>
            <Dashboard />
          </ProtectedRoute>
        }
      />
    </Routes>
  );
}
```

### Option 3: Context-Based User Management

```javascript
import { createContext, useContext, useState, useEffect } from "react";
import axios from "axios";

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [userType, setUserType] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Load from localStorage on mount
    const token = localStorage.getItem("token");
    const storedUserType = localStorage.getItem("user_type");
    
    if (token) {
      axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
      setUserType(storedUserType);
    }
    
    setLoading(false);
  }, []);

  const login = async (clerkUser) => {
    try {
      const response = await axios.post("http://localhost:5000/api/auth/login", {
        user_type: "direct_client",
        clerk_user_id: clerkUser.id,
        email: clerkUser.primaryEmailAddress?.emailAddress,
        first_name: clerkUser.firstName,
        last_name: clerkUser.lastName,
        full_name: clerkUser.fullName,
        image_url: clerkUser.imageUrl,
      });

      const { token, user, user_type } = response.data.data;

      localStorage.setItem("token", token);
      localStorage.setItem("user_type", user_type);
      
      axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
      
      setUser(user);
      setUserType(user_type);

      return user_type; // Return for redirect logic
    } catch (error) {
      console.error("Login failed:", error);
      throw error;
    }
  };

  const logout = () => {
    localStorage.removeItem("token");
    localStorage.removeItem("user_type");
    delete axios.defaults.headers.common["Authorization"];
    setUser(null);
    setUserType(null);
  };

  return (
    <AuthContext.Provider value={{ user, userType, login, logout, loading }}>
      {children}
    </AuthContext.Provider>
  );
}

export const useAuth = () => useContext(AuthContext);

// Usage in component
function LoginPage() {
  const { user } = useUser(); // Clerk
  const { login } = useAuth();
  const navigate = useNavigate();

  const handleLogin = async () => {
    try {
      const user_type = await login(user);
      
      // Redirect based on user_type
      if (user_type === "direct_client") {
        navigate("/client/dashboard");
      } else if (user_type === "agency") {
        navigate("/agency/dashboard");
      } else {
        navigate("/dashboard");
      }
    } catch (error) {
      console.error("Login failed:", error);
    }
  };

  return <button onClick={handleLogin}>Login</button>;
}
```

## Backend: Role-Based Access Control

You can now use `user_type` in your controllers:

```javascript
// Example: Only allow agencies to create subaccounts
export default {
  createSubaccount: async (req, res, next) => {
    try {
      // Check user_type from JWT
      if (req.user.user_type !== "agency") {
        return res.status(403).json({
          success: false,
          message: "Only agencies can create subaccounts"
        });
      }

      // Proceed with creation
      const data = await subaccountService.create(req.body);
      return success(res, "Subaccount created", data);
    } catch (err) {
      next(err);
    }
  }
};
```

## User Type Values

Based on your schema, possible `user_type` values:
- `"direct_client"` - Direct client user
- `"agency"` - Agency user
- `"subaccount"` - Subaccount user (under agency)

## Summary

Now you have:
1. ✅ `user_type` in login response
2. ✅ `user_type` in JWT token
3. ✅ `user_type` in `req.user` for backend authorization
4. ✅ Frontend can redirect based on user type
5. ✅ Backend can enforce role-based access control