Changed app context logic to get CSRF value and reuse it if available

web-ui/src/context/AppContext.jsx

@@ -34,6 +34,17 @@ import {getCertifications} from "../api/certification.js";
 
 const AppContext = React.createContext();
 
+function getSessionCookieValue(name) {
+  const cookies = document.cookie.split(';');
+  for (let i = 0; i < cookies.length; i++) {
+    const cookie = cookies[i].trim();
+    if (cookie.startsWith(name + '=')) {
+      return decodeURIComponent(cookie.substring(name.length + 1));
+    }
+  }
+  return null;
+}
+
 const AppContextProvider = props => {
   const [state, dispatch] = useReducer(
     reducer,
@@ -63,14 +74,17 @@ const AppContextProvider = props => {
   const url = `${BASE_API_URL}/csrf/cookie`;
   useEffect(() => {
     const getCsrf = async () => {
-      if (!csrf) {
+      const cookieVal = getSessionCookieValue('_csrf');
+      if (!csrf && !cookieVal) {
         const res = await fetch(url, {
           responseType: 'text',
           credentials: 'include'
         });
         if (res && res.ok) {
           dispatch({ type: SET_CSRF, payload: await res.text() });
         }
+      } else if (cookieVal) {
+        dispatch({ type: SET_CSRF, payload: cookieVal });
       }
     };
     getCsrf();