authentications

package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.7.7",
+    "jwt-decode": "^4.0.0",
     "quill": "^2.0.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/App.js

@@ -1,25 +1,31 @@
-import logo from './logo.svg';
 import './App.css';
 import "react-quill/dist/quill.snow.css";
+import Login from "./components/login";
+import Dashboard from "./components/dashboard";
+import ResumeDetails from "./components/ResumeDetails";
+import SignUp from "./components/SignUp";
+import ProtectedRoute from "./components/ProtectedRoute";
+import Profile from "./components/Profile";
+import Header from './components/Header';
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import { UserProvider } from './components/UserContext';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <UserProvider>
+    <Router>
+      <div className='App'>
+        <Header/>
+        <Routes>
+        <Route path="/" element={<Login />} />
+            <Route path="/signup" element={<SignUp />} />
+            <Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
+            <Route path="/resumes/:id" element={<ResumeDetails />} />
+            <Route path="/profile" element={<ProtectedRoute><Profile /></ProtectedRoute>} />
+        </Routes>
+      </div>
+    </Router>
+    </UserProvider>
   );
 }
 

src/components/Header.js

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from "react";
+import { BrowserRouter as Router, useNavigate, Link } from "react-router-dom";
+import axiosInstance from "../api/axios"
+import { useUser } from "./UserContext";
+export const Header = () => {
+    const navigate = useNavigate();
+    const [isLoggedIn, setIsLoggedIn] = useState(false);
+    const { setUser } = useUser();
+
+    const checkLoginStatus = () => {
+        const token = localStorage.getItem("access_token");
+        setIsLoggedIn(!!token);
+    };
+
+    useEffect(() => {
+
+        checkLoginStatus();
+
+        const handleStorageChange = () => {
+            checkLoginStatus();
+        };
+
+        window.addEventListener("storage", handleStorageChange);
+        return () => window.removeEventListener("storage", handleStorageChange);
+    }, [checkLoginStatus,isLoggedIn]);
+
+    const handleLogout = async () => {
+        const refreshToken = localStorage.getItem("refresh_token");
+        try {
+            if (refreshToken) {
+                await axiosInstance.post("logout/", { refresh: refreshToken });
+            }
+        } catch (error) {
+            console.error("Error during logout:", error);
+        }
+
+        localStorage.removeItem("access_token");
+        localStorage.removeItem("refresh_token");
+        setIsLoggedIn(false);
+        setUser(null);
+        navigate("/");
+    };
+
+    return (
+        <div className="header">
+            <h1>Resume Builder</h1>
+            {isLoggedIn && (
+                <div className="header-actions">
+                    <Link to="/profile" className="profile-link">
+                        Profile
+                    </Link>
+                    <Link to="/dashboard" className="profile-link">
+                        Dashboard
+                    </Link>
+                    <button
+                        className="logout-button"
+                        onClick={handleLogout}
+                    >
+                        Logout
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+};
+export default Header;

src/components/ProtectedRoute.js

@@ -1,10 +1,21 @@
 import React from "react";
 import { Navigate } from "react-router-dom";
 
+import {jwtDecode} from "jwt-decode";
+
+const isTokenValid = (token) => {
+    try {
+        const decoded = jwtDecode(token);
+        return decoded.exp > Date.now() / 1000;
+    } catch (e) {
+        return false;
+    }
+};
+
 const ProtectedRoute = ({ children }) => {
     const token = localStorage.getItem("access_token");
 
-    if (!token) {
+    if (!token || !isTokenValid(token)) {
         return <Navigate to="/" replace />;
     }
 

src/components/UserContext.js

@@ -0,0 +1,15 @@
+import React, { createContext, useState, useContext } from 'react';
+
+const UserContext = createContext(null);
+
+export const UserProvider = ({ children }) => {
+  const [user, setUser] = useState(null);
+
+  return (
+    <UserContext.Provider value={{ user, setUser }}>
+      {children}
+    </UserContext.Provider>
+  );
+};
+
+export const useUser = () => useContext(UserContext);

src/index.css

@@ -59,7 +59,7 @@ label {
   background: #fff;
   border-radius: 8px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  margin-top:10%;
+  margin-top:5%;
 }
 
 .dashboard-title {
@@ -186,4 +186,10 @@ label {
 .p-flex{
   display: flex;
   justify-content: center;
+}
+
+a{
+  color: #7f4a88;
+  text-decoration: none;
+  margin:0 10px;
 }

src/index.js

@@ -1,74 +1,12 @@
-import React, { useEffect, useState } from "react";
-import ReactDOM from "react-dom";
-import { BrowserRouter as Router, useNavigate, Link } from "react-router-dom";
-import "./index.css";
-import AppRoutes from "./routes";
-import axiosInstance from "./api/axios";
-
-const Header = () => {
-    const navigate = useNavigate();
-    const [isLoggedIn, setIsLoggedIn] = useState(false);
-
-    useEffect(() => {
-        const checkLoginStatus = () => {
-            const token = localStorage.getItem("access_token");
-            setIsLoggedIn(!!token);
-        };
-
-        checkLoginStatus();
-
-        // Optional: Add an event listener to detect token changes in localStorage
-        const handleStorageChange = () => {
-            checkLoginStatus();
-        };
-
-        window.addEventListener("storage", handleStorageChange);
-        return () => window.removeEventListener("storage", handleStorageChange);
-    }, []);
-
-    const handleLogout = async () => {
-        const refreshToken = localStorage.getItem("refresh_token");
-        try {
-            if (refreshToken) {
-                await axiosInstance.post("logout/", { refresh: refreshToken });
-            }
-        } catch (error) {
-            console.error("Error during logout:", error);
-        }
-
-        // Clear tokens and update state
-        localStorage.removeItem("access_token");
-        localStorage.removeItem("refresh_token");
-        setIsLoggedIn(false);
-        navigate("/");
-    };
-
-    return (
-        <div className="header">
-            <h1>Resume Builder</h1>
-            {isLoggedIn && (
-                <div className="header-actions">
-                    <Link to="/profile" className="profile-link">
-                        Profile
-                    </Link>
-                    <button
-                        className="logout-button"
-                        onClick={handleLogout}
-                    >
-                        Logout
-                    </button>
-                </div>
-            )}
-        </div>
-    );
-};
-
-
-const App = () => (
-    <Router>
-        <Header />
-        <AppRoutes />
-    </Router>
-);
-
-ReactDOM.render(<App />, document.getElementById("root"));
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);