Merge pull request #406 from blockscout/auth-return-url

add return path for auth links

lib/hooks/useLoginUrl.tsx

+import { useRouter } from 'next/router';
+
+import link from 'lib/link/link';
+
+export default function useLoginUrl() {
+  const router = useRouter();
+  return link('auth', {}, { path: router.asPath });
+}

lib/hooks/useRedirectForInvalidAuthToken.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import { QueryKeys } from 'types/client/accountQueries';
 
 import * as cookies from 'lib/cookies';
-import link from 'lib/link/link';
+import useLoginUrl from 'lib/hooks/useLoginUrl';
 
 export interface ErrorType {
   error?: {
@@ -19,6 +19,7 @@ export default function useRedirectForInvalidAuthToken() {
 
   const state = queryClient.getQueryState<unknown, ErrorType>([ QueryKeys.profile ]);
   const errorStatus = state?.error?.error?.status;
+  const loginUrl = useLoginUrl();
 
   React.useEffect(() => {
     if (errorStatus === 401) {
@@ -26,9 +27,8 @@ export default function useRedirectForInvalidAuthToken() {
 
       if (apiToken) {
         Sentry.captureException(new Error('Invalid api token'), { tags: { source: 'fetch' } });
-        const authURL = link('auth');
-        window.location.assign(authURL);
+        window.location.assign(loginUrl);
       }
     }
-  }, [ errorStatus ]);
+  }, [ errorStatus, loginUrl ]);
 }

middleware.ts

@@ -21,7 +21,7 @@ export function middleware(req: NextRequest) {
   const apiToken = req.cookies.get(NAMES.API_TOKEN);
 
   if ((isAccountRoute || isProfileRoute) && !apiToken && appConfig.isAccountSupported) {
-    const authUrl = link('auth');
+    const authUrl = link('auth', undefined, { path: req.nextUrl.pathname });
     return NextResponse.redirect(authUrl);
   }
 

ui/snippets/profileMenu/ProfileMenuDesktop.tsx

@@ -2,13 +2,13 @@ import { Popover, PopoverContent, PopoverBody, PopoverTrigger, Button } from '@c
 import React from 'react';
 
 import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
-import link from 'lib/link/link';
+import useLoginUrl from 'lib/hooks/useLoginUrl';
 import UserAvatar from 'ui/shared/UserAvatar';
 import ProfileMenuContent from 'ui/snippets/profileMenu/ProfileMenuContent';
 
 const ProfileMenuDesktop = () => {
   const { data, isFetched } = useFetchProfileInfo();
-  const loginUrl = link('auth');
+  const loginUrl = useLoginUrl();
 
   return (
     <Popover openDelay={ 300 } placement="bottom-end" gutter={ 10 } isLazy>

ui/snippets/profileMenu/ProfileMenuMobile.tsx

@@ -2,7 +2,7 @@ import { Flex, Box, Drawer, DrawerOverlay, DrawerContent, DrawerBody, useDisclos
 import React from 'react';
 
 import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
-import link from 'lib/link/link';
+import useLoginUrl from 'lib/hooks/useLoginUrl';
 import UserAvatar from 'ui/shared/UserAvatar';
 import ColorModeToggler from 'ui/snippets/header/ColorModeToggler';
 import ProfileMenuContent from 'ui/snippets/profileMenu/ProfileMenuContent';
@@ -11,7 +11,7 @@ const ProfileMenuMobile = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   const { data, isFetched } = useFetchProfileInfo();
-  const loginUrl = link('auth');
+  const loginUrl = useLoginUrl();
 
   return (
     <>