PHW-45 Integrated SS auth logic

package.json

@@ -11,10 +11,11 @@
   "dependencies": {
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
+    "@mui/icons-material": "^5.11.9",
     "@mui/joy": "^5.0.0-alpha.67",
     "@mui/material": "^5.11.9",
+    "axios": "^1.3.4",
     "node-sass": "^8.0.0",
-    "@mui/icons-material": "^5.11.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.1",
@@ -30,4 +31,4 @@
     "typescript": "^4.6.4",
     "vite": "^3.2.3"
   }
-}
+}

src/App.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import { Route, Routes } from "react-router";
 import AuthForm from "./features/auth/components/AuthForm";
@@ -12,33 +12,46 @@ import Project from "./pages/Project";
 import { AuthContext } from "./features/auth/context/AuthContext";
 import { User } from "./types/User";
 import CreateProject from "./pages/CreateProject";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 function App() {
   const [isOpen, setIsOpen] = useState(false);
-  const [user, setUser] = useState< User | null>(null);
+  const [user, setUser] = useState<User | null>(null);
+
+  useEffect(() => {
+    const user = localStorage.getItem("user");
+    if (user) {
+      setUser(JSON.parse(user));
+    }
+  }, []);
 
   const closeModal = () => {
     setIsOpen(false);
   };
 
+  const openAuthModal = () => {
+    setIsOpen(true);
+  };
+
   return (
     <AuthContext.Provider value={{ user, setUser }}>
-      <Navbar />
+      <Navbar openAuthModal={openAuthModal} />
       <Routes>
         {/* Home Page */}
-        <Route path='/' element={<Home />} />
+        <Route path="/" element={<Home />} />
 
         {/* Project Page */}
-        <Route path='/projects/:projectId' element={<Project />} />
+        <Route path="/projects/:projectId" element={<Project />} />
 
         {/* Project Page */}
-        <Route path='/create-project' element={<CreateProject />} />
+        <Route path="/create-project" element={<CreateProject />} />
 
         {/* Profile Page */}
-        <Route path='/profile/:userId' element={<Profile />} />
+        <Route path="/profile/:userId" element={<Profile />} />
 
         {/* Not Found Page */}
-        <Route path='*' element={<NotFound />} />
+        <Route path="*" element={<NotFound />} />
       </Routes>
       <Footer />
 
@@ -50,6 +63,7 @@ function App() {
           </Dialog>,
           document.body
         )}
+      <ToastContainer />
     </AuthContext.Provider>
   );
 }

src/features/auth/api/auth.ts

@@ -0,0 +1,24 @@
+import axios from "axios"
+import { User } from "../../../types/User";
+
+export const login = async (email: string, password: string): Promise<User> => {
+    const userData = await axios.post("/api/v1/user/login", {
+        email,
+        password,
+    })
+    return userData.data;
+}
+
+export const register = async (
+  username: string,
+  email: string,
+  password: string
+): Promise<User> => {
+  const userData = await axios.post("/api/v1/user/new", {
+    email,
+    username,
+    password,
+  });
+
+  return userData.data;
+};