diff --git a/package.json b/package.json index 33d7efb..39b940c 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "aos": "^2.3.4", "axios": "^1.5.1", "framer-motion": "^11.1.9", + "jwt-decode": "^4.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hot-toast": "^2.4.1", diff --git a/server/controllers/Auth.js b/server/controllers/Auth.js index cafbd5d..065fa16 100644 --- a/server/controllers/Auth.js +++ b/server/controllers/Auth.js @@ -265,7 +265,7 @@ exports.canteenSignup = async (req, res) => { // Create a token const token = jwt.sign( - { id: canteen._id, email: canteen.email }, + { id: canteen._id, email: canteen.email, accountType: canteen.accountType, }, process.env.JWT_SECRET, { expiresIn: "1h", // Set token expiration time as needed diff --git a/src/authContext.js b/src/authContext.js index 4b1fb0b..bdb1d70 100644 --- a/src/authContext.js +++ b/src/authContext.js @@ -1,4 +1,4 @@ -import { createContext, useContext, useState } from "react"; +import { createContext, useContext, useState, useEffect } from "react"; const authContext = createContext({ isAuthenticated: false @@ -8,13 +8,34 @@ export const useAuth = () => useContext(authContext); const AuthProvider = ({ children }) => { const [isAuthenticated, setAuthenticated] = useState(false); + + useEffect(() => { + const token = localStorage.getItem('authToken'); + if (token) { + setAuthenticated(true); + } + }, []); - const checkAuthentication = (token) => { - setAuthenticated(!!token); + const login = (token) => { + // saving the token to local storage when canteen user logIn + localStorage.setItem('authToken', token); + setAuthenticated(true); + }; + + const signUp = (token) => { + // saving the token to local storage when canteen user logIn + localStorage.setItem('authToken', token); + setAuthenticated(true); + }; + + const logout = () => { + + localStorage.removeItem('authToken'); + setAuthenticated(false); }; return ( - + {children} ); diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index b4c9860..d813ee0 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,16 +1,34 @@ -import React, { useState, useContext } from "react"; +import React, { useState, useContext, useEffect } from "react"; import { Link } from "react-router-dom"; import logo from "../assets/logo2.png"; import { motion, AnimatePresence, useScroll } from "framer-motion"; import { IoClose } from "react-icons/io5"; import { GiHamburgerMenu } from "react-icons/gi"; import { ThemeContext } from '../themeContext'; +import { jwtDecode } from "jwt-decode"; +import { useAuth } from "../authContext"; const Navbar = () => { - const canteenId = localStorage.getItem("canteenId"); + + const { logout} = useAuth(); + const [canteenId, setCanteenId] = useState(null); const { theme, toggleTheme } = useContext(ThemeContext); const [isOpen, setIsOpen] = useState(false); const { scrollYProgress } = useScroll(); + + useEffect(() => { + const token = localStorage.getItem("authToken"); + if (token) { + try { + const decodedToken = jwtDecode(token); + if (decodedToken.accountType === "Canteen") { + setCanteenId(decodedToken.id); + } + } catch (error) { + console.error("Invalid token", error); + } + } + }, []); const toggleMenu = () => { setIsOpen(!isOpen); @@ -18,98 +36,109 @@ const Navbar = () => { return ( <> - - ); }; const NavItem = ({ icon, to, children }) => { return ( + + {icon && {icon}} {children} diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx index 51e086b..a88369b 100644 --- a/src/pages/Login.jsx +++ b/src/pages/Login.jsx @@ -8,18 +8,25 @@ import Loader from "../components/Loader/Loader"; // Ensure this path is correct import { useAuth } from "../authContext"; function Login() { + const [formData, setFormData] = useState({ email: "", accountType: "", password: "", }); - const { checkAuthentication } = useAuth(); + const { isAuthenticated, login} = useAuth(); const [showPassword, setShowPassword] = useState(false); const [loading, setLoading] = useState(false); const [rememberMe, setRememberMe] = useState(false); const navigate = useNavigate(); + + useEffect(() => { + if(isAuthenticated){ + navigate('/home'); + } + }) useEffect(() => { const storedEmail = localStorage.getItem("rememberedEmail"); @@ -65,6 +72,7 @@ function Login() { } if (formData.accountType === "User") { + navigate("/home"); localStorage.setItem("token", response.data.token); } else { @@ -74,6 +82,7 @@ function Login() { navigate(`/section/${response.data.cantId}`); } + navigate("/home"); } catch (error) { console.error(error); toast.error("Failed to login"); diff --git a/src/pages/Signup.jsx b/src/pages/Signup.jsx index 071741d..54817e6 100644 --- a/src/pages/Signup.jsx +++ b/src/pages/Signup.jsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { Link, useNavigate } from "react-router-dom"; import { AiOutlineEye, AiOutlineEyeInvisible } from "react-icons/ai"; import { toast } from "react-hot-toast"; @@ -7,8 +7,12 @@ import logo from "../assets/logo2.png"; import Icon from 'react-icons-kit'; import { arrows_circle_check } from 'react-icons-kit/linea/arrows_circle_check'; import { arrows_exclamation } from 'react-icons-kit/linea/arrows_exclamation'; +import { useAuth } from "../authContext.js"; function Signup() { + + const { isAuthenticated, signUp } = useAuth(); + const [formData, setFormData] = useState({ name: "", email: "", @@ -28,6 +32,12 @@ function Signup() { const [loading, setLoading] = useState(false); const navigate = useNavigate(); + + useEffect(() => { + if(isAuthenticated){ + navigate('/home'); + } + }) function PasswordChecker(event) { const lower = new RegExp('(?=.*[a-z])'); @@ -73,10 +83,10 @@ function Signup() { toast.success("Account Created Successfully!"); if (formData.accountType === "User") { navigate("/"); - } else { + } + if(formData.accountType === "Canteen") { const token = response.data.token; - localStorage.setItem("token", token); - localStorage.setItem("canteenId", response.data.cantId); + signUp(token); navigate("/home"); } } catch (error) {