Create AuthContext and add login/logout functionality

frontend/src/App.jsx

@@ -1,17 +1,28 @@
-import { Route, Routes } from "react-router-dom";
+import { Navigate, Route, Routes } from "react-router-dom";
 import "./App.css";
 import Home from "./pages/home/Home";
 import Login from "./pages/login/Login";
 import SignUp from "./pages/signup/SignUp";
 import { Toaster } from "react-hot-toast";
+import { useAuthContext } from "./context/AuthContext";
 
 function App() {
+  const { authUser } = useAuthContext();
   return (
     <div className="p-4 h-screen flex items-center justify-center">
       <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/login" element={<Login />} />
-        <Route path="/signup" element={<SignUp />} />
+        <Route
+          path="/"
+          element={authUser ? <Home /> : <Navigate to={"/login"} />}
+        />
+        <Route
+          path="/login"
+          element={authUser ? <Navigate to="/" /> : <Login />}
+        />
+        <Route
+          path="/signup"
+          element={authUser ? <Navigate to="/" /> : <SignUp />}
+        />
       </Routes>
       <Toaster />
     </div>

frontend/src/components/LogoutButton.jsx

@@ -1,10 +1,19 @@
 import React from "react";
 import { BiLogOut } from "react-icons/bi";
+import useLogout from "../hooks/useLogout";
 
 const LogoutButton = () => {
+  const { loading, logout } = useLogout();
   return (
     <div className="mt-auto">
-      <BiLogOut className="w-6 h-6 text-white cursor-pointer" />
+      {!loading ? (
+        <BiLogOut
+          className="w-6 h-6 text-white cursor-pointer"
+          onClick={logout}
+        />
+      ) : (
+        <span className="loading loading-spinner"></span>
+      )}
     </div>
   );
 };

frontend/src/context/AuthContext.jsx

@@ -0,0 +1,18 @@
+import { createContext, useContext, useState } from "react";
+
+export const AuthContext = createContext();
+
+export const useAuthContext = () => {
+  return useContext(AuthContext);
+};
+
+export const AuthContextProvider = ({ children }) => {
+  const [authUser, setAuthUser] = useState(
+    JSON.parse(localStorage.getItem("chat-user")) || null
+  );
+  return (
+    <AuthContext.Provider value={{ authUser, setAuthUser }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};

frontend/src/hooks/useLogin.js

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { toast } from 'react-hot-toast';
+import { useAuthContext } from '../context/AuthContext';
+
+const useLogin = () => {
+  const [loading, setLoading] = useState(false);
+  const {setAuthUser} = useAuthContext();
+
+  const login = async (username, password) => {
+
+    const success = handleInputErrors({username, password});
+    if (!success) return;
+    setLoading(true);
+    try {
+        const res = await fetch("/api/auth/login", {
+            method: "POST",
+            headers: { "Content-Type": "application/json"},
+            body: JSON.stringify({username, password})
+        });
+
+        const data = await res.json();
+        if (data.error) {
+            throw new Error(data.error);
+        }   
+
+        localStorage.setItem("chat-user", JSON.stringify(data));
+        setAuthUser(data); 
+    } catch (error) {
+        toast.error(error.message);        
+    } finally {
+        setLoading(false);
+    }
+  };
+
+  return { loading, login };
+};
+
+export default useLogin;
+
+
+function handleInputErrors({username, password}) {
+    if(!username || !password) {
+        toast.error('Please fill in all fields');
+        return false;
+    }
+    return true;
+}

frontend/src/hooks/useLogout.js

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { useAuthContext } from '../context/AuthContext';
+import { toast } from 'react-hot-toast';
+
+const useLogout = () => {
+  const [loading, setLoading] = useState(false);
+  const {setAuthUser} = useAuthContext();
+
+  const logout = async () => {
+    setLoading(true);
+    try {
+        const res = await fetch("/api/auth/logout", {
+            method: "POST",
+            headers: {"Content-Type": "application/json"},
+        });
+        const data = await res.json();
+        if (data.error) {
+            throw new Error(data.error);
+        }
+        localStorage.removeItem("chat-user");
+        setAuthUser(null);
+    } catch (error) {
+        toast.error(error.message);
+    } finally {
+        setLoading(false);
+    }
+  };
+
+  return { loading, logout };
+}
+
+export default useLogout;

frontend/src/hooks/useSignup.js

@@ -1,8 +1,10 @@
 import React, { useState } from 'react'
 import { toast } from 'react-hot-toast';
+import { useAuthContext } from '../context/AuthContext';
 
 const useSignup = () => {
   const [loading, setLoading] = useState(false);
+  const {setAuthUser} = useAuthContext();
 
   const signup = async ({fullName, username, password, confirmPassword, gender}) => {
     const success = handleInputErrors({fullName, username, password, confirmPassword, gender});
@@ -17,7 +19,12 @@ const useSignup = () => {
         })
 
         const data = await res.json();
-        console.log(data);
+        if (data.error) {
+            throw new Error(data.error);
+        }
+
+        localStorage.setItem("chat-user", JSON.stringify(data))
+        setAuthUser(data)
 
     } catch (error) {
         toast.error(error.message)

frontend/src/main.jsx

@@ -3,11 +3,14 @@ import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./App.jsx";
 import { BrowserRouter } from "react-router-dom";
+import { AuthContextProvider } from "./context/AuthContext";
 
 createRoot(document.getElementById("root")).render(
   <StrictMode>
     <BrowserRouter>
-      <App />
+      <AuthContextProvider>
+        <App />
+      </AuthContextProvider>
     </BrowserRouter>
   </StrictMode>
 );

frontend/src/pages/login/Login.jsx

@@ -1,7 +1,17 @@
-import React from "react";
+import React, { useState } from "react";
 import { Link } from "react-router-dom";
+import useLogin from "../../hooks/useLogin";
 
 const Login = () => {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
+  const { loading, login } = useLogin();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    await login(username, password);
+  };
   return (
     <div className="flex flex-col items-center justify-center min-w-96 mx-auto">
       <div className="w-full p-6 rounded-1g shadow-md bg-gray-400 bg-clip-padding backdrop-filter backdrop-blur-lg bg-opacity-0">
@@ -10,7 +20,7 @@ const Login = () => {
           <span className="text-blue-500"> ChatApp</span>
         </h1>
 
-        <form>
+        <form onSubmit={handleSubmit}>
           <div>
             <label className="label p-2">
               <span className="text-base label-text">Username</span>
@@ -19,6 +29,8 @@ const Login = () => {
               type="text"
               placeholder="Enter username"
               className="w-full input input-bordered h-10"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
             />
           </div>
 
@@ -30,6 +42,8 @@ const Login = () => {
               type="password"
               placeholder="Enter Password"
               className="w-full input input-bordered h-10"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
             />
           </div>
           <Link
@@ -40,7 +54,13 @@ const Login = () => {
           </Link>
 
           <div>
-            <button className="btn btn-block btn-sm mt-2">Login</button>
+            <button className="btn btn-block btn-sm mt-2" disabled={loading}>
+              {loading ? (
+                <span className="loading loading-spinner"></span>
+              ) : (
+                "Login"
+              )}
+            </button>
           </div>
         </form>
       </div>

frontend/src/pages/signup/SignUp.jsx

@@ -101,8 +101,15 @@ const SignUp = () => {
           </Link>
 
           <div>
-            <button className="btn btn-block btn-sm mt-2 border border-slate-700">
-              Sign Up
+            <button
+              className="btn btn-block btn-sm mt-2 border border-slate-700"
+              disabled={loading}
+            >
+              {loading ? (
+                <span className="loading loading-spinner"></span>
+              ) : (
+                "Sign Up"
+              )}
             </button>
           </div>
         </form>