Redirect user after authenticating through social auth

awx/ui_next/src/App.jsx

@@ -6,6 +6,7 @@ import {
   Route,
   Switch,
   Redirect,
+  useHistory,
 } from 'react-router-dom';
 import { ErrorBoundary } from 'react-error-boundary';
 import { I18nProvider } from '@lingui/react';
@@ -27,6 +28,7 @@ import Metrics from './screens/Metrics';
 
 import getRouteConfig from './routeConfig';
 import SubscriptionEdit from './screens/Setting/Subscription/SubscriptionEdit';
+import { SESSION_REDIRECT_URL } from './constants';
 
 function ErrorFallback({ error }) {
   return (
@@ -84,7 +86,7 @@ const AuthorizedRoutes = ({ routeConfig }) => {
 };
 
 const ProtectedRoute = ({ children, ...rest }) => {
-  const { authRedirectTo, setAuthRedirectTo } = useSession();
+  const { setAuthRedirectTo } = useSession();
   const { pathname } = useLocation();
 
   if (isAuthenticated(document.cookie)) {
@@ -97,11 +99,13 @@ const ProtectedRoute = ({ children, ...rest }) => {
     );
   }
 
-  if (authRedirectTo !== null) setAuthRedirectTo(pathname);
+  setAuthRedirectTo(pathname);
   return <Redirect to="/login" />;
 };
 
 function App() {
+  const history = useHistory();
+  const { hash, search, pathname } = useLocation();
   let language = getLanguageWithoutRegionCode(navigator);
   if (!Object.keys(locales).includes(language)) {
     // If there isn't a string catalog available for the browser's
@@ -112,7 +116,12 @@ function App() {
     dynamicActivate(language);
   }, [language]);
 
-  const { hash, search, pathname } = useLocation();
+  const redirectURL = window.sessionStorage.getItem(SESSION_REDIRECT_URL);
+  if (redirectURL) {
+    window.sessionStorage.removeItem(SESSION_REDIRECT_URL);
+    if (redirectURL !== '/' || redirectURL !== '/home')
+      history.replace(redirectURL);
+  }
 
   return (
     <I18nProvider i18n={i18n}>

awx/ui_next/src/constants.js

@@ -9,3 +9,4 @@ export const JOB_TYPE_URL_SEGMENTS = {
 };
 
 export const SESSION_TIMEOUT_KEY = 'awx-session-timeout';
+export const SESSION_REDIRECT_URL = 'awx-redirect-url';

awx/ui_next/src/contexts/Session.jsx

@@ -54,7 +54,7 @@ function useStorage(key) {
     }
   });
   const setValue = val => {
-    window.localStorage.setItem(key, val);
+    window.localStorage.setItem(key, JSON.stringify(val));
     setStorageVal(val);
   };
   return [storageVal, setValue];
@@ -70,16 +70,18 @@ function SessionProvider({ children }) {
   const sessionIntervalId = useRef();
   const [sessionTimeout, setSessionTimeout] = useStorage(SESSION_TIMEOUT_KEY);
   const [sessionCountdown, setSessionCountdown] = useState(0);
-  const [authRedirectTo, setAuthRedirectTo] = useState('/home');
+  const [authRedirectTo, setAuthRedirectTo] = useState('/');
 
   const logout = useCallback(async () => {
-    if (!isSessionExpired.current) setAuthRedirectTo(null);
+    if (!isSessionExpired.current) {
+      history.replace('/');
+    }
     await RootAPI.logout();
-    setSessionTimeout(null);
+    setSessionTimeout(0);
     setSessionCountdown(0);
     clearTimeout(sessionTimeoutId.current);
     clearInterval(sessionIntervalId.current);
-  }, [setSessionTimeout, setSessionCountdown]);
+  }, [setSessionTimeout, setSessionCountdown, history]);
 
   useEffect(() => {
     if (!isAuthenticated(document.cookie)) {
@@ -104,6 +106,7 @@ function SessionProvider({ children }) {
       }, 1000);
     };
 
+    setSessionCountdown(0);
     clearTimeout(sessionTimeoutId.current);
     clearInterval(sessionIntervalId.current);
 

awx/ui_next/src/screens/Login/Login.jsx

@@ -30,6 +30,7 @@ import { AuthAPI, RootAPI } from '../../api';
 import AlertModal from '../../components/AlertModal';
 import ErrorDetail from '../../components/ErrorDetail';
 import { useSession } from '../../contexts/Session';
+import { SESSION_REDIRECT_URL } from '../../constants';
 
 const loginLogoSrc = '/static/media/logo-login.svg';
 
@@ -96,6 +97,7 @@ function AWXLogin({ alt, isAuthenticated }) {
   useEffect(() => {
     fetchCustomLoginInfo();
   }, [fetchCustomLoginInfo]);
+
   const {
     isLoading: isAuthenticating,
     error: authenticationError,
@@ -148,6 +150,10 @@ function AWXLogin({ alt, isAuthenticated }) {
     />
   );
 
+  function setSessionRedirect() {
+    window.sessionStorage.setItem(SESSION_REDIRECT_URL, authRedirectTo);
+  }
+
   return (
     <Login header={Header} footer={Footer}>
       <LoginMainHeader
@@ -221,6 +227,7 @@ function AWXLogin({ alt, isAuthenticated }) {
                       data-cy="social-auth-azure"
                       href={loginUrl}
                       key={authKey}
+                      onClick={setSessionRedirect}
                     >
                       <Tooltip content={t`Sign in with Azure AD`}>
                         <AzureIcon />
@@ -234,6 +241,7 @@ function AWXLogin({ alt, isAuthenticated }) {
                       data-cy="social-auth-github"
                       href={loginUrl}
                       key={authKey}
+                      onClick={setSessionRedirect}
                     >
                       <Tooltip content={t`Sign in with GitHub`}>
                         <GithubIcon />
@@ -247,6 +255,7 @@ function AWXLogin({ alt, isAuthenticated }) {
                       data-cy="social-auth-github-org"
                       href={loginUrl}
                       key={authKey}
+                      onClick={setSessionRedirect}
                     >
                       <Tooltip content={t`Sign in with GitHub Organizations`}>
                         <GithubIcon />
@@ -260,6 +269,7 @@ function AWXLogin({ alt, isAuthenticated }) {
                       data-cy="social-auth-github-team"
                       href={loginUrl}
                       key={authKey}
+                      onClick={setSessionRedirect}
                     >
                       <Tooltip content={t`Sign in with GitHub Teams`}>
                         <GithubIcon />
@@ -273,6 +283,7 @@ function AWXLogin({ alt, isAuthenticated }) {
                       data-cy="social-auth-github-enterprise"
                       href={loginUrl}
                       key={authKey}
+                      onClick={setSessionRedirect}
                     >
                       <Tooltip content={t`Sign in with GitHub Enterprise`}>
                         <GithubIcon />
@@ -286,6 +297,7 @@ function AWXLogin({ alt, isAuthenticated }) {
                       data-cy="social-auth-github-enterprise-org"
                       href={loginUrl}
                       key={authKey}
+                      onClick={setSessionRedirect}
                     >
                       <Tooltip
                         content={t`Sign in with GitHub Enterprise Organizations`}
@@ -301,6 +313,7 @@ function AWXLogin({ alt, isAuthenticated }) {
                       data-cy="social-auth-github-enterprise-team"
                       href={loginUrl}
                       key={authKey}
+                      onClick={setSessionRedirect}
                     >
                       <Tooltip
                         content={t`Sign in with GitHub Enterprise Teams`}
@@ -316,6 +329,7 @@ function AWXLogin({ alt, isAuthenticated }) {
                       data-cy="social-auth-google"
                       href={loginUrl}
                       key={authKey}
+                      onClick={setSessionRedirect}
                     >
                       <Tooltip content={t`Sign in with Google`}>
                         <GoogleIcon />
@@ -330,6 +344,7 @@ function AWXLogin({ alt, isAuthenticated }) {
                       data-cy="social-auth-saml"
                       href={loginUrl}
                       key={authKey}
+                      onClick={setSessionRedirect}
                     >
                       <Tooltip
                         content={