feat: implement frontend login functionality with form handling and error management

apps/frontend/app/providers/ApiProvider.tsx

@@ -1,9 +1,10 @@
-import { createContext, use, useContext, type PropsWithChildren } from 'react';
+import { createContext, use, type PropsWithChildren } from 'react';
 import { createTanstackApi, createApi } from '../lib/api';
 import axios from 'axios';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useNavigate } from 'react-router';
 
-type ApiProviderProps = PropsWithChildren<{}>;
+type ApiProviderProps = PropsWithChildren<object>;
 type ApiContextType = {
   apiClient: ReturnType<typeof createApi>;
   tanstackApiClient: ReturnType<typeof createTanstackApi>;
@@ -31,11 +32,33 @@ const queryClient = new QueryClient();
  */
 
 export const ApiProvider: React.FC<ApiProviderProps> = ({ children }) => {
+  const navigate = useNavigate();
   const axiosInstance = axios.create({
     withCredentials: true,
   });
+
+  const internalAxiosInstance = axios.create({
+    withCredentials: true,
+  });
+
+  internalAxiosInstance.interceptors.response.use(
+    (response) => response,
+    (error) => {
+      // only handle 403 errors
+      if (!error.response) return Promise.reject(error);
+
+      if (error.response.status === 401) {
+        // redirect to login page
+        return navigate('/login', {});
+      }
+
+      return Promise.reject(error);
+    }
+  );
+
   const apiClient = createApi(axiosInstance);
-  const tanstackApiClient = createTanstackApi(axiosInstance);
+  const tanstackApiClient = createTanstackApi(internalAxiosInstance);
+
   return (
     <QueryClientProvider client={queryClient}>
       <ApiContext