Chore:Auth endpoint is integrated in the frontend

Backend/app/api/v1/endpoints/auth.py

@@ -64,7 +64,7 @@ async def login(request: LoginRequest, db: AsyncSession = Depends(get_db)):
             expires_deltas=access_token_expires
         )
 
-        return {"access_token":access_token, "token_type":"bearer"}
+        return {"access_token":access_token, "token_type":"bearer","username":user.username}
     except HTTPException:
         raise 
     except Exception as e:

Backend/app/schema/models.py

@@ -45,3 +45,5 @@ class Token(BaseModel):
     access_token: str
     token_type: str
 
+class LoginResponse(Token):
+    username: str

Frontend/src/App.tsx

@@ -12,11 +12,13 @@ import { AuthProvider, useAuth } from "./components/context/AuthContext";
 import ProtectedRoute from "./routes/ProtectedRoute";
 
 const DashboardLayout = () => {
-  const { logout } = useAuth();
+  // 1. Retrieve both logout and username from the AuthContext
+  const { logout, username } = useAuth();
 
   return (
     <div className="flex h-screen bg-gray-100">
-      <Sidebar onLogout={logout} />
+      {/* 2. Pass the retrieved username prop to the Sidebar */}
+      <Sidebar onLogout={logout} username={username} />
 
       <main className="flex-1 overflow-y-auto">
         <Routes>
@@ -36,7 +38,6 @@ const App: React.FC = () => {
     <AuthProvider>
       <Router>
         <Routes>
-          
           {/* Public Home */}
           <Route path="/" element={<HomeWrapper />} />
 

Frontend/src/components/auth/SignIn.tsx

@@ -14,7 +14,6 @@ const SignIn: React.FC<SignInProps> = ({
   onAuthSuccess,
 }) => {
   const [email, setEmail] = useState("");
-  // const [username, setUserName] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
 
@@ -23,15 +22,37 @@ const SignIn: React.FC<SignInProps> = ({
     setError("");
 
     try {
+      // 1. Send JSON body with keys matching the backend's LoginRequest schema
       const res = await API.post("/auth/login", {
-        email: email, // 🔥 FastAPI expects `username` (OAuth2PasswordRequestForm)
+        email: email, // Backend expects 'email' key in the JSON body
         password,
       });
 
       localStorage.setItem("token", res.data.access_token);
       onAuthSuccess();
     } catch (err: any) {
-      setError(err.response?.data?.detail || "Login failed");
+      console.error("Login error:", err);
+      let errorMessage = "Login failed due to an unknown error.";
+
+      // --- Robust Error Handling for 422 (Pydantic validation) ---
+      if (err.response && err.response.data && err.response.data.detail) {
+        const detail = err.response.data.detail;
+
+        if (typeof detail === 'string') {
+          // Handle simple error messages like "Incorrect username or password" (from 401)
+          errorMessage = detail;
+        } else if (Array.isArray(detail) && detail.length > 0) {
+          // Handle 422 Pydantic validation error (list of error objects)
+          // We extract the human-readable message from the first object
+          const firstError = detail[0];
+          errorMessage = `Validation Error on '${firstError.loc.join(' -> ')}': ${firstError.msg}`;
+        }
+      } else if (err.message) {
+        // Fallback for network errors (e.g., server offline)
+        errorMessage = err.message;
+      }
+
+      setError(errorMessage);
     }
   };
 
@@ -41,6 +62,7 @@ const SignIn: React.FC<SignInProps> = ({
         Welcome Back
       </h2>
 
+      {/* 2. This ensures only a string is rendered, fixing the React error */}
       {error && <p className="text-red-400 text-center mb-3">{error}</p>}
 
       <form className="space-y-5" onSubmit={handleSubmit}>
@@ -64,7 +86,7 @@ const SignIn: React.FC<SignInProps> = ({
           <div className="relative">
             <Lock className="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-blue-400" />
             <input
-              type="string"
+              type="password" // Changed type to 'password' for browser security
               placeholder="••••••••"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
@@ -74,7 +96,9 @@ const SignIn: React.FC<SignInProps> = ({
           </div>
         </div>
 
-        <button className="w-full px-5 py-3 rounded-lg bg-linear-to-r from-blue-500 to-gray-500 text-white flex items-center justify-center gap-2">
+        <button
+          type="submit" // Added type="submit" for proper form submission
+          className="w-full px-5 py-3 rounded-lg bg-linear-to-r from-blue-500 to-gray-500 text-white flex items-center justify-center gap-2">
           <LogIn className="w-5 h-5" />
           Sign In
         </button>
@@ -90,4 +114,4 @@ const SignIn: React.FC<SignInProps> = ({
   );
 };
 
-export default SignIn;
+export default SignIn;

Frontend/src/components/auth/SignUp.tsx

@@ -1,15 +1,15 @@
 import React, { useState } from "react";
-import { User, Mail, Lock, UserPlus, Chrome } from "lucide-react";
-import API from "../../api/api";
+import { User, Mail, Lock, UserPlus } from "lucide-react";
+import API from "../../api/api"; // Assuming the API file is one directory up
 
 interface SignUpProps {
   onClose: () => void;
   onSwitchToSignIn: () => void;
-  onAuthSuccess: () => void;
+  onAuthSuccess: (username: string) => void;
 }
 
 const SignUp: React.FC<SignUpProps> = ({ onSwitchToSignIn, onAuthSuccess }) => {
-  const [fullName, setFullName] = useState("");
+  const [username, setUsername] = useState("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [confirm, setConfirm] = useState("");
@@ -24,21 +24,38 @@ const SignUp: React.FC<SignUpProps> = ({ onSwitchToSignIn, onAuthSuccess }) => {
     }
 
     try {
+      // 1. Registration via API (uses axios and the correct base URL)
       await API.post("/auth/register", {
-        full_name: fullName,
+        username,
         email,
         password,
       });
 
-      const loginRes = await API.post("/auth/login", {
-        username: email,
+      // 2. Login immediately after successful registration
+      const loginResponse = await API.post("/auth/login", {
+        email,
         password,
       });
 
-      localStorage.setItem("token", loginRes.data.access_token);
-      onAuthSuccess();
+      // The response data is directly on response.data when using axios
+      const loginData = loginResponse.data;
+      localStorage.setItem("token", loginData.access_token);
+      const loggedInUsername = loginData.username;
+      onAuthSuccess(loggedInUsername);
     } catch (err: any) {
-      setError(err.response?.data?.detail || "Registration failed");
+      console.error("Registration/Login error:", err);
+
+      // Axios error handling: Check for response data and detail for custom error message
+      let errorMessage = "Registration failed";
+      if (err.response && err.response.data && err.response.data.detail) {
+        // Extracts the specific error detail from FastAPI (e.g., 'Username already registered')
+        errorMessage = err.response.data.detail;
+      } else if (err.message) {
+        // Use generic network or request error message
+        errorMessage = err.message;
+      }
+
+      setError(errorMessage);
     }
   };
 
@@ -50,14 +67,14 @@ const SignUp: React.FC<SignUpProps> = ({ onSwitchToSignIn, onAuthSuccess }) => {
 
       {error && <p className="text-red-400 text-center mb-3">{error}</p>}
 
-      <form className="space-y-5" onSubmit={handleSubmit}>
+      <div className="space-y-5">
         <div>
-          <label className="text-gray-300">Full Name</label>
+          <label className="text-gray-300">Username</label>
           <div className="relative">
             <User className="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-blue-400" />
             <input
-              value={fullName}
-              onChange={(e) => setFullName(e.target.value)}
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
               type="text"
               className="w-full pl-10 py-3 bg-slate-800 border border-slate-700 text-white rounded-lg"
               required
@@ -107,15 +124,18 @@ const SignUp: React.FC<SignUpProps> = ({ onSwitchToSignIn, onAuthSuccess }) => {
           </div>
         </div>
 
-        <button className="w-full px-5 py-3 rounded-lg bg-linear-to-r from-blue-500 to-gray-500 text-white flex items-center justify-center gap-2">
+        <button
+          onClick={handleSubmit}
+          className="w-full px-5 py-3 rounded-lg bg-gradient-to-r from-blue-500 to-purple-500 text-white flex items-center justify-center gap-2 hover:from-blue-600 hover:to-purple-600 transition"
+        >
           <UserPlus className="w-5 h-5" />
           Sign Up
         </button>
-      </form>
+      </div>
 
       <p className="mt-8 text-center text-sm text-gray-400">
         Already have an account?
-        <button onClick={onSwitchToSignIn} className="text-blue-400 ml-2">
+        <button onClick={onSwitchToSignIn} className="text-blue-400 ml-2 hover:underline">
           Sign In
         </button>
       </p>

Frontend/src/components/context/AuthContext.tsx

@@ -2,7 +2,10 @@ import React, { createContext, useContext, useState } from "react";
 
 interface AuthContextType {
   isAuthenticated: boolean;
-  login: () => void;
+  // 1. Added username to the context type
+  username: string;
+  // 2. Updated login signature to accept the username string
+  login: (name: string) => void;
   logout: () => void;
 }
 
@@ -10,12 +13,23 @@ const AuthContext = createContext<AuthContextType | undefined>(undefined);
 
 export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
   const [isAuthenticated, setIsAuthenticated] = useState(false);
+  // 3. New state to hold the logged-in user's name
+  const [username, setUsername] = useState('Guest');
 
-  const login = () => setIsAuthenticated(true);
-  const logout = () => setIsAuthenticated(false);
+  // 4. Updated login function to accept and set the username
+  const login = (name: string) => {
+    setUsername(name);
+    setIsAuthenticated(true);
+  };
+
+  const logout = () => {
+    // Reset state on logout
+    setIsAuthenticated(false);
+    setUsername('Guest');
+  };
 
   return (
-    <AuthContext.Provider value={{ isAuthenticated, login, logout }}>
+    <AuthContext.Provider value={{ isAuthenticated, username, login, logout }}>
       {children}
     </AuthContext.Provider>
   );
@@ -25,4 +39,4 @@ export const useAuth = () => {
   const ctx = useContext(AuthContext);
   if (!ctx) throw new Error("useAuth must be inside AuthProvider");
   return ctx;
-};
+};

Frontend/src/components/dashboard/Sidebar.tsx

@@ -1,15 +1,16 @@
 import React from "react";
 import { Link, useLocation } from "react-router-dom";
-import { 
-  Home, FileText, Brain, BookOpen, 
-  Settings, User, LogOut 
+import {
+  Home, FileText, Brain, BookOpen,
+  Settings, User, LogOut
 } from "lucide-react";
 
 interface SidebarProps {
-  onLogout?: () => void; // Function to handle logging out
+  onLogout?: () => void; // Function to handle logging out 
+  username: string;
 }
 
-const Sidebar: React.FC<SidebarProps> = ({ onLogout }) => {
+const Sidebar: React.FC<SidebarProps> = ({ onLogout, username }) => {
   const location = useLocation();
 
   const navItems = [
@@ -18,10 +19,10 @@ const Sidebar: React.FC<SidebarProps> = ({ onLogout }) => {
     { path: "/AIInterview", label: "AI Interview", icon: <Brain size={18} /> },
     { path: "/quize", label: "Resume Quiz", icon: <FileText size={18} /> },
   ];
-  
+
   return (
     <aside className="w-64 bg-linear-to-r from-blue-700 to-gray-900/50 text-white flex flex-col justify-between">
-      
+
       {/* Top Section */}
       <div>
         <div className="text-2xl font-bold text-center py-6 border-b border-gray-700">
@@ -33,9 +34,8 @@ const Sidebar: React.FC<SidebarProps> = ({ onLogout }) => {
             <Link
               key={item.path}
               to={item.path}
-              className={`flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 transition ${
-                location.pathname === item.path ? "bg-gray-800" : ""
-              }`}
+              className={`flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 transition ${location.pathname === item.path ? "bg-gray-800" : ""
+                }`}
             >
               {item.icon}
               <span>{item.label}</span>
@@ -52,14 +52,14 @@ const Sidebar: React.FC<SidebarProps> = ({ onLogout }) => {
           <span>Settings</span>
         </button>
 
-        {/* User Profile Placeholder */}
+        {/* User Profile Button - Now displays the actual username */}
         <button className="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 transition w-full text-left text-gray-300">
           <User size={18} />
-          <span>John Doe</span>
+          <span>{username || "Guest User"}</span>
         </button>
 
         {/* Logout Button (Click handler added here) */}
-        <button 
+        <button
           onClick={onLogout}
           className="flex items-center space-x-3 p-3 rounded-lg bg-red-500 hover:bg-red-600 text-black hover:text-white transition w-full text-left font-medium"
         >

Frontend/src/pages/home.tsx

@@ -20,7 +20,7 @@ interface Step {
 
 // Add onLogin prop
 interface AIInterviewPlatformProps {
-    onLogin: () => void;
+    onLogin: (username:string) => void;
 }
 
 const AIInterviewPlatform: React.FC<AIInterviewPlatformProps> = ({ onLogin }) => {
@@ -42,9 +42,9 @@ const AIInterviewPlatform: React.FC<AIInterviewPlatformProps> = ({ onLogin }) =>
     const closeModal = () => setModalType('none');
 
     // Handle successful authentication
-    const handleAuthSuccess = () => {
+    const handleAuthSuccess = (username:string) => {
         closeModal();
-        onLogin(); // Call the parent function to update auth state
+        onLogin(username); // Call the parent function to update auth state
     };
 
     useEffect(() => {