fix: handle 401 responses globally with axios interceptor (Closes #473)

frontend/src/main.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.tsx';
 import './index.css';
+import './utils/api'; // registers global axios 401 interceptor
 import { BrowserRouter } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { WalletProvider } from './providers/WalletProvider.tsx';

frontend/src/utils/api.ts

@@ -1,4 +1,5 @@
-import axios from 'axios';
+import axios, { AxiosError } from 'axios';
+import { toast } from 'sonner';
 
 const api = axios.create({
   baseURL: import.meta.env.VITE_API_URL || 'http://localhost:4000/api',
@@ -21,6 +22,40 @@ api.interceptors.request.use(
   }
 );
 
+const AUTH_TOKEN_KEY = 'payd_auth_token';
+const LOGIN_PATH = '/login';
+
+function handleUnauthorized(error: AxiosError) {
+  if (error.response?.status !== 401) {
+    return Promise.reject(error);
+  }
+
+  // Skip auth endpoints (login itself may legitimately return 401 for bad credentials).
+  const requestUrl = error.config?.url ?? '';
+  if (requestUrl.includes('/auth/')) {
+    return Promise.reject(error);
+  }
+
+  const hadToken = Boolean(localStorage.getItem(AUTH_TOKEN_KEY));
+  localStorage.removeItem(AUTH_TOKEN_KEY);
+
+  const currentPath = window.location.pathname;
+
+  if (hadToken && currentPath !== LOGIN_PATH) {
+    toast.error('Session expired, please log in again');
+    window.location.assign(LOGIN_PATH);
+  }
+
+  return Promise.reject(error);
+}
+
+// Register the 401 handler on the shared axios instance.
+api.interceptors.response.use((response) => response, handleUnauthorized);
+
+// Also handle 401 globally for every bare `axios.*` call across the app so an
+// expired session never surfaces as a silent spinner/empty table.
+axios.interceptors.response.use((response) => response, handleUnauthorized);
+
 export default api;
 
 export interface ApiError extends Error {