feat(ui): added new auth guard with react-query and axios

frontend/src/hooks/api/auth/index.tsx

@@ -0,0 +1 @@
+export { useGetAuthToken } from './queries';

frontend/src/hooks/api/auth/queries.tsx

@@ -0,0 +1,26 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { apiRequest } from '@app/config/request';
+import { setAuthToken } from '@app/reactQuery';
+
+import { GetAuthTokenAPI } from './types';
+
+const authKeys = {
+  getAuthToken: ['token'] as const
+};
+
+// Refresh token is set as cookie when logged in
+// Using that we fetch the auth bearer token needed for auth calls
+const fetchAuthToken = async () => {
+  const { data } = await apiRequest.post<GetAuthTokenAPI>('/api/v1/auth/token', undefined, {
+    withCredentials: true
+  });
+
+  return data;
+};
+
+export const useGetAuthToken = () =>
+  useQuery(authKeys.getAuthToken, fetchAuthToken, {
+    onSuccess: (data) => setAuthToken(data.token),
+    retry: 0
+  });

frontend/src/hooks/api/auth/types.ts

@@ -0,0 +1,3 @@
+export type GetAuthTokenAPI = {
+  token: string;
+};

frontend/src/hooks/api/index.tsx

@@ -0,0 +1 @@
+export { useGetAuthToken } from './auth';

frontend/src/hooks/index.ts

@@ -1 +1,2 @@
 export { usePopUp } from './usePopUp';
+export { useToggle } from './useToggle';

frontend/src/hooks/useToggle.tsx

@@ -0,0 +1,30 @@
+import { useCallback, useState } from 'react';
+
+type VoidFn = () => void;
+
+type UseToggleReturn = [
+  boolean,
+  {
+    on: VoidFn;
+    off: VoidFn;
+    toggle: VoidFn;
+  }
+];
+
+export const useToggle = (initialState = false): UseToggleReturn => {
+  const [value, setValue] = useState(initialState);
+
+  const on = useCallback(() => {
+    setValue(true);
+  }, []);
+
+  const off = useCallback(() => {
+    setValue(false);
+  }, []);
+
+  const toggle = useCallback((isOpen?: boolean) => {
+    setValue((prev) => (typeof isOpen === 'boolean' ? isOpen : !prev));
+  }, []);
+
+  return [value, { on, off, toggle }];
+};