feat: automatically redirect a user back to their originally requested URL after login (#2838)

src/admin/components/Routes.tsx

@@ -315,7 +315,7 @@ const Routes: React.FC = () => {
                         <Unauthorized />
                       )}
                     </Fragment>
-                  ) : <Redirect to={`${match.url}/login`} />}
+                  ) : <Redirect to={`${match.url}/login?redirect=${encodeURIComponent(window.location.pathname)}`} />}
                 </Route>
                 <Route path={`${match.url}*`}>
                   <NotFound />

src/admin/components/utilities/Auth/index.tsx

@@ -61,7 +61,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
           setUser(json.user);
         } else {
           setUser(null);
-          push(`${admin}${logoutInactivityRoute}`);
+          push(`${admin}${logoutInactivityRoute}?redirect=${encodeURIComponent(window.location.pathname)}`);
         }
       }, 1000);
     }
@@ -159,7 +159,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     if (remainingTime > 0) {
       forceLogOut = setTimeout(() => {
         setUser(null);
-        push(`${admin}${logoutInactivityRoute}`);
+        push(`${admin}${logoutInactivityRoute}?redirect=${encodeURIComponent(window.location.pathname)}`);
         closeAllModals();
       }, Math.min(remainingTime * 1000, maxTimeoutTime));
     }

src/admin/components/views/Login/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link, useHistory } from 'react-router-dom';
+import { Link, useHistory, useLocation } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
 import { useConfig } from '../../utilities/Config';
 import { useAuth } from '../../utilities/Auth';
@@ -41,10 +41,16 @@ const Login: React.FC = () => {
 
   const collection = collections.find(({ slug }) => slug === userSlug);
 
+  // Fetch 'redirect' from the query string which denotes the URL the user originally tried to visit. This is set in the Routes.tsx file when a user tries to access a protected route and is redirected to the login screen.
+  const query = new URLSearchParams(useLocation().search);
+  const redirect = query.get('redirect');
+
+
   const onSuccess = (data) => {
     if (data.token) {
       setToken(data.token);
-      history.push(admin);
+
+      history.push(redirect || admin);
     }
   };
 

src/admin/components/views/Logout/index.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useLocation } from 'react-router-dom';
 import { useConfig } from '../../utilities/Config';
 import { useAuth } from '../../utilities/Auth';
 import Minimal from '../../templates/Minimal';
@@ -17,6 +18,10 @@ const Logout: React.FC<{inactivity?: boolean}> = (props) => {
   const { routes: { admin } } = useConfig();
   const { t } = useTranslation('authentication');
 
+  // Fetch 'redirect' from the query string which denotes the URL the user originally tried to visit. This is set in the Routes.tsx file when a user tries to access a protected route and is redirected to the login screen.
+  const query = new URLSearchParams(useLocation().search);
+  const redirect = query.get('redirect');
+
   useEffect(() => {
     logOut();
   }, [logOut]);
@@ -39,7 +44,7 @@ const Logout: React.FC<{inactivity?: boolean}> = (props) => {
         <Button
           el="anchor"
           buttonStyle="secondary"
-          url={`${admin}/login`}
+          url={`${admin}/login${redirect && redirect.length > 0 ? `?redirect=${encodeURIComponent(redirect)}` : ''}`}
         >
           {t('logBackIn')}
         </Button>