Change CSRF error handling to open login URL in new tab when necessary

City-of-Helsinki · Dec 20, 2024 · 348c73a · 348c73a
1 parent ec03695
commit 348c73a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/frontend/src/Router.tsx b/frontend/src/Router.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useEffect} from "react";
 import {Navigate, Route, Routes} from "react-router-dom";
 import App from "./app/App";
 import {selectIsAuthenticated} from "./app/authSlice";
@@ -36,6 +36,13 @@ export default function Router() {
         return isAuthenticated ? element : <Unauthorized />;
     };
 
+    function WindowClose() {
+        useEffect(() => {
+            window.close();
+        }, []);
+        return null;
+    }
+
     return (
         <Routes>
             <Route
@@ -148,6 +155,10 @@ export default function Router() {
                     path="logout"
                     element={isAuthenticated ? <></> : <Logout />}
                 />
+                <Route
+                    path="window-close"
+                    element={<WindowClose />}
+                />
                 <Route
                     index
                     element={<Navigate to="/housing-companies" />}

diff --git a/frontend/src/common/services/apis.ts b/frontend/src/common/services/apis.ts
@@ -69,7 +69,11 @@ const baseQueryWithReAuth: BaseQueryFn<string | FetchArgs, unknown, FetchBaseQue
         const errorMessage = (result.error?.data as {detail: string})?.detail;
         if (errorMessage?.startsWith("CSRF Failed:")) {
             hdsToast.error("CSRF Virhe. Uudelleenohjataan kirjautumissivulle.");
-            window.location.href = getSignInUrl(window.location.href);
+            setTimeout(() => {
+                // Open login in a new window/tab to avoid losing form data
+                const callBackUrl = new URL("/window-close", window.location.origin).toString();
+                window.open(getSignInUrl(callBackUrl), "_blank");
+            }, 1000);
         }
     }
     return result;