Session Management Bugfix (#204)

client/src/app/providers.tsx

@@ -13,6 +13,7 @@ import { SessionProvider } from "next-auth/react";
 
 import { makeQueryClient } from "@/lib/query-client";
 
+import SessionChecker from "@/components/session-checker";
 import { TooltipProvider } from "@/components/ui/tooltip";
 
 let browserQueryClient: QueryClient | undefined = undefined;
@@ -44,7 +45,10 @@ export default function LayoutProviders({
         <TooltipProvider>
           <QueryClientProvider client={queryClient}>
             <TooltipProvider>
-              <JotaiProvider store={appStore}>{children}</JotaiProvider>
+              <JotaiProvider store={appStore}>
+                <SessionChecker />
+                {children}
+              </JotaiProvider>
             </TooltipProvider>
           </QueryClientProvider>
         </TooltipProvider>

client/src/components/session-checker/index.tsx

@@ -0,0 +1,53 @@
+import { useEffect, useMemo } from "react";
+
+import { usePathname } from "next/navigation";
+
+import { TOKEN_TYPE_ENUM } from "@shared/schemas/auth/token-type.schema";
+import { signOut, useSession } from "next-auth/react";
+
+import { client } from "@/lib/query-client";
+import { queryKeys } from "@/lib/query-keys";
+import { isPrivatePath } from "@/lib/utils";
+
+/**
+ * This should be a temporary solution to check if the access token is expired.
+ * next-auth currently does not support server-side signout.
+ * More info https://github.com/nextauthjs/next-auth/discussions/5334
+ * TODO: A better solution would be to use a middleware to check if the access token is expired!
+ */
+export default function SessionChecker() {
+  const { data: session } = useSession();
+  const queryKey = queryKeys.auth.validateToken(session?.accessToken).queryKey;
+
+  const pathname = usePathname();
+  const queryEnabled = useMemo(
+    () => isPrivatePath(pathname) && !!session?.accessToken,
+    [session?.accessToken, pathname],
+  );
+  const { error } = client.auth.validateToken.useQuery(
+    queryKey,
+    {
+      query: {
+        tokenType: TOKEN_TYPE_ENUM.ACCESS,
+      },
+      headers: {
+        authorization: `Bearer ${session?.accessToken}`,
+      },
+    },
+    {
+      queryKey,
+      enabled: queryEnabled,
+    },
+  );
+
+  useEffect(() => {
+    if (error && queryEnabled) {
+      signOut({
+        redirect: true,
+        callbackUrl: queryEnabled ? "/auth/signin" : undefined,
+      });
+    }
+  }, [error, pathname, queryEnabled]);
+
+  return null;
+}

client/src/lib/query-keys.ts

@@ -15,6 +15,7 @@ import { filtersSchema } from "@/app/(overview)/url-store";
 import { TABLE_VIEWS } from "@/containers/overview/table/toolbar/table-selector";
 
 export const authKeys = createQueryKeys("auth", {
+  validateToken: (token?: string) => ["validate-token", token],
   resetPasswordToken: (token: string) => ["reset-password-token", token],
   confirmEmailToken: (token: string) => ["confirm-email-token", token],
 });

client/src/lib/utils.ts

@@ -67,3 +67,8 @@ class IntroModalManager {
   }
 }
 export const introModalManager = IntroModalManager.getInstance();
+
+const PRIVATE_PAGES = /^(\/profile|\/my-projects)/;
+export const isPrivatePath = (pathname: string) => {
+  return PRIVATE_PAGES.test(pathname);
+};

client/src/middleware.ts

@@ -2,10 +2,10 @@ import { NextResponse } from "next/server";
 
 import { NextRequestWithAuth, withAuth } from "next-auth/middleware";
 
-const PRIVATE_PAGES = /^(\/profile|\/my-projects)/;
+import { isPrivatePath } from "@/lib/utils";
 
 export default function middleware(req: NextRequestWithAuth) {
-  if (PRIVATE_PAGES.test(req.nextUrl.pathname)) {
+  if (isPrivatePath(req.nextUrl.pathname)) {
     return withAuth(req, {
       pages: {
         signIn: "/auth/signin",