token refresher

This commit is contained in:
amNobodyyy
2025-01-29 00:21:08 +05:30
parent 16db1725f3
commit 597e47c2d0
10 changed files with 265 additions and 100 deletions

View File

@@ -13,9 +13,12 @@ import CourseTable from "./Pages/CourseTable";
import ConsolidatedTable from "./Pages/ConsolidatedTable";
import CourseConsolidated from "./Pages/courseConsolidated";
import PrivateRoute from "./components/PrivateRoute";
import TokenRefresher from "./components/TokenRefresher";
function App() {
return (
<>
<TokenRefresher />
<Routes>
<Route path="/" element={<AuthPage />}></Route>
<Route path="/course-form/:id" element={<PrivateRoute element={<CourseForm />} />} />
@@ -28,6 +31,7 @@ function App() {
<Route path="/consolidated" element={<PrivateRoute element={<ConsolidatedTable />} />} />
<Route path="/courseConsolidated" element={<PrivateRoute element={<CourseConsolidated />} />} />
</Routes>
</>
);
}

View File

@@ -6,39 +6,39 @@ import Navbar from "./Navbar";
const styles = {
header: {
background: '#003366',
color: 'white',
padding: '20px 0',
textAlign: 'center',
fontSize: '24px',
marginBottom: '0',
background: "#003366",
color: "white",
padding: "20px 0",
textAlign: "center",
fontSize: "24px",
marginBottom: "0",
},
buttonRow: {
display: 'flex',
justifyContent: 'space-around',
alignItems: 'center',
padding: '10px 0',
margin: '0',
backgroundColor: '#003366',
boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
display: "flex",
justifyContent: "space-around",
alignItems: "center",
padding: "10px 0",
margin: "0",
backgroundColor: "#003366",
boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
},
button: {
padding: '10px 20px',
borderRadius: '5px',
color: 'white',
border: 'none',
cursor: 'pointer',
fontSize: '16px',
flex: '1',
padding: "10px 20px",
borderRadius: "5px",
color: "white",
border: "none",
cursor: "pointer",
fontSize: "16px",
flex: "1",
},
bulkDownloadButton: {
backgroundColor: '#3fb5a3',
backgroundColor: "#3fb5a3",
},
downloadButton: {
backgroundColor: '#28a745',
backgroundColor: "#28a745",
},
emailButton: {
backgroundColor: '#ff6f61',
backgroundColor: "#ff6f61",
},
tableContainer: {
maxHeight: "70vh",
@@ -77,11 +77,9 @@ const styles = {
},
main: {
width: "100%",
}
},
};
const ConsolidatedTable = () => {
const [searchQuery, setSearchQuery] = useState(""); // State for search input
const [data, setData] = useState([]);
@@ -94,7 +92,8 @@ const ConsolidatedTable = () => {
const fetchData = async () => {
try {
const response = await axios.get(
"http://localhost:8080/api/table/consolidated-table"
"http://localhost:8080/api/table/consolidated-table",
{ withCredentials: true }
);
setData(response.data);
setLoading(false);
@@ -113,8 +112,7 @@ const ConsolidatedTable = () => {
// Extract unique faculty names and filter based on the search query
const filteredTeachers = [...new Set(data.map((row) => row.Name))].filter(
(teacher) =>
teacher.toLowerCase().includes(searchQuery.toLowerCase()) // Filter by search query
(teacher) => teacher.toLowerCase().includes(searchQuery.toLowerCase()) // Filter by search query
);
// Pagination logic applied to filtered teachers
@@ -151,7 +149,8 @@ const ConsolidatedTable = () => {
const facultyId = teacherData[0].facultyId;
try {
const response = await axios.get(
`http://localhost:8080/api/faculty/${facultyId}`
`http://localhost:8080/api/faculty/${facultyId}`,
{ withCredentials: true }
);
const facultyEmail = response.data.email;
const workbook = createExcelBook(teacherData, teacher);
@@ -259,9 +258,7 @@ const ConsolidatedTable = () => {
)
}
>
<h2
style={{ color: "black", margin: 0, fontSize: "1.5rem" }}
>
<h2 style={{ color: "black", margin: 0, fontSize: "1.5rem" }}>
{teacher}'s Table
</h2>
<div>

View File

@@ -19,7 +19,6 @@ function AuthPage() {
toast.error(message);
};
function ToggleSign(event) {
event.preventDefault();
setSignin(!signin);
@@ -58,11 +57,12 @@ function AuthPage() {
}
try {
const response = await axios.post(
`http://localhost:8080/api/${
!signin ? "login" : "register"
}`,
formData
`http://localhost:8080/api/${!signin ? "login" : "register"}`,
formData,
{ withCredentials: true }
);
if (response.status === 200) {
const { user } = response.data;
delete user.password;
const gravatarUrl = `https://www.gravatar.com/avatar/${md5(
@@ -70,8 +70,8 @@ function AuthPage() {
)}?d=identicon`;
user.profilePicture = gravatarUrl;
localStorage.setItem("user", JSON.stringify(user));
window.location.href = "/Welcom";
window.location.href = "/Welcome";
}
} catch (error) {
console.error("Authentication error:", error);
if (
@@ -88,11 +88,9 @@ function AuthPage() {
const handleGoogleLogin = (event) => {
event.preventDefault();
window.location.href =
"http://localhost:8080/auth/google";
window.location.href = "http://localhost:8080/auth/google";
};
return (
<>
<ToastContainer />

View File

@@ -1,9 +1,26 @@
import React from "react";
import { FaUserCircle } from "react-icons/fa";
import { NavLink } from "react-router-dom"; // Import NavLink for navigation
import { NavLink, useNavigate } from "react-router-dom"; // Import NavLink for navigation
import "./Navbar.css"; // Navbar-specific styles
import axios from "axios";
const Navbar = () => {
const navigate = useNavigate();
// Handle logout functionality
const handleLogout = async () => {
try {
// Call the logout API
await axios.get("http://localhost:8080/auth/logout", { withCredentials: true });
// Redirect to the login page after successful logout
navigate("/");
} catch (error) {
console.error("Error during logout:", error);
alert("Failed to log out. Please try again.");
}
};
return (
<header className="navbar">
<div className="navbar-container">
@@ -21,6 +38,11 @@ const Navbar = () => {
Course Consolidated
</NavLink>
</div>
<div>
<button className="logout-button" onClick={handleLogout}>
Logout
</button>
</div>
{/* User icon at the right */}
<NavLink to="/accounts" className="user-icon-link">

View File

@@ -17,7 +17,8 @@ const CourseConsolidated = () => {
const fetchData = async () => {
try {
const response = await axios.get(
"http://localhost:8080/api/table/course-consolidated"
"http://localhost:8080/api/table/course-consolidated",
{ withCredentials: true }
);
setData(response.data);
setLoading(false);

View File

@@ -1,12 +1,36 @@
import React from 'react';
import { Navigate } from 'react-router-dom'; // Use Navigate for redirect
import Cookies from "js-cookie";
import React, { useEffect, useState } from "react";
import { Navigate } from "react-router-dom";
import axios from "axios";
const PrivateRoute = ({ element: Element, ...rest }) => {
const token = Cookies.get("token");
const [isAuthenticated, setIsAuthenticated] = useState(null); // Track authentication status
// If token exists, render the element. Otherwise, redirect to the login page
return token ? Element : <Navigate to="/" />;
useEffect(() => {
// Call the server to validate the token
const checkAuth = async () => {
try {
const response = await axios.get("http://localhost:8080/api/auth-check", {
withCredentials: true, // Include cookies in the request
});
if (response.status === 200) {
setIsAuthenticated(true); // User is authenticated
}
} catch (error) {
setIsAuthenticated(false); // User is not authenticated
}
};
checkAuth();
}, []);
// If still checking authentication, render nothing or a loading spinner
if (isAuthenticated === null) {
return <div>Loading...</div>;
}
// If authenticated, render the component. Otherwise, redirect to the login page
return isAuthenticated ? Element : <Navigate to="/" />;
};
export default PrivateRoute;

View File

@@ -0,0 +1,37 @@
import { useEffect } from "react";
import axios from "axios";
import Cookies from "js-cookie";
import { useNavigate } from "react-router-dom";
const TokenRefresher = () => {
const navigate = useNavigate();
useEffect(() => {
// Function to refresh the token
const refreshToken = async () => {
try {
const response = await axios.post("http://localhost:8080/api/refresh", {}, {
withCredentials: true, // Make sure cookies are sent
});
} catch (error) {
console.error("Failed to refresh token", error);
// If refreshing the token fails (e.g., due to expiration), log out the user
Cookies.remove("token"); // Optionally, clear any existing cookies
navigate("/"); // Redirect to login page
}
};
// Set the interval to call refresh every 55 minutes (3300000 ms)
const refreshInterval = setInterval(() => {
refreshToken();
}, 3300000);
// Clean up the interval on component unmount
return () => clearInterval(refreshInterval);
}, [navigate]); // Empty dependency array to run once when component mounts
return null; // This component doesn't render anything
};
export default TokenRefresher;

View File

@@ -12,6 +12,7 @@
"bcryptjs": "^2.4.3",
"body-parser": "^1.20.2",
"connect-mongo": "^5.1.0",
"cookie-parser": "^1.4.7",
"cors": "^2.8.5",
"crypto": "^1.0.1",
"csv-writer": "^1.6.0",
@@ -436,6 +437,28 @@
"node": ">= 0.6"
}
},
"node_modules/cookie-parser": {
"version": "1.4.7",
"resolved": "https://registry.npmjs.org/cookie-parser/-/cookie-parser-1.4.7.tgz",
"integrity": "sha512-nGUvgXnotP3BsjiLX2ypbQnWoGUPIIfHQNZkkC668ntrzGWEZVW70HDEB1qnNGMicPje6EttlIgzo51YSwNQGw==",
"license": "MIT",
"dependencies": {
"cookie": "0.7.2",
"cookie-signature": "1.0.6"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/cookie-parser/node_modules/cookie": {
"version": "0.7.2",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
"integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
"license": "MIT",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/cookie-signature": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",

View File

@@ -21,6 +21,7 @@
"bcryptjs": "^2.4.3",
"body-parser": "^1.20.2",
"connect-mongo": "^5.1.0",
"cookie-parser": "^1.4.7",
"cors": "^2.8.5",
"crypto": "^1.0.1",
"csv-writer": "^1.6.0",

View File

@@ -7,6 +7,7 @@ const bodyParser = require("body-parser");
const path = require("path");
const bcrypt = require("bcryptjs");
const jwt = require("jsonwebtoken");
const cookieparser = require("cookie-parser");
require("dotenv").config();
// Import Routes
@@ -34,6 +35,7 @@ const PORT = 8080;
// Middleware
app.use(cors({ origin: "http://localhost:3000", credentials: true }));
app.use(cookieparser());
app.use(express.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(
@@ -73,7 +75,7 @@ app.get(
(req, res) => {
const token = jwt.sign({ userId: req.user._id }, process.env.JWT_SECRET, { expiresIn: "1h" });
// Set token as a cookie or send it in the response
res.cookie("token", token, { httpOnly: false, secure: false });
res.cookie("token", token, { httpOnly: true, secure: false, maxAge: 3600000 });
res.redirect("http://localhost:3000/Welcome"); // Redirect to a frontend route after successful login
}
);
@@ -101,16 +103,16 @@ app.post("/api/register", async (req, res) => {
await user.save();
}
req.login(user, (err) => {
if (err) {
console.error("Error logging in user after registration:", err);
return res.status(500).send("Internal server error");
}
// Generate a JWT token using the user's ID
const token = jwt.sign({ userId: user._id }, process.env.JWT_SECRET, { expiresIn: "1h" });
// Set the token as a cookie
res.cookie("token", token, { httpOnly: true, secure: false, maxAge: 3600000 }); // 1 hour expiry
return res.status(200).json({
message: "Registered and logged in successfully",
user,
});
});
} catch (error) {
console.error("Error registering user:", error);
res.status(400).send("Registration failed");
@@ -129,27 +131,83 @@ app.post("/api/login", (req, res, next) => {
if (err) {
return res.status(500).json({ message: "Internal server error" });
}
// Generate a JWT token using the user's ID
const token = jwt.sign({ userId: user._id }, process.env.JWT_SECRET, { expiresIn: "1h" });
// Set the token as a cookie
res.cookie("token", token, { httpOnly: true, secure: false, maxAge: 3600000 }); // 1 hour expiry
return res.status(200).json({ message: "Login successful", user });
});
})(req, res, next);
});
app.get("/auth/logout", function (req, res) {
req.logout((err) => {
try {
// Clear the token cookie
res.clearCookie("token", {
httpOnly: true, // Ensure it matches the cookie options you set earlier
secure: false, // Match the "secure" option from cookie settings
sameSite: "lax", // Ensure this matches the original cookie configuration
});
// Destroy the session if used (optional, if sessions are implemented)
if (req.session) {
req.session.destroy((err) => {
if (err) {
console.log(err);
console.error("Error destroying session:", err);
return res.status(500).json({ message: "Error logging out" });
}
req.session.destroy(function (err) {
if (err) {
console.log(err);
return res.status(500).json({ message: "Error destroying session" });
res.status(200).json({ message: "Logout successful, session destroyed" });
});
} else {
// If no session, simply respond with success
res.status(200).json({ message: "Logout successful, cookie cleared" });
}
} catch (err) {
console.error("Error logging out:", err);
res.status(500).json({ message: "Error logging out" });
}
res.json({ message: "Logout successful" });
});
// Refresh Token Endpoint
app.post("/api/refresh", (req, res) => {
const refreshToken = req.cookies.token;
console.log(refreshToken);
if (!refreshToken) {
return res.status(401).json({ message: "No refresh token, authorization denied" });
}
try {
const decoded = jwt.verify(refreshToken, process.env.JWT_SECRET);
const newToken = jwt.sign({ userId: decoded.userId }, process.env.JWT_SECRET, { expiresIn: "1h" });
return res
.cookie("token", newToken, { httpOnly: true, maxAge: 3600000 }) // Set new access token
.status(200)
.json({ message: "Token refreshed" });
} catch (err) {
console.error("Error refreshing token:", err);
res.status(401).json({ message: "Invalid or expired refresh token" });
}
});
app.get("/api/auth-check", (req, res) => {
const token = req.cookies.token; // Retrieve the httpOnly cookie
if (!token) {
return res.status(401).json({ message: "Unauthorized" });
}
try {
jwt.verify(token, process.env.JWT_SECRET); // Verify the token
res.status(200).json({ authenticated: true }); // Valid token
} catch (err) {
res.status(401).json({ message: "Unauthorized" }); // Invalid token
}
});
// User Profile Route
app.get("/api/user/profile", async (req, res) => {
try {