feat: integrated login and register functionalities (#15)

package.json

@@ -13,11 +13,13 @@
     "@hookform/resolvers": "^3.9.0",
     "@reduxjs/toolkit": "^2.2.7",
     "@types/react-router-dom": "^5.3.3",
+    "axios": "^1.7.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.52.2",
+    "react-hot-toast": "^2.4.1",
     "react-icons": "^4.12.0",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.26.1",

src/App.tsx

@@ -1,42 +1,47 @@
-import { Footer, Navbar } from './components/layout'
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import Home from './pages/Home'
-import Login from './pages/auth/Login';
-import Register from './pages/auth/Register';
-import Auth from './pages/auth/Auth';
-import { ForgotPassword, ResetPassword } from './pages/auth/forgot-password';
-import About from './pages/About';
-
-
+import { Footer, Navbar } from "./components/layout";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Home from "./pages/Home";
+import Login from "./pages/auth/Login";
+import Register from "./pages/auth/Register";
+import Auth from "./pages/auth/Auth";
+import { ForgotPassword, ResetPassword } from "./pages/auth/forgot-password";
+import About from "./pages/About";
 
+import { Toaster } from "react-hot-toast";
 
 const App = () => {
-
-
-
-  return (
-    <Router>
-      <div className='relative h-full max-w-[4000px] '>
-        <div className='fixed top-0 z-30 w-full overflow-hidden'>
-          <Navbar />
-        </div>
-        <Routes>
-          <Route path='/auth' element={<Auth />}>
-            <Route path='login' element={<Login />} />
-            <Route path='register' element={<Register />} />
-          </Route>
-          <Route path='/auth/forgot-password' element={<ForgotPassword />} />
-          <Route path='/auth/reset-password' element={<ResetPassword />} />
-          <Route path='/' element={<Home />} />
-          <Route path='/about' element={<About />} />
-        </Routes>
-
-        <div className='bg-transparent'>
-          <Footer />
-        </div>
-      </div>
-    </Router>
-  );
-}
-
-export default App;
+	return (
+		<>
+			<Router>
+				<div className="relative h-full max-w-[4000px] ">
+					<div className="fixed top-0 z-30 w-full overflow-hidden">
+						<Navbar />
+					</div>
+					<Routes>
+						<Route path="/auth" element={<Auth />}>
+							<Route path="login" element={<Login />} />
+							<Route path="register" element={<Register />} />
+						</Route>
+						<Route
+							path="/auth/forgot-password"
+							element={<ForgotPassword />}
+						/>
+						<Route
+							path="/auth/reset-password"
+							element={<ResetPassword />}
+						/>
+						<Route path="/" element={<Home />} />
+						<Route path="/about" element={<About />} />
+					</Routes>
+
+					<div className="bg-transparent">
+						<Footer />
+					</div>
+				</div>
+			</Router>
+			<Toaster position="top-right" />
+		</>
+	);
+};
+
+export default App;

src/apis/axios.ts

@@ -1,20 +1,43 @@
-import axios, { AxiosError, InternalAxiosRequestConfig } from "axios";
+import axios, {
+	AxiosError,
+	AxiosResponse,
+	InternalAxiosRequestConfig,
+} from "axios";
 
 const baseURL = `${import.meta.env.VITE_PUBLIC_API_URL}/api/v1/`;
 
 // Create an axios instance with the base URL
 const axiosClient = axios.create({
-    baseURL,
+	baseURL,
 });
 
 axiosClient.interceptors.request.use(
-    (config: InternalAxiosRequestConfig) => {
-        // config.headers["access-control-allow-origin"] = "*";
-        return config;
-    },
-    (error: AxiosError) => {
-        return Promise.reject(error);
-    }
+	(config: InternalAxiosRequestConfig) => {
+		const resource = localStorage.getItem("TOKEN");
+		if (resource) {
+            const token = JSON.parse(resource).access_token;
+			config.headers.Authorization = `Bearer ${token}`;
+		}
+		// config.headers["access-control-allow-origin"] = "*";
+		return config;
+	},
+	(error: AxiosError) => {
+		return Promise.reject(error);
+	}
 );
 
-export default axiosClient;
+// Response interceptor to handle errors
+axiosClient.interceptors.response.use(
+	(response: AxiosResponse) => {
+		return response;
+	},
+	(error: AxiosError) => {
+		if (error.response && error.response.status === 401) {
+			localStorage.removeItem("TOKEN");
+			window.location.reload();
+		}
+		return Promise.reject(error);
+	}
+);
+
+export default axiosClient;