- {!isLoginPageOrSignUpPage &&
}
-
+
+
+
+ } />
+ } />
+
+
+ );
+};
+
+const AuthenticatedComponents = () => {
+ return (
+
+
+
-
+
} />
}>
diff --git a/frontend/src/PrivateRoute.jsx b/frontend/src/PrivateRoute.jsx
index defeaea..b9784f6 100644
--- a/frontend/src/PrivateRoute.jsx
+++ b/frontend/src/PrivateRoute.jsx
@@ -1,11 +1,9 @@
-import React from "react";
import { Navigate, Outlet } from "react-router-dom";
-import { useAuth } from "./hooks/authentication/IsAuthenticated";
+import { useAuth } from "src/hooks/AuthHooks";
const PrivateRoute = () => {
- const { isAuthenticated, setIsAuthenticated } = useAuth();
- const auth = isAuthenticated;
- return auth ? : ;
+ const { isAuthenticated } = useAuth();
+ return isAuthenticated ? : ;
};
-export default PrivateRoute;
\ No newline at end of file
+export default PrivateRoute;
diff --git a/frontend/src/api/AuthenticationApi.jsx b/frontend/src/api/AuthenticationApi.jsx
index 1913922..7f88744 100644
--- a/frontend/src/api/AuthenticationApi.jsx
+++ b/frontend/src/api/AuthenticationApi.jsx
@@ -7,6 +7,7 @@ const apiUserLogin = (data) => {
.post("token/obtain/", data)
.then((response) => {
console.log(response.statusText);
+
return response;
})
.catch((error) => {
diff --git a/frontend/src/api/AxiosConfig.jsx b/frontend/src/api/AxiosConfig.jsx
index 336d18d..7b701bd 100644
--- a/frontend/src/api/AxiosConfig.jsx
+++ b/frontend/src/api/AxiosConfig.jsx
@@ -1,4 +1,5 @@
import axios from "axios";
+import { redirect } from "react-router-dom";
const axiosInstance = axios.create({
baseURL: "http://127.0.0.1:8000/api/",
@@ -18,24 +19,24 @@ axiosInstance.interceptors.response.use(
const refresh_token = localStorage.getItem("refresh_token");
// Check if the error is due to 401 and a refresh token is available
- if (
- error.response.status === 401 &&
- error.response.statusText === "Unauthorized" &&
- refresh_token !== "undefined"
- ) {
- return axiosInstance
- .post("/token/refresh/", { refresh: refresh_token })
- .then((response) => {
- localStorage.setItem("access_token", response.data.access);
+ if (error.response && error.response.status === 401) {
+ if (refresh_token) {
+ return axiosInstance
+ .post("/token/refresh/", { refresh: refresh_token })
+ .then((response) => {
+ localStorage.setItem("access_token", response.data.access);
- axiosInstance.defaults.headers["Authorization"] = "Bearer " + response.data.access;
- originalRequest.headers["Authorization"] = "Bearer " + response.data.access;
+ axiosInstance.defaults.headers["Authorization"] = "Bearer " + response.data.access;
+ originalRequest.headers["Authorization"] = "Bearer " + response.data.access;
- return axiosInstance(originalRequest);
- })
- .catch((err) => {
- console.log("Interceptors error: ", err);
- });
+ return axiosInstance(originalRequest);
+ })
+ .catch((err) => {
+ console.log("Interceptors error: ", err);
+ });
+ } else {
+ redirect("/login");
+ }
}
return Promise.reject(error);
}
diff --git a/frontend/src/contexts/AuthContextProvider.jsx b/frontend/src/contexts/AuthContextProvider.jsx
new file mode 100644
index 0000000..fea0243
--- /dev/null
+++ b/frontend/src/contexts/AuthContextProvider.jsx
@@ -0,0 +1,29 @@
+import { useEffect } from "react";
+import PropTypes from "prop-types";
+import { createContext, useState } from "react";
+
+const AuthContext = createContext();
+
+export const AuthProvider = ({ children }) => {
+ const [isAuthenticated, setIsAuthenticated] = useState(false);
+
+ useEffect(() => {
+ const accessToken = localStorage.getItem("access_token");
+ if (accessToken) {
+ setIsAuthenticated(true);
+ }
+ }, []);
+
+ const contextValue = {
+ isAuthenticated,
+ setIsAuthenticated,
+ };
+
+ return {children};
+};
+
+AuthProvider.propTypes = {
+ children: PropTypes.node.isRequired,
+};
+
+export default AuthContext;
diff --git a/frontend/src/hooks/AuthHooks.jsx b/frontend/src/hooks/AuthHooks.jsx
new file mode 100644
index 0000000..27d3afb
--- /dev/null
+++ b/frontend/src/hooks/AuthHooks.jsx
@@ -0,0 +1,36 @@
+import { useContext } from "react";
+import AuthContext from "src/contexts/AuthContextProvider";
+
+/**
+ * useAuth - Custom React Hook for Accessing Authentication Context
+ *
+ * @returns {Object} An object containing:
+ * - {boolean} isAuthenticated: A boolean indicating whether the user is authenticated.
+ * - {function} setIsAuthenticated: A function to set the authentication status manually.
+ *
+ * @throws {Error} If used outside the context of an AuthProvider.
+ *
+ * @example
+ * // Import the hook
+ * import useAuth from './AuthHooks';
+ *
+ * // Inside a functional component
+ * const { isAuthenticated, setIsAuthenticated } = useAuth();
+ *
+ * // Check authentication status
+ * if (isAuthenticated) {
+ * // User is authenticated
+ * } else {
+ * // User is not authenticated
+ * }
+ *
+ * // Manually set authentication status
+ * setIsAuthenticated(true);
+ */
+export const useAuth = () => {
+ const context = useContext(AuthContext);
+ if (!context) {
+ throw new Error("useAuth must be used within an AuthProvider");
+ }
+ return context;
+};
diff --git a/frontend/src/hooks/authentication/IsAuthenticated.jsx b/frontend/src/hooks/authentication/IsAuthenticated.jsx
deleted file mode 100644
index 8874645..0000000
--- a/frontend/src/hooks/authentication/IsAuthenticated.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, { createContext, useContext, useState, useEffect } from "react";
-
-const AuthContext = createContext();
-
-export const AuthProvider = ({ children }) => {
- const [isAuthenticated, setIsAuthenticated] = useState(() => {
- const access_token = localStorage.getItem("access_token");
- return !!access_token;
- });
-
- useEffect(() => {
- const handleTokenChange = () => {
- const newAccessToken = localStorage.getItem("access_token");
- setIsAuthenticated(!!newAccessToken);
- };
-
- handleTokenChange();
-
- window.addEventListener("storage", handleTokenChange);
-
- return () => {
- window.removeEventListener("storage", handleTokenChange);
- };
- }, []);
-
- return (
-
- {children}
-
- );
-};
-
-export const useAuth = () => {
- const context = useContext(AuthContext);
- if (!context) {
- throw new Error("useAuth must be used within an AuthProvider");
- }
- return context;
-};
\ No newline at end of file
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 38cca17..8ca8296 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -3,7 +3,7 @@ import ReactDOM from "react-dom/client";
import App from "./App";
import { GoogleOAuthProvider } from "@react-oauth/google";
import { BrowserRouter } from "react-router-dom";
-import { AuthProvider } from "./hooks/authentication/IsAuthenticated";
+import { AuthProvider } from "./contexts/AuthContextProvider";
const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID;
@@ -12,7 +12,7 @@ ReactDOM.createRoot(document.getElementById("root")).render(
-
+