Merge pull request #325 from blockscout/invalid-api-token

redirect to auth page if user has token but api responses with unauth…

lib/hooks/useRedirectForInvalidAuthToken.tsx

+import * as Sentry from '@sentry/react';
+import { useQueryClient } from '@tanstack/react-query';
+import React from 'react';
+
+import { QueryKeys } from 'types/client/accountQueries';
+
+import * as cookies from 'lib/cookies';
+import link from 'lib/link/link';
+
+export interface ErrorType {
+  error?: {
+    status: Response['status'];
+    statusText: Response['statusText'];
+  };
+}
+
+export default function useRedirectForInvalidAuthToken() {
+  const queryClient = useQueryClient();
+
+  const state = queryClient.getQueryState<unknown, ErrorType>([ QueryKeys.profile ]);
+  const errorStatus = state?.error?.error?.status;
+
+  React.useEffect(() => {
+    if (errorStatus === 401) {
+      const apiToken = cookies.get(cookies.NAMES.API_TOKEN);
+
+      if (apiToken) {
+        Sentry.captureException(new Error('Invalid api token'), { tags: { source: 'fetch' } });
+        const authURL = link('auth');
+        window.location.assign(authURL);
+      }
+    }
+  }, [ errorStatus ]);
+}

ui/pages/ApiKeys.tsx

@@ -7,6 +7,7 @@ import { QueryKeys } from 'types/client/accountQueries';
 
 import useFetch from 'lib/hooks/useFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
 import { space } from 'lib/html-entities';
 import ApiKeyModal from 'ui/apiKey/ApiKeyModal/ApiKeyModal';
 import ApiKeyListItem from 'ui/apiKey/ApiKeyTable/ApiKeyListItem';
@@ -27,6 +28,7 @@ const ApiKeysPage: React.FC = () => {
   const deleteModalProps = useDisclosure();
   const isMobile = useIsMobile();
   const fetch = useFetch();
+  useRedirectForInvalidAuthToken();
 
   const [ apiKeyModalData, setApiKeyModalData ] = useState<ApiKey>();
   const [ deleteModalData, setDeleteModalData ] = useState<ApiKey>();

ui/pages/CustomAbi.tsx

@@ -7,6 +7,7 @@ import { QueryKeys } from 'types/client/accountQueries';
 
 import useFetch from 'lib/hooks/useFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
 import CustomAbiModal from 'ui/customAbi/CustomAbiModal/CustomAbiModal';
 import CustomAbiListItem from 'ui/customAbi/CustomAbiTable/CustomAbiListItem';
 import CustomAbiTable from 'ui/customAbi/CustomAbiTable/CustomAbiTable';
@@ -24,6 +25,7 @@ const CustomAbiPage: React.FC = () => {
   const deleteModalProps = useDisclosure();
   const isMobile = useIsMobile();
   const fetch = useFetch();
+  useRedirectForInvalidAuthToken();
 
   const [ customAbiModalData, setCustomAbiModalData ] = useState<CustomAbi>();
   const [ deleteModalData, setDeleteModalData ] = useState<CustomAbi>();

ui/pages/MyProfile.tsx

@@ -2,6 +2,7 @@ import { VStack, FormControl, FormLabel, Input } from '@chakra-ui/react';
 import React from 'react';
 
 import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
+import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
 import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import Page from 'ui/shared/Page/Page';
@@ -10,6 +11,7 @@ import UserAvatar from 'ui/shared/UserAvatar';
 
 const MyProfile = () => {
   const { data, isLoading, isError, isFetched } = useFetchProfileInfo();
+  useRedirectForInvalidAuthToken();
 
   const content = (() => {
     if (isLoading) {

ui/pages/PrivateTags.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
+import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
 import PrivateAddressTags from 'ui/privateTags/PrivateAddressTags';
 import PrivateTransactionTags from 'ui/privateTags/PrivateTransactionTags';
 import Page from 'ui/shared/Page/Page';
@@ -14,6 +15,8 @@ const TABS: Array<RoutedTab> = [
 ];
 
 const PrivateTags = () => {
+  useRedirectForInvalidAuthToken();
+
   return (
     <Page>
       <PageTitle text="Private tags"/>

ui/pages/PublicTags.tsx

@@ -6,6 +6,7 @@ import type { PublicTag } from 'types/api/account';
 
 import eastArrowIcon from 'icons/arrows/east.svg';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
 import useToast from 'lib/hooks/useToast';
 import PublicTagsData from 'ui/publicTags/PublicTagsData';
 import PublicTagsForm from 'ui/publicTags/PublicTagsForm/PublicTagsForm';
@@ -27,6 +28,7 @@ const PublicTagsComponent: React.FC = () => {
 
   const toast = useToast();
   const isMobile = useIsMobile();
+  useRedirectForInvalidAuthToken();
 
   const showToast = useCallback((action: TToastAction) => {
     toast({

ui/pages/Watchlist.tsx

@@ -7,6 +7,7 @@ import { QueryKeys } from 'types/client/accountQueries';
 
 import useFetch from 'lib/hooks/useFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import Page from 'ui/shared/Page/Page';
@@ -26,6 +27,7 @@ const WatchList: React.FC = () => {
   const deleteModalProps = useDisclosure();
   const isMobile = useIsMobile();
   const fetch = useFetch();
+  useRedirectForInvalidAuthToken();
 
   const [ addressModalData, setAddressModalData ] = useState<TWatchlistItem>();
   const [ deleteModalData, setDeleteModalData ] = useState<TWatchlistItem>();