simplify calls

src/frontend/src/functions/auth.tsx

@@ -1,6 +1,7 @@
 import { t } from '@lingui/macro';
 import { notifications } from '@mantine/notifications';
 import axios from 'axios';
+import type { AxiosRequestConfig } from 'axios';
 import type { Location, NavigateFunction } from 'react-router-dom';
 import { api, setApiDefaults } from '../App';
 import { ApiEndpoints } from '../enums/ApiEndpoints';
@@ -127,16 +128,12 @@ export const doBasicLogin = async (
  */
 export const doLogout = async (navigate: NavigateFunction) => {
   const { clearUserState, isLoggedIn, setSession } = useUserState.getState();
-  const { session } = useUserState.getState();
 
   // Logout from the server session
   if (isLoggedIn() || !!getCsrfCookie()) {
-    await api
+    await authApi(apiUrl(ApiEndpoints.user_logout), undefined, 'delete').catch(
-      .delete(apiUrl(ApiEndpoints.user_logout), {
+      () => {}
-        headers: { 'X-Session-Token': session }
+    );
-      })
-      .catch(() => {});
-
     showLoginNotification({
       title: t`Logged Out`,
       message: t`Successfully logged out`
@@ -201,17 +198,10 @@ export function handleMfaLogin(
   location: Location<any>,
   values: { code: string }
 ) {
-  const { session, setToken, setSession } = useUserState.getState();
+  const { setToken, setSession } = useUserState.getState();
-
+  authApi(apiUrl(ApiEndpoints.user_login_mfa), undefined, 'post', {
-  api
-    .post(
-      apiUrl(ApiEndpoints.user_login_mfa),
-      {
     code: values.code
-      },
+  }).then((response) => {
-      { headers: { 'X-Session-Token': session } }
-    )
-    .then((response) => {
     setSession(response.data.meta.session_token);
     setToken(response.data.meta.access_token);
     followRedirect(navigate, location?.state);
@@ -310,3 +300,38 @@ export function ProviderLogin(
   const url = `${host}${apiUrl(ApiEndpoints.login_provider_redirect)}`;
   post(url, values);
 }
+
+/**
+ * Makes an API request with session tokens using the provided URL, configuration, method, and data.
+ *
+ * @param url - The URL to which the request is sent.
+ * @param config - Optional Axios request configuration.
+ * @param method - The HTTP method to use for the request. Defaults to 'get'.
+ * @param data - Optional data to be sent with the request.
+ * @returns A promise that resolves to the response of the API request.
+ */
+export function authApi(
+  url: string,
+  config: AxiosRequestConfig | undefined = undefined,
+  method: 'get' | 'post' | 'put' | 'delete' = 'get',
+  data?: any
+) {
+  const [session] = useUserState((state) => [state.session]);
+  // extend default axios instance with session token
+  const requestConfig = config || {};
+  if (!requestConfig.headers) {
+    requestConfig.headers = {};
+  }
+  requestConfig.headers['X-Session-Token'] = session;
+
+  // set method
+  requestConfig.method = method;
+
+  // set data
+  if (data) {
+    requestConfig.data = data;
+  }
+
+  // use normal api
+  return api.post(url, requestConfig);
+}

src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx

@@ -21,9 +21,8 @@ import { api, queryClient } from '../../../../App';
 import { YesNoButton } from '../../../../components/buttons/YesNoButton';
 import { PlaceholderPill } from '../../../../components/items/Placeholder';
 import { ApiEndpoints } from '../../../../enums/ApiEndpoints';
-import { ProviderLogin } from '../../../../functions/auth';
+import { ProviderLogin, authApi } from '../../../../functions/auth';
 import { apiUrl, useServerApiState } from '../../../../states/ApiState';
-import { useUserState } from '../../../../states/UserState';
 import type { Provider, SecuritySetting } from '../../../../states/states';
 
 export function SecurityContent() {
@@ -80,75 +79,25 @@ export function SecurityContent() {
 function EmailContent() {
   const [value, setValue] = useState<string>('');
   const [newEmailValue, setNewEmailValue] = useState('');
-  const [session] = useUserState((state) => [state.session]);
   const { isLoading, data, refetch } = useQuery({
     queryKey: ['emails'],
     queryFn: () =>
-      api
+      authApi(apiUrl(ApiEndpoints.user_emails)).then((res) => res.data.data)
-        .get(apiUrl(ApiEndpoints.user_emails), {
-          headers: { 'X-Session-Token': session }
-        })
-        .then((res) => res.data.data)
   });
 
   function runServerAction(
-    url: ApiEndpoints,
+    action: 'post' | 'put' | 'delete' = 'post',
-    action: 'post' | 'put' | 'delete' = 'post'
+    data?: any
   ) {
-    let act: any;
+    const vals: any = data || { email: value };
-    switch (action) {
+    console.log('vals', vals);
-      case 'post':
+    authApi(apiUrl(ApiEndpoints.user_emails), undefined, action, vals)
-        act = api.post;
-        break;
-      case 'put':
-        act = api.put;
-        break;
-      case 'delete':
-        act = api.delete;
-        break;
-    }
-    act(
-      apiUrl(url),
-      { email: value },
-      { headers: { 'X-Session-Token': session } }
-    )
       .then(() => {
         refetch();
       })
       .catch((res: any) => console.log(res.data));
   }
 
-  function addEmail() {
-    api
-      .post(
-        apiUrl(ApiEndpoints.user_emails),
-        {
-          email: newEmailValue
-        },
-        { headers: { 'X-Session-Token': session } }
-      )
-      .then(() => {
-        refetch();
-      })
-      .catch((res) => console.log(res.data));
-  }
-
-  function changePrimary() {
-    api
-      .post(
-        apiUrl(ApiEndpoints.user_emails),
-        {
-          email: value,
-          primary: true
-        },
-        { headers: { 'X-Session-Token': session } }
-      )
-      .then(() => {
-        refetch();
-      })
-      .catch((res) => console.log(res.data));
-  }
-
   if (isLoading) return <Loader />;
 
   return (
@@ -211,23 +160,25 @@ function EmailContent() {
       </Grid.Col>
       <Grid.Col span={6}>
         <Group>
-          <Button onClick={() => changePrimary()}>
+          <Button
+            onClick={() =>
+              runServerAction('post', { email: value, primary: true })
+            }
+          >
             <Trans>Make Primary</Trans>
           </Button>
-          <Button
+          <Button onClick={() => runServerAction('put')}>
-            onClick={() => runServerAction(ApiEndpoints.user_emails, 'put')}
-          >
             <Trans>Re-send Verification</Trans>
           </Button>
-          <Button
+          <Button onClick={() => runServerAction('delete')}>
-            onClick={() => runServerAction(ApiEndpoints.user_emails, 'delete')}
-          >
             <Trans>Remove</Trans>
           </Button>
         </Group>
       </Grid.Col>
       <Grid.Col span={6}>
-        <Button onClick={addEmail}>
+        <Button
+          onClick={() => runServerAction('post', { email: newEmailValue })}
+        >
           <Trans>Add Email</Trans>
         </Button>
       </Grid.Col>
@@ -252,15 +203,10 @@ function SsoContent({
 }: Readonly<{ auth_settings: SecuritySetting | undefined }>) {
   const [value, setValue] = useState<string>('');
   const [currentProviders, setCurrentProviders] = useState<Provider[]>();
-  const { session } = useUserState.getState();
   const { isLoading, data } = useQuery({
     queryKey: ['sso-list'],
     queryFn: () =>
-      api
+      authApi(apiUrl(ApiEndpoints.user_sso)).then((res) => res.data.data)
-        .get(apiUrl(ApiEndpoints.user_sso), {
-          headers: { 'X-Session-Token': session }
-        })
-        .then((res) => res.data.data)
   });
 
   useEffect(() => {
@@ -281,10 +227,7 @@ function SsoContent({
   }, [auth_settings, data]);
 
   function removeProvider() {
-    api
+    authApi(apiUrl(ApiEndpoints.user_sso), undefined, 'delete')
-      .delete(apiUrl(ApiEndpoints.user_sso), {
-        headers: { 'X-Session-Token': session }
-      })
       .then(() => {
         queryClient.removeQueries({
           queryKey: ['sso-list']