fix: token mechanism

sitarass · sitarass · commit 0a83f3ea2ce7 · 2025-11-02T17:27:29.000+02:00
diff --git a/front-end/src/app/(home)/support/page.tsx b/front-end/src/app/(home)/support/page.tsx
diff --git a/front-end/src/app/layout.tsx b/front-end/src/app/layout.tsx
@@ -39,14 +39,15 @@ export default async function RootLayout({
   children: React.ReactNode;
 }>) {
   const token = await authStorage.getAccessToken();
+  const refreshToken = await authStorage.getRefreshToken();
 
   return (
     <html lang="en">
       <body
         className={`flex min-h-screen w-full flex-col ${geistSans.variable} ${geistMono.variable}`}
       >
         <Toaster richColors />
-        <Providers hasAccessToken={Boolean(token)}>
+        <Providers initialHasToken={Boolean(token) || Boolean(refreshToken)}>
           <main className={styles.page}>
             <div className={styles.container}>
               <Navbar />
diff --git a/front-end/src/app/not-found.tsx b/front-end/src/app/not-found.tsx
@@ -0,0 +1,6 @@
+import { redirect } from "next/navigation";
+import { routes } from "@/data/routes";
+
+export default function NotFound() {
+  redirect(routes.home);
+}
diff --git a/front-end/src/app/providers.tsx b/front-end/src/app/providers.tsx
@@ -7,10 +7,10 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
 
 export default function Providers({
-  hasAccessToken,
+  initialHasToken,
   children,
 }: {
-  hasAccessToken: boolean;
+  initialHasToken: boolean;
   children: React.ReactNode;
 }) {
   const [queryClient] = useState(
@@ -40,7 +40,7 @@ export default function Providers({
   return (
     <NuqsAdapter>
       <QueryClientProvider client={queryClient}>
-        <AuthProvider hasAccessToken={hasAccessToken}>
+        <AuthProvider initialHasToken={initialHasToken}>
           <TooltipProvider>{children}</TooltipProvider>
         </AuthProvider>
       </QueryClientProvider>
diff --git a/front-end/src/components/Navbar/navbar.tsx b/front-end/src/components/Navbar/navbar.tsx
@@ -15,10 +15,7 @@ import UserMenu from "./UserMenu";
 import Logo from "./Logo";
 import type { NavbarProps, NavbarNavItem } from "./types";
 import Link from "next/link";
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-} from "../ui/dropdown-menu";
+import { DropdownMenu, DropdownMenuTrigger } from "../ui/dropdown-menu";
 
 const defaultLinks: NavbarNavItem[] = [
   { href: routes.home, label: "Home" },
@@ -42,7 +39,7 @@ const Navbar = React.forwardRef<HTMLElement, NavbarProps>(
     },
     ref
   ) => {
-    const { isAuthenticated } = useAuth();
+    const { isAuthenticated, isLoading } = useAuth();
     const pathname = usePathname();
     const [isMobile, setIsMobile] = useState(false);
     const [openMobile, setOpenMobile] = useState(false);
@@ -121,29 +118,30 @@ const Navbar = React.forwardRef<HTMLElement, NavbarProps>(
             )}
           </div>
 
-          {isAuthenticated ? (
-            <UserMenu />
-          ) : (
-            <div className="flex gap-2">
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={onSignInClick}
-                asChild={!onSignInClick}
-              >
-                <Link href={signInHref}>{signInText}</Link>
-              </Button>
-
-              <Button
-                size="sm"
-                className="shadow-sm"
-                onClick={onCtaClick}
-                asChild={!onCtaClick}
-              >
-                <Link href={ctaHref}>{ctaText}</Link>
-              </Button>
-            </div>
-          )}
+          {!isLoading &&
+            (isAuthenticated ? (
+              <UserMenu />
+            ) : (
+              <div className="flex gap-2">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={onSignInClick}
+                  asChild={!onSignInClick}
+                >
+                  <Link href={signInHref}>{signInText}</Link>
+                </Button>
+
+                <Button
+                  size="sm"
+                  className="shadow-sm"
+                  onClick={onCtaClick}
+                  asChild={!onCtaClick}
+                >
+                  <Link href={ctaHref}>{ctaText}</Link>
+                </Button>
+              </div>
+            ))}
         </div>
       </header>
     );
diff --git a/front-end/src/context/AuthContext.tsx b/front-end/src/context/AuthContext.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { createContext, useContext, useMemo } from "react";
 import { IUser } from "@/types/user.types";
 import { useQuery } from "@tanstack/react-query";
@@ -8,28 +10,29 @@ interface AuthContextType {
   isLoading: boolean;
   isAuthenticated: boolean;
   error?: unknown;
+  refetchUser: () => void;
 }
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
 
 export const AuthProvider = ({
-  hasAccessToken,
+  initialHasToken,
   children,
 }: {
-  hasAccessToken: boolean;
+  initialHasToken: boolean;
   children: React.ReactNode;
 }) => {
   const {
     data: user,
     isLoading,
     error,
+    refetch,
   } = useQuery<unknown, unknown, IUser>({
     queryKey: ["api/user"],
     queryFn: getUserInfo,
-    enabled: hasAccessToken,
-
-    staleTime: Infinity,
-    gcTime: Infinity,
+    enabled: initialHasToken,
+    staleTime: 5 * 60 * 1000,
+    gcTime: 10 * 60 * 1000,
     refetchOnMount: false,
     refetchOnWindowFocus: false,
     refetchOnReconnect: false,
@@ -38,11 +41,12 @@ export const AuthProvider = ({
   const value = useMemo(
     () => ({
       user,
-      isAuthenticated: Boolean(hasAccessToken),
-      isLoading,
+      isAuthenticated: Boolean(user),
+      isLoading: initialHasToken && isLoading,
       error,
+      refetchUser: () => refetch(),
     }),
-    [user, hasAccessToken, isLoading, error]
+    [user, initialHasToken, isLoading, error, refetch]
   );
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
diff --git a/front-end/src/middleware.ts b/front-end/src/middleware.ts
@@ -1,8 +1,6 @@
 import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
 import { routeConfig, isProtectedRoute, isAuthRoute } from "./data/routes";
-import { decodeToken } from "./utils/userUtils";
-import { authStorage } from "./api-actions/authStorage";
 
 export async function middleware(request: NextRequest) {
   const path = request.nextUrl.pathname;
@@ -14,32 +12,22 @@ export async function middleware(request: NextRequest) {
     return NextResponse.next();
   }
 
-  const token = await authStorage.getAccessToken();
-  let userId: string | undefined;
-
-  if (token) {
-    try {
-      const decoded = decodeToken(token);
-      userId = decoded.userId;
-    } catch (error) {
-      const response = NextResponse.redirect(
-        new URL(routeConfig.protected.redirectTo, request.nextUrl)
-      );
-      response.cookies.delete("access_token");
-      response.cookies.delete("refresh_token");
-      return response;
-    }
-  }
+  const accessToken = request.cookies.get("access_token")?.value;
+  const refreshToken = request.cookies.get("refresh_token")?.value;
 
-  const isAuthenticated = Boolean(userId);
+  const initialHasToken = Boolean(refreshToken || accessToken);
 
-  if (isProtected && !isAuthenticated) {
+  if (isProtected && !initialHasToken) {
     const loginUrl = new URL(routeConfig.protected.redirectTo, request.nextUrl);
     loginUrl.searchParams.set("from", path);
     return NextResponse.redirect(loginUrl);
   }
 
-  if (isAuth && isAuthenticated) {
+  if (isProtected && refreshToken && !accessToken) {
+    return NextResponse.next();
+  }
+
+  if (isAuth && initialHasToken) {
     const from = request.nextUrl.searchParams.get("from");
     const redirectUrl =
       from && !isAuthRoute(from) ? from : routeConfig.auth.redirectTo;
