♻️ Redirect the user to login if we get 401/403 (#1501)

Author: alejsdev

frontend/src/main.tsx

@@ -1,19 +1,31 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { RouterProvider, createRouter } from "@tanstack/react-router"
-import React from "react"
+import React, { StrictMode } from "react"
 import ReactDOM from "react-dom/client"
 import { routeTree } from "./routeTree.gen"
 
-import { StrictMode } from "react"
-import { OpenAPI } from "./client"
+import { ApiError, OpenAPI } from "./client"
 import { CustomProvider } from "./components/ui/provider"
 
 OpenAPI.BASE = import.meta.env.VITE_API_URL
 OpenAPI.TOKEN = async () => {
   return localStorage.getItem("access_token") || ""
 }
 
-const queryClient = new QueryClient()
+const handleApiError = (error: Error) => {
+  if (error instanceof ApiError && [401, 403].includes(error.status)) {
+    localStorage.removeItem("access_token")
+    window.location.href = "/login"
+  }
+}
+const queryClient = new QueryClient({
+  queryCache: new QueryCache({
+    onError: handleApiError,
+  }),
+  mutationCache: new MutationCache({
+    onError: handleApiError,
+  }),
+})
 
 const router = createRouter({ routeTree })
 declare module "@tanstack/react-router" {

frontend/tests/login.spec.ts

@@ -115,3 +115,13 @@ test("Logged-out user cannot access protected routes", async ({ page }) => {
   await page.goto("/settings")
   await page.waitForURL("/login")
 })
+
+test("Redirects to /login when token is wrong", async ({ page }) => {
+  await page.goto("/settings")
+  await page.evaluate(() => {
+    localStorage.setItem("access_token", "invalid_token")
+  })
+  await page.goto("/settings")
+  await page.waitForURL("/login")
+  await expect(page).toHaveURL("/login")
+})