Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Solved Bugs related to Authentication #348

Merged
merged 4 commits into from
Jun 21, 2024
Merged

Solved Bugs related to Authentication #348

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
51048e3
cleared all bugs🐞 related to authentication 🔐 and localstorage 📂
Praveenkumar5048 Jun 20, 2024
0166ee1
few minor changes
Praveenkumar5048 Jun 20, 2024
7c46f6f
solved merge conflicts
Praveenkumar5048 Jun 20, 2024
423760d
Merge branch 'main' into main
hustlerZzZ Jun 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion server/controllers/Auth.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
29 changes: 25 additions & 4 deletions src/authContext.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { createContext, useContext, useState } from "react";
import { createContext, useContext, useState, useEffect } from "react";

const authContext = createContext({
isAuthenticated: false
Expand All @@ -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 (
<authContext.Provider value={{ isAuthenticated, checkAuthentication }}>
<authContext.Provider value={{ isAuthenticated, login, logout, signUp }}>
{children}
</authContext.Provider>
);
Expand Down
140 changes: 58 additions & 82 deletions src/components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,77 +1,86 @@
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);
};

return (
<>
<nav className="text-white p-3 shadow-lg top-0 bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 w-full fixed z-40 dark:bg-cadetblue dark:bg-none">
<motion.div
className="left-0 top-0 w-full h-1 bg-blue-500 fixed z-50"
style={{ scaleX: scrollYProgress }}
/>
<div className="max-w-full mx-auto px-4 sm:px-6 lg:px-12">
<div className="flex items-center justify-between h-16">
{/* Foodies Web Logo */}
<div className="flex-shrink-0">
<Link to="/home" className="flex items-center">
<img src={logo} alt="Logo" className="h-12" />
</Link>
</div>
<nav className="text-white p-3 shadow-lg top-0 bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 w-full fixed z-40 dark:bg-cadetblue dark:bg-none">
<motion.div
className="left-0 top-0 w-full h-1 bg-blue-500 fixed z-50"
style={{ scaleX: scrollYProgress }}
/>
<div className="max-w-full mx-auto px-4 sm:px-6 lg:px-12">
<div className="flex items-center justify-between h-16">
{/* Foodies Web Logo */}
<div className="flex-shrink-0">
<Link to="/home" className="flex items-center">
<img src={logo} alt="Logo" className="h-12" />
</Link>
</div>

<div className="hidden md:block">
<div className="ml-16 flex gap-6 items-baseline space-x-4">
<NavItem to="/home" icon={<IconHome />}>Home</NavItem>
<NavItem to="/about" icon={<IconAbout />}>About</NavItem>
<NavItem to="/news" icon={<IconNews />}>News</NavItem>
<NavItem to="/rateus" icon={<IconRateUs />}>RateUs</NavItem>
{/* Conditionally render "My Canteen" button */}
{canteenId && (
<NavItem to={`/section/${canteenId}`} icon={<IconCanteen />}>My&nbsp;Canteen</NavItem>
)}
</div>
<div className="hidden md:block">
<div className="ml-16 flex gap-6 items-baseline space-x-4">
<NavItem to="/home" icon={<IconHome />}>Home</NavItem>
<NavItem to="/about" icon={<IconAbout />}>About</NavItem>
<NavItem to="/news" icon={<IconNews />}>News</NavItem>
<NavItem to="/rateus" icon={<IconRateUs />}>RateUs</NavItem>
{/* Conditionally render "My Canteen" button */}
{canteenId && (
<NavItem to={`/section/${canteenId}`} icon={<IconCanteen />}>My&nbsp;Canteen</NavItem>
)}
</div>


<div className="ml-16 flex gap-6 items-baseline space-x-4 ">
<NavItem to="/home" className="nav-item" icon={<IconHome />}>Home</NavItem>
<NavItem to="/about" className="nav-item" icon={<IconAbout />}>About</NavItem>
<NavItem to="/news" className="nav-item" icon={<IconNews />}>News</NavItem>
<NavItem to="/rateus" className="nav-item" icon={<IconRateUs />}>RateUs</NavItem>
</div>

</div>

<div className="hidden md:flex items-center gap-5">
<button onClick={toggleTheme} className="p-2 rounded focus:outline-none text-4xl border-none outline-none ">
<button onClick={toggleTheme} className="p-2 rounded focus:outline-none text-4xl border-none outline-none">
{theme === 'dark' ? '🌞' : '🌙'}
</button>
<div>
<Link to="/">
<button

className={`py-1 px-2 rounded w-full h-auto text-l relative z-0 rounded-lg transition-all duration-200 hover:scale-110 ${theme === 'dark' ? 'bg-white text-black' : 'bg-green-400 hover:bg-green-600 hover:shadow-green text-white'}`}

onClick={logout}
className={`py-1 px-2 w-full h-auto text-l relative z-0 rounded-lg transition-all duration-200 hover:scale-110 ${theme === 'dark' ? 'bg-white text-black' : 'bg-green-400 hover:bg-green-600 hover:shadow-green text-white'}`}
>
Log out
</button>
</Link>
</div>
</div>

<div className="-mr-2 flex md:hidden">
<button onClick={toggleTheme} className="p-2 rounded focus:outline-none text-2xl border-none outline-none ">
<button onClick={toggleTheme} className="p-2 rounded focus:outline-none text-2xl border-none outline-none">
{theme === 'dark' ? '🌞' : '🌙'}
</button>
<button
Expand All @@ -88,6 +97,7 @@ const Navbar = () => {
</div>
</div>
</div>

<AnimatePresence>
{isOpen && (
<motion.div
Expand All @@ -101,58 +111,24 @@ const Navbar = () => {
<MobileNavItem to="/about">About us</MobileNavItem>
<MobileNavItem to="/news">News</MobileNavItem>
<MobileNavItem to="/contact">Contact</MobileNavItem>


<AnimatePresence>
{isOpen && (
<motion.div
initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -50 }}
className="md:hidden absolute left-0 w-full flex flex-col items-center justify-center"
>
<div className="w-[100%] bg-[#152146] px-[20%] pt-2 pb-3 space-y-1 mt-1 dark:bg-teal-900">
<MobileNavItem to="/home">Home</MobileNavItem>
<MobileNavItem to="/about">About us</MobileNavItem>
<MobileNavItem to="/news">News</MobileNavItem>
<MobileNavItem to="/contact">Contact</MobileNavItem>
<MobileNavItem to="/rateus">RateUs</MobileNavItem>
{/* Conditionally render "My Canteen" button */}
{canteenId && (
<MobileNavItem to={`/section/${canteenId}`}>My Canteen</MobileNavItem>
)}
<MobileNavItem to="/">
<button
className={`rounded transition duration-300 ease-in-out transform hover:scale-105 ${theme === 'dark' ? 'bg-white text-black' : 'bg-green-500 hover:bg-green-700 text-white py-1 px-2'}`}
>
Log out
</button>
</MobileNavItem>
</div>
</motion.div>
)}
</AnimatePresence>
</nav>
</>
<MobileNavItem to="/rateus">Rateus</MobileNavItem>

<MobileNavItem to="/rateus">RateUs</MobileNavItem>
{/* Conditionally render "My Canteen" button */}
{canteenId && (
<MobileNavItem to={`/section/${canteenId}`}>My Canteen</MobileNavItem>
)}
<MobileNavItem to="/">
<Link to="/">
<button

onClick={logout}
className={`rounded transition duration-300 ease-in-out transform hover:scale-105 ${theme === 'dark' ? 'bg-white text-black' : 'bg-green-500 hover:bg-green-700 text-white py-1 px-2'}`}

>
Log out
</button>
</Link>
</MobileNavItem>
</div>
</motion.div>
)}
</AnimatePresence>
</div>
</nav>
</nav>
</>
);
};
Expand All @@ -161,7 +137,7 @@ const NavItem = ({ icon, to, children }) => {
return (
<Link
to={to}
className="flex items-center space-x-2 w-full h-auto relative z-0 rounded-lg transition-all duration-200 hover:scale-125 text-xl block hover:bg-opacity-50"
className="flex items-center space-x-2 w-full h-auto relative z-0 rounded-lg transition-all duration-200 hover:scale-125 text-xl hover:bg-opacity-50"
>
{icon && <span>{icon}</span>}
<span>{children}</span>
Expand Down
24 changes: 15 additions & 9 deletions src/pages/Login.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down Expand Up @@ -65,15 +72,14 @@ function Login() {
}

if (formData.accountType === "User") {
navigate("/home");
} else {
navigate("/home");

localStorage.setItem("canteenId",response.data.cantId);
localStorage.setItem("token",response.data.token);
navigate(`/section/${response.data.cantId}`);

const token = response.data.token;
login(token);
}
if(formData.accountType === "Canteen") {
const token = response.data.token;
login(token);
}
navigate("/home");
} catch (error) {
toast.error("Failed to login");
}
Expand Down
23 changes: 14 additions & 9 deletions src/pages/Signup.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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: "",
Expand All @@ -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])');
Expand Down Expand Up @@ -73,16 +83,11 @@ 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");
} else {
navigate("/");

navigate(`/section/${response.data.cantId}`);

}
} catch (error) {
const errorMessage = error.response?.data?.message || "Failed to create account. Please try again.";
Expand Down
Loading