feat(frontend): implement centralized axios API client and global 401 handling

frontend/package.json

@@ -13,7 +13,7 @@
     "@hookform/resolvers": "^5.2.2",
     "@tailwindcss/vite": "^4.2.4",
     "@tanstack/react-query": "^5.99.2",
-    "axios": "^1.15.2",
+    "axios": "^1.16.1",
     "dotenv": "^17.4.2",
     "fuse.js": "^7.3.0",
     "react": "^19.2.5",

frontend/src/App.tsx

@@ -69,7 +69,7 @@ function App() {
     if (!token) return; // error case already reflected in the initial page state
 
     localStorage.setItem("token", token);
-    fetchCurrentUser(token)
+    fetchCurrentUser()
       .then((user) => {
         const hasProfile = Boolean(user.profile?.bio || user.profile?.github);
         setAuth({ token, user, isNewUser: false });
@@ -82,6 +82,22 @@ function App() {
       .finally(() => setHydrating(false));
   }, []);
 
+  // Listen for global 401 errors from apiClient to reset state cleanly
+  useEffect(() => {
+    const handleUnauthorized = () => {
+      localStorage.removeItem("token");
+      localStorage.removeItem("org_token");
+      setAuth(null);
+      setActiveInterviewId(null);
+      setPage("login");
+    };
+
+    window.addEventListener("auth:unauthorized", handleUnauthorized);
+    return () => {
+      window.removeEventListener("auth:unauthorized", handleUnauthorized);
+    };
+  }, []);
+
   const handleUserLoginSuccess = (data: TokenResponse) => {
     const hasProfile = Boolean(
       data.user.profile?.bio || data.user.profile?.github,
@@ -155,7 +171,6 @@ function App() {
       return (
         <ProfileSetupPage
           userId={auth.user.id}
-          token={auth.token}
           username={auth.user.username}
           onComplete={handleProfileComplete}
         />
@@ -166,7 +181,6 @@ function App() {
       return (
         <DashboardPage
           user={auth.user}
-          token={auth.token}
           onLogout={handleLogout}
           onAttemptInterview={handleAttemptInterview}
         />
@@ -177,7 +191,6 @@ function App() {
       return (
         <InterviewSessionPage
           interviewId={activeInterviewId}
-          token={auth.token}
           onExit={handleExitInterview}
         />
       );

frontend/src/features/interview/InterviewSessionPage.tsx

@@ -10,13 +10,11 @@ import type {
 
 export interface InterviewSessionPageProps {
   interviewId: number;
-  token: string;
   onExit: () => void;
 }
 
 const InterviewSessionPage: React.FC<InterviewSessionPageProps> = ({
   interviewId,
-  token,
   onExit,
 }) => {
   const {
@@ -28,7 +26,7 @@ const InterviewSessionPage: React.FC<InterviewSessionPageProps> = ({
     followUpIndex,
     answer,
     applyState,
-  } = useInterviewSession(interviewId, token);
+  } = useInterviewSession(interviewId);
 
   return (
     <div
@@ -70,7 +68,6 @@ const InterviewSessionPage: React.FC<InterviewSessionPageProps> = ({
             error,
             onAnswer: answer,
             applyState,
-            token,
             followUpIndex,
           })}
 
@@ -91,7 +88,6 @@ interface RenderArgs {
   error: string | null;
   onAnswer: (text: string) => Promise<void>;
   applyState: (next: InterviewStateResponse) => void;
-  token: string;
   followUpIndex: number;
 }
 
@@ -102,7 +98,6 @@ function renderRound({
   error,
   onAnswer,
   applyState,
-  token,
   followUpIndex,
 }: RenderArgs) {
   if (question.type === "custom") {
@@ -135,7 +130,6 @@ function renderRound({
     <DsaPanel
       key={`d-${question.interaction_id}`}
       sessionId={state.session_id}
-      token={token}
       question={question}
       onAdvance={applyState}
     />

frontend/src/features/interview/components/DsaPanel.tsx

@@ -16,7 +16,6 @@ import type {
 
 interface Props {
   sessionId: number;
-  token: string;
   question: Extract<QuestionPayload, { type: "dsa" }>;
   onAdvance: (next: InterviewStateResponse) => void;
 }
@@ -89,12 +88,7 @@ type ConsoleState =
     }
   | { kind: "error"; message: string };
 
-export default function DsaPanel({
-  sessionId,
-  token,
-  question,
-  onAdvance,
-}: Props) {
+export default function DsaPanel({ sessionId, question, onAdvance }: Props) {
   const [language, setLanguage] = useState<LangOpt>("python");
   const [source, setSource] = useState<string>(
     LANGUAGES.find((l) => l.value === "python")?.starter ?? "",
@@ -125,11 +119,11 @@ export default function DsaPanel({
   const handleRun = async () => {
     setConsoleState({ kind: "running", label: "Running…" });
     try {
-      const res = await dsaRun(
-        sessionId,
-        { source_code: source, language, stdin },
-        token,
-      );
+      const res = await dsaRun(sessionId, {
+        source_code: source,
+        language,
+        stdin,
+      });
       setConsoleState({ kind: "run-result", result: res });
     } catch (e) {
       setConsoleState({
@@ -143,11 +137,7 @@ export default function DsaPanel({
   const handleTest = async () => {
     setConsoleState({ kind: "running", label: "Running hidden test cases…" });
     try {
-      const res = await dsaTest(
-        sessionId,
-        { source_code: source, language },
-        token,
-      );
+      const res = await dsaTest(sessionId, { source_code: source, language });
       setConsoleState({ kind: "test-result", result: res });
     } catch (e) {
       setConsoleState({
@@ -162,11 +152,7 @@ export default function DsaPanel({
     setShowConfirm(false);
     setConsoleState({ kind: "running", label: "Grading your submission…" });
     try {
-      const res = await dsaSubmit(
-        sessionId,
-        { source_code: source, language },
-        token,
-      );
+      const res = await dsaSubmit(sessionId, { source_code: source, language });
       setConsoleState({
         kind: "submit-result",
         results: res.case_results,

frontend/src/features/interview/hooks/useInterviewSession.ts

@@ -32,7 +32,6 @@ const HEARTBEAT_MS = 5000;
 
 export function useInterviewSession(
   interviewId: number,
-  token: string,
 ): UseInterviewSessionReturn {
   const [phase, setPhase] = useState<InterviewPhase>("loading");
   const [state, setState] = useState<InterviewStateResponse | null>(null);
@@ -59,7 +58,7 @@ export function useInterviewSession(
       heartbeatRef.current = setInterval(async () => {
         if (stoppedRef.current) return;
         try {
-          const res = await sendHeartbeat(sessionId, token);
+          const res = await sendHeartbeat(sessionId);
           if (res.status !== "ongoing") {
             stoppedRef.current = true;
             stopHeartbeat();
@@ -71,7 +70,7 @@ export function useInterviewSession(
         }
       }, HEARTBEAT_MS);
     },
-    [token, stopHeartbeat],
+    [stopHeartbeat],
   );
 
   const applyState = useCallback(
@@ -109,7 +108,7 @@ export function useInterviewSession(
 
     (async () => {
       try {
-        const initial = await startInterview(interviewId, token);
+        const initial = await startInterview(interviewId);
         if (cancelled) return;
         setState(initial);
         if (initial.completed) {
@@ -134,15 +133,15 @@ export function useInterviewSession(
       stoppedRef.current = true;
       stopHeartbeat();
     };
-  }, [interviewId, token, startHeartbeat, stopHeartbeat]);
+  }, [interviewId, startHeartbeat, stopHeartbeat]);
 
   const answer = useCallback(
     async (text: string) => {
       if (!state || isSubmitting) return;
       setIsSubmitting(true);
       setError(null);
       try {
-        const next = await submitAnswer(state.session_id, text, token);
+        const next = await submitAnswer(state.session_id, text);
         applyState(next);
       } catch (e) {
         if (e instanceof InterviewServiceError) {
@@ -161,7 +160,7 @@ export function useInterviewSession(
         setIsSubmitting(false);
       }
     },
-    [state, isSubmitting, token, applyState, stopHeartbeat],
+    [state, isSubmitting, applyState, stopHeartbeat],
   );
 
   return {

frontend/src/features/user/DashboardPage.tsx

@@ -8,7 +8,6 @@ import type {
 
 export interface DashboardPageProps {
   user: UserResponse;
-  token: string;
   onLogout: () => void;
   onAttemptInterview?: (interviewId: number) => void;
 }
@@ -64,14 +63,13 @@ function timeRemaining(deadline: string) {
 
 const DashboardPage: React.FC<DashboardPageProps> = ({
   user,
-  token,
   onLogout,
   onAttemptInterview,
 }) => {
   const [tab, setTab] = useState<Tab>("available");
   const [query, setQuery] = useState("");
   const [selectedId, setSelectedId] = useState<number | null>(null);
-  const { available, applied, isLoading, error, refetch } = useDashboard(token);
+  const { available, applied, isLoading, error, refetch } = useDashboard();
 
   const displayName = user.username;
   const initials = displayName.slice(0, 2).toUpperCase();

frontend/src/features/user/ProfileSetupPage.tsx

@@ -5,19 +5,17 @@ import type { UserResponse } from "../../services/user.service";
 
 export interface ProfileSetupPageProps {
   userId: number;
-  token: string;
   username: string;
   onComplete: (user: UserResponse) => void;
 }
 
-const ProfileSetupPage: React.FC<ProfileSetupPageProps> = ({
+export function ProfileSetupPage({
   userId,
-  token,
   username,
   onComplete,
-}) => {
+}: ProfileSetupPageProps) {
   const { form, isLoading, error, handleChange, handleSubmit, handleSkip } =
-    useProfileSetup(userId, token, onComplete);
+    useProfileSetup(userId, onComplete);
 
   return (
     <div
@@ -303,7 +301,7 @@ const ProfileSetupPage: React.FC<ProfileSetupPageProps> = ({
       </section>
     </div>
   );
-};
+}
 
 const BgBlobs = () => (
   <>