Index: backend/auth_form/views.py =================================================================== --- backend/auth_form/views.py (revision 72c0de38a0f2ae0b068ca419e39bb96ec29b8cc6) +++ backend/auth_form/views.py (revision cfab86d38f4a56cf7e735680cb32e32fa8cab17c) @@ -5,5 +5,5 @@ from rest_framework.views import APIView from rest_framework.response import Response -from rest_framework.permissions import IsAuthenticated +from rest_framework.permissions import IsAuthenticated, AllowAny from rest_framework.decorators import api_view, permission_classes from rest_framework_simplejwt.tokens import RefreshToken @@ -53,5 +53,5 @@ class LogoutView(APIView): - permission_classes = (IsAuthenticated,) + permission_classes = (AllowAny,) def post(self, request): Index: backend/backend/settings.py =================================================================== --- backend/backend/settings.py (revision 72c0de38a0f2ae0b068ca419e39bb96ec29b8cc6) +++ backend/backend/settings.py (revision cfab86d38f4a56cf7e735680cb32e32fa8cab17c) @@ -56,6 +56,6 @@ SIMPLE_JWT = { - 'ACCESS_TOKEN_LIFETIME': timedelta(minutes=30), - 'REFRESH_TOKEN_LIFETIME': timedelta(days=30), + 'ACCESS_TOKEN_LIFETIME': timedelta(minutes=60), + 'REFRESH_TOKEN_LIFETIME': timedelta(days=7), 'ROTATE_REFRESH_TOKENS': True, 'BLACKLIST_AFTER_ROTATION': True, Index: frontend/src/App.tsx =================================================================== --- frontend/src/App.tsx (revision 72c0de38a0f2ae0b068ca419e39bb96ec29b8cc6) +++ frontend/src/App.tsx (revision cfab86d38f4a56cf7e735680cb32e32fa8cab17c) @@ -6,5 +6,4 @@ import PrivateRoute from "./components/PrivateRoute"; import CourseCatalog from "./components/SubjectCatalog/SubjectCatalog"; -import useAxiosAuth from "./hooks/useAxiosAuth"; import "./index.css"; import Account from "./pages/Account"; @@ -16,4 +15,5 @@ import SubjectPreferences from "./pages/SubjectPreferences"; import SubjectView from "./pages/SubjectView"; +import { AuthProvider } from "./context/AuthProvider"; const Layout = () => ( @@ -85,6 +85,9 @@ function App() { - useAxiosAuth(); - return ; + return ( + + {" "} + + ); } Index: frontend/src/components/StudentForm/StudentForm.tsx =================================================================== --- frontend/src/components/StudentForm/StudentForm.tsx (revision 72c0de38a0f2ae0b068ca419e39bb96ec29b8cc6) +++ frontend/src/components/StudentForm/StudentForm.tsx (revision cfab86d38f4a56cf7e735680cb32e32fa8cab17c) @@ -10,5 +10,4 @@ import { useSubjects } from "../../context/SubjectsContext"; import { useAuth } from "../../hooks/useAuth"; -import useAxiosAuth from "../../hooks/useAxiosAuth"; import { StudentData, StudyTrack, Subject } from "../types"; import FieldButton from "./FieldButton"; @@ -21,4 +20,5 @@ validateForm, } from "./utils"; +import axiosInstance from "../../api/axiosInstance"; interface StudentFormProps { @@ -35,5 +35,4 @@ const StudentForm = ({ formData, isLoading }: StudentFormProps) => { - const axiosAuth = useAxiosAuth(); const [hasSubmitted, setHasSubmitted] = useState(false); const [validationErrors, setValidationErrors] = useState<{ @@ -272,5 +271,5 @@ // For updating existing form data use PATCH instead of PUT for partial updates const method = formData?.has_filled_form ? "PATCH" : "POST"; - const response = await axiosAuth({ + const response = await axiosInstance({ url: "/auth/form/", method, Index: frontend/src/context/AuthContext.tsx =================================================================== --- frontend/src/context/AuthContext.tsx (revision 72c0de38a0f2ae0b068ca419e39bb96ec29b8cc6) +++ frontend/src/context/AuthContext.tsx (revision cfab86d38f4a56cf7e735680cb32e32fa8cab17c) @@ -8,5 +8,4 @@ export interface AuthContextType { accessToken: string | null; - refreshToken: string | null; formData: StudentData | null; setFormData: (data: StudentData | null) => void; @@ -15,5 +14,4 @@ logout: () => void; isAuthenticated: boolean; - refreshAccessToken: () => Promise; loading: boolean; } Index: frontend/src/context/AuthProvider.tsx =================================================================== --- frontend/src/context/AuthProvider.tsx (revision 72c0de38a0f2ae0b068ca419e39bb96ec29b8cc6) +++ frontend/src/context/AuthProvider.tsx (revision cfab86d38f4a56cf7e735680cb32e32fa8cab17c) @@ -6,5 +6,4 @@ useCallback, } from "react"; -import AuthContext, { AuthContextType } from "./AuthContext"; import axiosInstance from "../api/axiosInstance"; import { jwtDecode } from "jwt-decode"; @@ -12,4 +11,5 @@ import { StudentData } from "../components/types"; import { User } from "../context/AuthContext"; +import AuthContext, { AuthContextType } from "../context/AuthContext"; interface DecodedToken { @@ -21,145 +21,118 @@ } +let isRefreshing = false; +let failedQueue: Array<{ + resolve: (value: any) => void; + reject: (reason?: any) => void; +}> = []; + +const processQueue = (error: any, token: string | null = null) => { + failedQueue.forEach((prom) => { + if (error) { + prom.reject(error); + } else { + prom.resolve(token); + } + }); + failedQueue = []; +}; + export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children, }) => { const [user, setUser] = useState(null); - const [accessToken, setAccessToken] = useState( - localStorage.getItem("access") - ); - const [refreshToken, setRefreshToken] = useState( - localStorage.getItem("refresh") - ); + const [accessToken, setAccessToken] = useState(null); + const [refreshToken, setRefreshToken] = useState(null); const [formData, setFormData] = useState(null); const [loading, setLoading] = useState(true); const proactiveRefreshTimeoutId = useRef(null); - // We cannot use the useAxiosAuth hook here due to the circular dependency. - const axiosAuth = axiosInstance; - - const fetchUser = useCallback( - async (token: string) => { - try { - const response = await axiosAuth.get("/auth/user/", { - headers: { - Authorization: `Bearer ${token}`, - }, - }); - setUser(response.data); - } catch (error) { - // If this fails, the token is likely invalid or expired, so log out. - console.error("Could not fetch user data on load", error); - logout(); - } - }, - [axiosAuth] - ); - - // Memoize the refresh function to stabilize dependencies in useEffect - const refreshAccessToken = useCallback(async (): Promise => { - const currentRefreshToken = localStorage.getItem("refresh"); - if (!currentRefreshToken) { - logout(); - return null; - } - try { - const response = await axiosInstance.post<{ - access: string; - refresh?: string; - }>("/auth/refresh/", { refresh: currentRefreshToken }); - const newAccessToken = response.data.access; - localStorage.setItem("access", newAccessToken); - setAccessToken(newAccessToken); - - if (response.data.refresh) { - localStorage.setItem("refresh", response.data.refresh); - setRefreshToken(response.data.refresh); - } - scheduleProactiveRefresh(newAccessToken); - return newAccessToken; - } catch (error) { - console.error("Error refreshing access token:", error); - logout(); - toast.error("Твојата сесија е истечена. Те молам најави се повторно."); - return null; - } - }, []); - - const logout = async () => { - const refreshToken = localStorage.getItem("refresh"); - - if (refreshToken) { - try { - const response = await fetch("http://localhost:8000/auth/logout/", { - method: "POST", - headers: { - "Content-Type": "application/json", - Authorization: `Bearer ${localStorage.getItem("access")}`, - }, - body: JSON.stringify({ - refresh: refreshToken, - }), - }); - - if (response.ok) { - console.log("Successfully logged out on the server."); - } else { - console.error( - "Server logout failed:", - response.status, - response.statusText - ); - } - } catch (error) { - console.error("An error occurred during logout:", error); - } - } - + + const logout = useCallback(() => { if (proactiveRefreshTimeoutId.current) { clearTimeout(proactiveRefreshTimeoutId.current); } + const currentRefreshToken = localStorage.getItem("refresh"); + if (currentRefreshToken) { + axiosInstance + .post("/auth/logout/", { refresh: currentRefreshToken }) + .catch((err) => + console.error( + "Server logout failed, proceeding with client-side cleanup", + err + ) + ); + } + localStorage.removeItem("access"); localStorage.removeItem("refresh"); - setAccessToken(null); setRefreshToken(null); setFormData(null); setUser(null); - }; - - const scheduleProactiveRefresh = (token: string) => { - if (proactiveRefreshTimeoutId.current) { - clearTimeout(proactiveRefreshTimeoutId.current); - } - - try { - const decodedToken = jwtDecode(token); - const expirationTime = decodedToken.exp * 1000; - const currentTime = Date.now(); - - // Refresh X milliseconds before the token expires - const refreshOffset = 30 * 1000; - - let timeoutDuration = expirationTime - currentTime - refreshOffset; - - if (timeoutDuration < 0) { - // If the token is already about to expire, refresh immediately - timeoutDuration = 1000; - } - - proactiveRefreshTimeoutId.current = setTimeout(() => { - refreshAccessToken(); - }, timeoutDuration); - } catch (error) { - console.error("Failed to decode token for proactive refresh:", error); - } - }; + }, []); + + const scheduleProactiveRefresh = useCallback( + (token: string) => { + if (proactiveRefreshTimeoutId.current) { + clearTimeout(proactiveRefreshTimeoutId.current); + } + + try { + const decodedToken = jwtDecode(token); + const expirationTime = decodedToken.exp * 1000; + const currentTime = Date.now(); + const refreshOffset = 15 * 1000; + const timeoutDuration = expirationTime - currentTime - refreshOffset; + + if (timeoutDuration > 0) { + proactiveRefreshTimeoutId.current = window.setTimeout(async () => { + if (isRefreshing) { + console.log( + "Proactive refresh aborted, another refresh is in progress." + ); + return; + } + + const currentRefreshToken = localStorage.getItem("refresh"); + if (currentRefreshToken) { + isRefreshing = true; + try { + const res = await axiosInstance.post<{ + access: string; + refresh?: string; + }>("/auth/refresh/", { + refresh: currentRefreshToken, + }); + localStorage.setItem("access", res.data.access); + setAccessToken(res.data.access); + if (res.data.refresh) { + localStorage.setItem("refresh", res.data.refresh); + setRefreshToken(res.data.refresh); + } + scheduleProactiveRefresh(res.data.access); + } catch (err) { + console.error("Proactive refresh failed", err); + logout(); + } finally { + isRefreshing = false; + } + } + }, timeoutDuration); + } + } catch (error) { + console.error("Failed to decode token for proactive refresh:", error); + } + }, + [logout] + ); useEffect(() => { - const requestIntercept = axiosAuth.interceptors.request.use( + const requestIntercept = axiosInstance.interceptors.request.use( (config) => { - if (!config.headers["Authorization"]) { - config.headers["Authorization"] = `Bearer ${accessToken}`; + const token = localStorage.getItem("access"); + if (token && !config.headers["Authorization"]) { + config.headers["Authorization"] = `Bearer ${token}`; } return config; @@ -168,14 +141,56 @@ ); - const responseIntercept = axiosAuth.interceptors.response.use( + const responseIntercept = axiosInstance.interceptors.response.use( (response) => response, async (error) => { - const prevRequest = error?.config; - if (error?.response?.status === 401 && !prevRequest?.sent) { - prevRequest.sent = true; - const newAccessToken = await refreshAccessToken(); - if (newAccessToken) { - prevRequest.headers["Authorization"] = `Bearer ${newAccessToken}`; - return axiosAuth(prevRequest); + const originalRequest = error.config; + if (error.response?.status === 401 && !originalRequest._retry) { + originalRequest._retry = true; + + if (isRefreshing) { + return new Promise((resolve, reject) => { + failedQueue.push({ resolve, reject }); + }).then((token) => { + originalRequest.headers["Authorization"] = "Bearer " + token; + return axiosInstance(originalRequest); + }); + } + + isRefreshing = true; + + const currentRefreshToken = localStorage.getItem("refresh"); + if (!currentRefreshToken) { + isRefreshing = false; + logout(); + return Promise.reject(error); + } + + try { + const response = await axiosInstance.post<{ + access: string; + refresh?: string; + }>("/auth/refresh/", { + refresh: currentRefreshToken, + }); + const newAccessToken = response.data.access; + localStorage.setItem("access", newAccessToken); + setAccessToken(newAccessToken); + if (response.data.refresh) { + localStorage.setItem("refresh", response.data.refresh); + setRefreshToken(response.data.refresh); + } + scheduleProactiveRefresh(newAccessToken); + originalRequest.headers[ + "Authorization" + ] = `Bearer ${newAccessToken}`; + processQueue(null, newAccessToken); + return axiosInstance(originalRequest); + } catch (refreshError) { + processQueue(refreshError, null); + logout(); + toast.error("Your session has expired. Please log in again."); + return Promise.reject(refreshError); + } finally { + isRefreshing = false; } } @@ -185,47 +200,46 @@ return () => { - axiosAuth.interceptors.request.eject(requestIntercept); - axiosAuth.interceptors.response.eject(responseIntercept); + axiosInstance.interceptors.request.eject(requestIntercept); + axiosInstance.interceptors.response.eject(responseIntercept); }; - }, [accessToken, refreshAccessToken, axiosAuth]); - - const fetchFormData = useCallback( - async (tokenOverride?: string | null) => { - // Determine which token to use: the override from login, or the one from state (for refresh) - const tokenToUse = tokenOverride || accessToken; - - if (!tokenToUse) { - console.log("Fetch aborted, no token available."); - return; - } - - try { - const response = await axiosAuth.get("/auth/form/", { - headers: { - Authorization: `Bearer ${tokenToUse}`, - }, - }); - setFormData(response.data); - } catch (error) { - console.error("Could not fetch user form data", error); - toast.error("Не може да се вчитаат податоците."); - } + }, [logout, scheduleProactiveRefresh]); + + const fetchUser = useCallback(async (token: string) => { + try { + const response = await axiosInstance.get("/auth/user/", { + headers: { Authorization: `Bearer ${token}` }, + }); + setUser(response.data); + } catch (error) { + console.error("Could not fetch user data on load", error); + } + }, []); + + const fetchFormData = useCallback(async (token: string) => { + try { + const response = await axiosInstance.get("/auth/form/", { + headers: { Authorization: `Bearer ${token}` }, + }); + setFormData(response.data); + } catch (error) { + console.error("Could not fetch user form data", error); + if ((error as any).response?.status !== 401) { + toast.error("Could not load form data."); + } + } + }, []); + + const login = useCallback( + async (newAccessToken: string, newRefreshToken: string, userData: User) => { + localStorage.setItem("access", newAccessToken); + localStorage.setItem("refresh", newRefreshToken); + setAccessToken(newAccessToken); + setRefreshToken(newRefreshToken); + setUser(userData); + scheduleProactiveRefresh(newAccessToken); + await fetchFormData(newAccessToken); }, - [axiosAuth, accessToken] + [fetchFormData, scheduleProactiveRefresh] ); - - const login = async ( - newAccessToken: string, - newRefreshToken: string, - userData: User - ) => { - localStorage.setItem("access", newAccessToken); - localStorage.setItem("refresh", newRefreshToken); - setUser(userData); - setAccessToken(newAccessToken); - setRefreshToken(newRefreshToken); - scheduleProactiveRefresh(newAccessToken); - await fetchFormData(newAccessToken); - }; useEffect(() => { @@ -233,37 +247,29 @@ const token = localStorage.getItem("access"); if (token) { + setAccessToken(token); + setRefreshToken(localStorage.getItem("refresh")); scheduleProactiveRefresh(token); - // Fetch user data and form data in parallel for speed await Promise.all([fetchUser(token), fetchFormData(token)]); } setLoading(false); }; - initializeAuth(); - }, [fetchUser, fetchFormData]); - - useEffect(() => { - return () => { - if (proactiveRefreshTimeoutId.current) { - clearTimeout(proactiveRefreshTimeoutId.current); - } - }; - }, []); + }, [fetchUser, fetchFormData, scheduleProactiveRefresh]); const contextValue: AuthContextType = { + user, accessToken, - refreshToken, formData, setFormData, - user, login, logout, - isAuthenticated: !!accessToken, - refreshAccessToken, + isAuthenticated: !!accessToken && !loading, loading, }; return ( - {children} + + {!loading && children} + ); }; Index: frontend/src/context/PreferencesContext.tsx =================================================================== --- frontend/src/context/PreferencesContext.tsx (revision 72c0de38a0f2ae0b068ca419e39bb96ec29b8cc6) +++ frontend/src/context/PreferencesContext.tsx (revision cfab86d38f4a56cf7e735680cb32e32fa8cab17c) @@ -9,5 +9,5 @@ import { toast } from "react-toastify"; import { useAuth } from "../hooks/useAuth"; -import useAxiosAuth from "../hooks/useAxiosAuth"; +import axiosInstance from "../api/axiosInstance"; interface PreferencesContextType { favoriteIds: Set; @@ -26,5 +26,4 @@ export const PreferencesProvider = ({ children }: { children: ReactNode }) => { const { accessToken } = useAuth(); - const axiosAuth = useAxiosAuth(); const [isLoading, setIsLoading] = useState(true); const [favoriteIds, setFavoriteIds] = useState>(new Set()); @@ -35,5 +34,5 @@ if (accessToken) { setIsLoading(true); - axiosAuth + axiosInstance .get<{ favorite_ids: number[]; @@ -55,5 +54,5 @@ setIsLoading(false); } - }, [accessToken, axiosAuth]); + }, [accessToken]); const toggleFavorite = useCallback( @@ -72,5 +71,5 @@ try { - await axiosAuth.post("/student/toggle-subject-pref/", { + await axiosInstance.post("/student/toggle-subject-pref/", { subject_id: subjectId, action_type: "favorite", @@ -82,5 +81,5 @@ } }, - [axiosAuth, favoriteIds] + [favoriteIds] ); @@ -105,10 +104,10 @@ try { - await axiosAuth.post("/student/toggle-subject-pref/", { + await axiosInstance.post("/student/toggle-subject-pref/", { subject_id: subjectId, action_type: "liked", }); if (wasDisliked) { - await axiosAuth.post("/student/toggle-subject-pref/", { + await axiosInstance.post("/student/toggle-subject-pref/", { subject_id: subjectId, action_type: "disliked", @@ -121,5 +120,5 @@ } }, - [axiosAuth, likedIds] + [likedIds] ); @@ -144,10 +143,10 @@ try { - await axiosAuth.post("/student/toggle-subject-pref/", { + await axiosInstance.post("/student/toggle-subject-pref/", { subject_id: subjectId, action_type: "disliked", }); if (wasLiked) { - await axiosAuth.post("/student/toggle-subject-pref/", { + await axiosInstance.post("/student/toggle-subject-pref/", { subject_id: subjectId, action_type: "liked", @@ -160,5 +159,5 @@ } }, - [axiosAuth, likedIds] + [likedIds] ); Index: ontend/src/hooks/useAxiosAuth.ts =================================================================== --- frontend/src/hooks/useAxiosAuth.ts (revision 72c0de38a0f2ae0b068ca419e39bb96ec29b8cc6) +++ (revision ) @@ -1,65 +1,0 @@ -import { useEffect, useRef } from "react"; -import { useAuth } from "../hooks/useAuth"; -import axiosInstance from "../api/axiosInstance"; - -const useAxiosAuth = () => { - const { accessToken, refreshAccessToken, logout } = useAuth(); - const accessTokenRef = useRef(accessToken); - - useEffect(() => { - accessTokenRef.current = accessToken; - }, [accessToken]); - - useEffect(() => { - const requestInterceptor = axiosInstance.interceptors.request.use( - (config) => { - if (accessTokenRef.current) { - config.headers.Authorization = `Bearer ${accessTokenRef.current}`; - } - return config; - }, - (error) => { - return Promise.reject(error); - } - ); - - const responseInterceptor = axiosInstance.interceptors.response.use( - (response) => response, - async (error) => { - const originalRequest = error.config; - - if (error.response?.status === 401 && !originalRequest._retry) { - originalRequest._retry = true; - - try { - const newAccessToken = await refreshAccessToken(); - - if (newAccessToken) { - accessTokenRef.current = newAccessToken; - originalRequest.headers.Authorization = `Bearer ${newAccessToken}`; - // Retry the original request with the new access token - return axiosInstance(originalRequest); - } else { - logout(); - return Promise.reject(new Error("Token refresh failed.")); - } - } catch (_error) { - logout(); - return Promise.reject(_error); - } - } - - return Promise.reject(error); - } - ); - - return () => { - axiosInstance.interceptors.request.eject(requestInterceptor); - axiosInstance.interceptors.response.eject(responseInterceptor); - }; - }, [refreshAccessToken, logout]); - - return axiosInstance; -}; - -export default useAxiosAuth; Index: frontend/src/pages/Recommendations.tsx =================================================================== --- frontend/src/pages/Recommendations.tsx (revision 72c0de38a0f2ae0b068ca419e39bb96ec29b8cc6) +++ frontend/src/pages/Recommendations.tsx (revision cfab86d38f4a56cf7e735680cb32e32fa8cab17c) @@ -8,8 +8,7 @@ import { useSubjects } from "../context/SubjectsContext"; import { useAuth } from "../hooks/useAuth"; -import useAxiosAuth from "../hooks/useAxiosAuth"; +import axiosInstance from "../api/axiosInstance"; const Recommendations = () => { - const axiosAuth = useAxiosAuth(); const navigate = useNavigate(); const { formData } = useAuth(); @@ -31,5 +30,5 @@ try { const season = mapToSeasonInt(season_); - const response = await axiosAuth.get("/suggestion", { + const response = await axiosInstance.get("/suggestion", { params: { season }, });