Local storage handler

City-of-Helsinki · Aug 22, 2023 · f013b0b · f013b0b
1 parent 188747f
commit f013b0b
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 30 deletions.
diff --git a/frontend/benefit/applicant/src/hooks/useUserQuery.ts b/frontend/benefit/applicant/src/hooks/useUserQuery.ts
@@ -7,6 +7,7 @@ import { useQuery, UseQueryResult } from 'react-query';
 import showErrorToast from 'shared/components/toast/show-error-toast';
 import useBackendAPI from 'shared/hooks/useBackendAPI';
 import useLocale from 'shared/hooks/useLocale';
+import { setLocalStorageItem } from 'shared/utils/localstorage.utils';
 
 import { LOCAL_STORAGE_KEYS } from '../constants';
 
@@ -51,14 +52,12 @@ const useUserQuery = (
       select: (data) => camelcaseKeys(data, { deep: true }),
       onError: (error) => handleError(error),
       onSuccess: (data) => {
-        /* eslint-disable scanjs-rules/identifier_localStorage */
-        localStorage.setItem(LOCAL_STORAGE_KEYS.CSRF_TOKEN, data.csrfToken as string);
+        setLocalStorageItem(LOCAL_STORAGE_KEYS.CSRF_TOKEN, data.csrfToken);
         if (data.id && data.termsOfServiceApprovalNeeded)
-          localStorage.setItem(
+          setLocalStorageItem(
             LOCAL_STORAGE_KEYS.IS_TERMS_OF_SERVICE_APPROVED,
             'false'
           );
-        /* eslint-enable scanjs-rules/identifier_localStorage */
       },
     }
   );

diff --git a/frontend/benefit/applicant/src/pages/_app.tsx b/frontend/benefit/applicant/src/pages/_app.tsx
@@ -56,7 +56,7 @@ const App: React.FC<AppProps> = (appProps) => {
     <BackendAPIProvider
       baseURL={getBackendDomain()}
       headers={getHeaders(locale)}
-      useLocalStorageCsrf
+      isLocalStorageCsrf
     >
       <QueryClientProvider client={queryClient}>
         <AuthProvider>

diff --git a/frontend/benefit/applicant/src/pages/login.tsx b/frontend/benefit/applicant/src/pages/login.tsx
@@ -23,8 +23,9 @@ import {
   $GridCell,
 } from 'shared/components/forms/section/FormSection.sc';
 import getServerSideTranslations from 'shared/i18n/get-server-side-translations';
+import { removeLocalStorageItem } from 'shared/utils/localstorage.utils';
 
-import { IS_CLIENT, LOCAL_STORAGE_KEYS } from '../constants';
+import { LOCAL_STORAGE_KEYS } from '../constants';
 
 type NotificationProps =
   | (Pick<HDSNotificationProps, 'type' | 'label'> & {
@@ -60,12 +61,8 @@ const Login: NextPage = () => {
   }, [logout, queryClient]);
 
   useEffect(() => {
-    if (IS_CLIENT) {
-      /* eslint-disable scanjs-rules/identifier_localStorage */
-      localStorage.removeItem(LOCAL_STORAGE_KEYS.IS_TERMS_OF_SERVICE_APPROVED);
-      localStorage.removeItem(LOCAL_STORAGE_KEYS.CSRF_TOKEN);
-      /* eslint-enable scanjs-rules/identifier_localStorage */
-    }
+    removeLocalStorageItem(LOCAL_STORAGE_KEYS.IS_TERMS_OF_SERVICE_APPROVED);
+    removeLocalStorageItem(LOCAL_STORAGE_KEYS.CSRF_TOKEN);
   }, []);
 
   return (

diff --git a/frontend/benefit/handler/src/hooks/useUserQuery.ts b/frontend/benefit/handler/src/hooks/useUserQuery.ts
@@ -5,6 +5,7 @@ import { useQuery, UseQueryResult } from 'react-query';
 import useBackendAPI from 'shared/hooks/useBackendAPI';
 import useLocale from 'shared/hooks/useLocale';
 import User from 'shared/types/user';
+import { setLocalStorageItem } from 'shared/utils/localstorage.utils';
 
 import { LOCAL_STORAGE_KEYS, ROUTES } from '../constants';
 import useLogout from './useLogout';
@@ -48,8 +49,7 @@ const useUserQuery = <T extends User>(
 
   const onSuccessHandler = (user: User): void => {
     checkForStaffStatus(user);
-    // eslint-disable-next-line scanjs-rules/identifier_localStorage
-    localStorage.setItem(LOCAL_STORAGE_KEYS.CSRF_TOKEN, user.csrf_token);
+    setLocalStorageItem(LOCAL_STORAGE_KEYS.CSRF_TOKEN, user.csrf_token);
   };
 
   return useQuery(

diff --git a/frontend/benefit/handler/src/pages/_app.tsx b/frontend/benefit/handler/src/pages/_app.tsx
@@ -33,7 +33,7 @@ const App: React.FC<AppProps> = (appProps) => {
     <BackendAPIProvider
       baseURL={getBackendDomain()}
       headers={getHeaders(locale)}
-      useLocalStorageCsrf
+      isLocalStorageCsrf
     >
       <AppContextProvider>
         <QueryClientProvider client={queryClient}>

diff --git a/frontend/benefit/handler/src/pages/login.tsx b/frontend/benefit/handler/src/pages/login.tsx
@@ -12,6 +12,7 @@ import React, { useEffect } from 'react';
 import { useQueryClient } from 'react-query';
 import Container from 'shared/components/container/Container';
 import getServerSideTranslations from 'shared/i18n/get-server-side-translations';
+import { removeLocalStorageItem } from 'shared/utils/localstorage.utils';
 import { useTheme } from 'styled-components';
 
 import { LOCAL_STORAGE_KEYS } from '../constants';
@@ -64,9 +65,7 @@ const Login: NextPage = () => {
   }, [router.query.logout, router.query.userStateError, queryClient]);
 
   useEffect(() => {
-    if (typeof window !== 'undefined')
-      // eslint-disable-next-line scanjs-rules/identifier_localStorage
-      localStorage.removeItem(LOCAL_STORAGE_KEYS.CSRF_TOKEN);
+    removeLocalStorageItem(LOCAL_STORAGE_KEYS.CSRF_TOKEN);
   }, []);
 
   return (

diff --git a/frontend/shared/src/backend-api/BackendAPIProvider.tsx b/frontend/shared/src/backend-api/BackendAPIProvider.tsx
@@ -2,36 +2,30 @@ import Axios from 'axios';
 import React from 'react';
 import { getLastCookieValue } from 'shared/cookies/get-last-cookie-value';
 import { Headers } from 'shared/types/common';
+import { getLocalStorageItem } from 'shared/utils/localstorage.utils';
 
 import BackendAPIContext from './BackendAPIContext';
 
 export interface BackendAPIProviderProps {
   baseURL: string;
   headers?: Headers;
-  useLocalStorageCsrf?: boolean;
+  isLocalStorageCsrf?: boolean;
 }
 
-const getCsrfToken = (useLocalStorageCsrf: boolean): string => {
-  if (useLocalStorageCsrf)
-    return typeof window !== 'undefined'
-      ? // eslint-disable-next-line scanjs-rules/identifier_localStorage
-        localStorage.getItem('csrfToken') || ''
-      : '';
-  return getLastCookieValue('yjdhcsrftoken');
-};
-
 const BackendAPIProvider: React.FC<BackendAPIProviderProps> = ({
   baseURL,
   headers,
-  useLocalStorageCsrf = false,
+  isLocalStorageCsrf = false,
   children,
 }): JSX.Element => (
   <BackendAPIContext.Provider
     value={Axios.create({
       baseURL,
       headers: {
         'Content-Type': 'application/json',
-        'X-CSRFToken': getCsrfToken(useLocalStorageCsrf),
+        'X-CSRFToken': isLocalStorageCsrf
+          ? getLocalStorageItem('csrfToken')
+          : getLastCookieValue('yjdhcsrftoken'),
         ...headers,
       },
       withCredentials: true,

diff --git a/frontend/shared/src/utils/localstorage.utils.ts b/frontend/shared/src/utils/localstorage.utils.ts
@@ -0,0 +1,14 @@
+/* eslint-disable scanjs-rules/identifier_localStorage */
+
+const IS_CLIENT = typeof window !== 'undefined';
+
+export const getLocalStorageItem = (key: string): string =>
+  IS_CLIENT ? localStorage.getItem(key) || '' : '';
+
+export const setLocalStorageItem = (key: string, value: string): void =>
+  IS_CLIENT && localStorage.setItem(key, value);
+
+export const removeLocalStorageItem = (key: string): void =>
+  IS_CLIENT && localStorage.removeItem(key);
+
+/* eslint-enable scanjs-rules/identifier_localStorage */