refactor: auth refreshtoken (#100)

* feat: refresh Token

* refactor: refresh token

src/App.tsx

@@ -1,7 +1,14 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { StrictMode, Suspense } from "react";
+import {
+ QueryCache,
+ QueryClient,
+ QueryClientProvider,
+} from "@tanstack/react-query";
+import { StrictMode, Suspense, useState } from "react";
 import { RouterProvider } from "react-router-dom";
+import { refreshToken as getRefreshToken } from "./api/auth/refreshToken";
 import { router } from "./routes";
+import useAuthStore from "./store/authStore";
+import { calculateExpiryTime } from "./utils/calculateExpiryTime";
 
 function AppRoot() {
  return (
@@ -18,7 +25,65 @@ function AppRoot() {
 }
 
 function App() {
- const queryClient = new QueryClient();
+ const accessToken = useAuthStore((state) => state.accessToken);
+ const refreshToken = useAuthStore((state) => state.refreshToken);
+ const setAuth = useAuthStore((state) => state.setAuth);
+ const clearAuth = useAuthStore((state) => state.clearAuth);
+ const [isRefreshingToken, setIsRefreshingToken] = useState(false);
+
+ const refreshAuthToken = async (
+ accessToken: string,
+ refreshToken: string
+ ) => {
+ if (isRefreshingToken) return;
+ if (accessToken == null || refreshToken == null) return;
+
+ try {
+ const response = await getRefreshToken(refreshToken);
+
+ const expriedAt = calculateExpiryTime(response.expires_in);
+ setAuth(response.access_token, response.refresh_token, expriedAt);
+ } catch (error) {
+ clearAuth();
+ router.navigate("/admin");
+ } finally {
+ setIsRefreshingToken(false);
+ }
+ };
+
+ const [queryClient] = useState(
+ () =>
+ new QueryClient({
+ defaultOptions: {
+ queries: {
+ staleTime: 30000, // 30 seconds
+ retry: (failureCount, error) => {
+ // Don't retry for certain error responses
+ if (
+ error.message.includes("400") ||
+ error.message.includes("401")
+ ) {
+ return false;
+ }
+
+ // Retry others just once
+ return failureCount <= 1;
+ },
+ },
+ },
+ queryCache: new QueryCache({
+ onError: (error) => {
+ if (
+ error.message.includes("400") ||
+ error.message.includes("401")
+ ) {
+ if (accessToken == null || refreshToken == null) return;
+ refreshAuthToken(accessToken, refreshToken);
+ }
+ },
+ }),
+ })
+ );
 
  return (
  <StrictMode>

src/api/auth/refreshToken.ts

@@ -1,4 +1,3 @@
-import useAuthStore from "@/store/authStore";
 import axios from "axios";
 
 interface RefreshTokenResponse {
@@ -14,17 +13,10 @@ interface RefreshTokenCredentials {
 const refreshToken = async (
  refresh_token: string
 ): Promise<RefreshTokenResponse> => {
- const { accessToken } = useAuthStore.getState();
-
  const response = await axios.post<RefreshTokenResponse>(
  `${import.meta.env.VITE_API_URL}/auth/refreshToken`,
  {
  refresh_token,
- },
- {
- headers: {
- Authorization: `Bearer ${accessToken}`,
- },
  }
  );
 

src/layouts/AdminLayout.tsx

@@ -1,30 +1,15 @@
 import background from "@/assets/background/background.png";
 import Footer from "@/components/Footer";
 import Navbar from "@/components/Navbar";
-import useRefreshToken from "@/hooks/auth/useRefreshToken";
 import useAuthStore from "@/store/authStore";
-import { useEffect } from "react";
 import { Toaster } from "react-hot-toast";
-import { useNavigate } from "react-router-dom";
 
 type MainLayoutProps = {
  children: React.ReactNode;
 };
 
 const AdminLayout = ({ children }: MainLayoutProps) => {
- const navigate = useNavigate();
- const { isLoggedIn, refreshToken, validateSession } = useAuthStore();
- const { mutate } = useRefreshToken();
-
- useEffect(() => {
- if (isLoggedIn == false) {
- navigate("/admin");
- }
-
- if (isLoggedIn && refreshToken && validateSession()) {
- mutate({ refresh_token: refreshToken });
- }
- }, [isLoggedIn]);
+ const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
 
  return (
  <>