Fix Race Condition in Axios Interceptor for Refresh Token

frontend/src/App.tsx

@@ -7,7 +7,7 @@ import * as Sentry from "@sentry/react";
 import { QueryCache, QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import axios from "axios";
 import { useEffect, useMemo } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import {
 	RouterProvider,
 	createBrowserRouter,
@@ -21,10 +21,7 @@ import { useGetSettingsQuery } from "./hooks/api/settings";
 import { useErrorHandler } from "./hooks/useErrorHandler";
 import AuthProvider from "./providers/AuthProvider";
 import { routes } from "./routes";
-import { logout, setAccessToken } from "./store/authSlice";
 import { selectConfig } from "./store/configSlice";
-import { store } from "./store/store";
-import { setUserData } from "./store/userSlice";
 import { isAxios404Error, isAxios500Error } from "./utils/axios.default";
 
 if (import.meta.env.PROD) {
@@ -61,7 +58,6 @@ function SettingLoader() {
 
 function App() {
 	const config = useSelector(selectConfig);
-	const dispatch = useDispatch();
 	const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
 	const theme = useMemo(() => {
 		const defaultMode = prefersDarkMode ? "dark" : "light";
@@ -108,39 +104,6 @@ function App() {
 		});
 	}, [handleError]);
 
-	useEffect(() => {
-		const handleRefreshTokenExpiration = () => {
-			dispatch(logout());
-			dispatch(setUserData(null));
-		};
-
-		const interceptor = axios.interceptors.response.use(
-			(response) => response,
-			async (error) => {
-				if (error.response?.status === 401 && !error.config._retry) {
-					if (error.config.url === "/auth/refresh") {
-						handleRefreshTokenExpiration();
-						return Promise.reject(error);
-					} else {
-						error.config._retry = true;
-						const refreshToken = store.getState().auth.refreshToken;
-						const response = await axios.post("/auth/refresh", { refreshToken });
-						const newAccessToken = response.data.newAccessToken;
-						dispatch(setAccessToken(newAccessToken));
-						axios.defaults.headers.common["Authorization"] = `Bearer ${newAccessToken}`;
-						error.config.headers["Authorization"] = `Bearer ${newAccessToken}`;
-						return axios(error.config);
-					}
-				}
-				return Promise.reject(error);
-			}
-		);
-
-		return () => {
-			axios.interceptors.response.eject(interceptor);
-		};
-	}, [dispatch]);
-
 	return (
 		<QueryClientProvider client={queryClient}>
 			<AuthProvider>

frontend/src/hooks/api/user.ts

@@ -1,8 +1,8 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import axios from "axios";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { logout, selectAuth } from "../../store/authSlice";
+import { logout, selectAuth, setAccessToken } from "../../store/authSlice";
 import { User, setUserData } from "../../store/userSlice";
 import { GetUserResponse, UpdateUserRequest } from "./types/user";
 
@@ -13,10 +13,43 @@ export const generateGetUserQueryKey = (accessToken: string) => {
 export const useGetUserQuery = () => {
 	const dispatch = useDispatch();
 	const authStore = useSelector(selectAuth);
+	const [axiosIntercepterAdded, setAxiosIntercepterAdded] = useState(false);
+
+	useEffect(() => {
+		const interceptor = axios.interceptors.response.use(
+			(response) => response,
+			async (error) => {
+				if (error.response?.status === 401 && !error.config._retry) {
+					if (error.config.url === "/auth/refresh") {
+						dispatch(logout());
+						dispatch(setUserData(null));
+						return Promise.reject(error);
+					} else {
+						error.config._retry = true;
+						const { refreshToken } = authStore;
+						const response = await axios.post("/auth/refresh", { refreshToken });
+						const newAccessToken = response.data.newAccessToken;
+						dispatch(setAccessToken(newAccessToken));
+						axios.defaults.headers.common["Authorization"] = `Bearer ${newAccessToken}`;
+						error.config.headers["Authorization"] = `Bearer ${newAccessToken}`;
+						return axios(error.config);
+					}
+				}
+				return Promise.reject(error);
+			}
+		);
+
+		setAxiosIntercepterAdded(true);
+
+		return () => {
+			setAxiosIntercepterAdded(false);
+			axios.interceptors.response.eject(interceptor);
+		};
+	}, [authStore, dispatch]);
 
 	const query = useQuery({
 		queryKey: generateGetUserQueryKey(authStore.accessToken || ""),
-		enabled: Boolean(authStore.accessToken),
+		enabled: Boolean(axiosIntercepterAdded && authStore.accessToken),
 		queryFn: async () => {
 			axios.defaults.headers.common["Authorization"] = `Bearer ${authStore.accessToken}`;
 			const res = await axios.get<GetUserResponse>("/users");

frontend/src/providers/AuthProvider.tsx

@@ -9,14 +9,14 @@ interface AuthProviderProps {
 
 function AuthProvider(props: AuthProviderProps) {
 	const { children } = props;
-	const { data: user, isSuccess, isLoading } = useGetUserQuery();
+	const { data: user, isSuccess, isLoading, isPending } = useGetUserQuery();
 	const shouldChangeNickname = useMemo(
 		() => isSuccess && !user.nickname,
 		[isSuccess, user?.nickname]
 	);
 
 	return (
-		<AuthContext.Provider value={{ isLoggedIn: isSuccess, isLoading }}>
+		<AuthContext.Provider value={{ isLoggedIn: isSuccess, isLoading: isPending || isLoading }}>
 			{shouldChangeNickname ? <ChangeNicknameModal open /> : children}
 		</AuthContext.Provider>
 	);