From 951f6d46367fd6b41c667cf0616fe3a27a29dbf1 Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Wed, 26 May 2021 17:37:29 -0400 Subject: [PATCH] Redirect user after authenticating through social auth --- awx/ui_next/src/App.jsx | 15 ++++++++++++--- awx/ui_next/src/constants.js | 1 + awx/ui_next/src/contexts/Session.jsx | 13 ++++++++----- awx/ui_next/src/screens/Login/Login.jsx | 15 +++++++++++++++ 4 files changed, 36 insertions(+), 8 deletions(-) diff --git a/awx/ui_next/src/App.jsx b/awx/ui_next/src/App.jsx index 5379a7dd39..49b2c82987 100644 --- a/awx/ui_next/src/App.jsx +++ b/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 ; }; 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 ( diff --git a/awx/ui_next/src/constants.js b/awx/ui_next/src/constants.js index f157c26d49..092bdcd5b0 100644 --- a/awx/ui_next/src/constants.js +++ b/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'; diff --git a/awx/ui_next/src/contexts/Session.jsx b/awx/ui_next/src/contexts/Session.jsx index f29a8a3770..6d9b300cf6 100644 --- a/awx/ui_next/src/contexts/Session.jsx +++ b/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); diff --git a/awx/ui_next/src/screens/Login/Login.jsx b/awx/ui_next/src/screens/Login/Login.jsx index a59083a7a1..d5f75d7bb5 100644 --- a/awx/ui_next/src/screens/Login/Login.jsx +++ b/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 ( @@ -234,6 +241,7 @@ function AWXLogin({ alt, isAuthenticated }) { data-cy="social-auth-github" href={loginUrl} key={authKey} + onClick={setSessionRedirect} > @@ -247,6 +255,7 @@ function AWXLogin({ alt, isAuthenticated }) { data-cy="social-auth-github-org" href={loginUrl} key={authKey} + onClick={setSessionRedirect} > @@ -260,6 +269,7 @@ function AWXLogin({ alt, isAuthenticated }) { data-cy="social-auth-github-team" href={loginUrl} key={authKey} + onClick={setSessionRedirect} > @@ -273,6 +283,7 @@ function AWXLogin({ alt, isAuthenticated }) { data-cy="social-auth-github-enterprise" href={loginUrl} key={authKey} + onClick={setSessionRedirect} > @@ -286,6 +297,7 @@ function AWXLogin({ alt, isAuthenticated }) { data-cy="social-auth-github-enterprise-org" href={loginUrl} key={authKey} + onClick={setSessionRedirect} > @@ -330,6 +344,7 @@ function AWXLogin({ alt, isAuthenticated }) { data-cy="social-auth-saml" href={loginUrl} key={authKey} + onClick={setSessionRedirect} >