Linger on auth_callback page until login is complete

Verifying the auth token and obtaining user metadata involves some
async HTTP requests in the background.  If we remove the auth callback
information from the window location too soon, then the UserManager
will not complete the login process.  This currently generally works
because this process tends to complete before the /info and /tenant/info
calls to Zuul.  However, future changes to support a read-only
authentication requirement will need to alter this sequence.

This approach is more robust and easier to follow.  Essentially the
sequence is:
* Return from IdP to /auth_callback
* If /auth_callback is in our location, short-circuit normal rendering
  and render only the AuthCallbackPage
* When background processing is complete, onSignIn will be called and
  we will set the user.redirect property in redux.
* AuthCallbackPage has an effect callback on user.redirect which will
  cause it to perform the redirect away from auth_callback once
  signin is complete.

This process leaves the AuthCallbackPage on the screen a little longer,
so this change updates it to use the newer EmptyPage and Spinner elements
that we have been using elsewhere, so if users see it, it appears more
intentional.

Change-Id: I206c020626c7fd73e58efc29dd50376203679721

web/src/App.jsx

@@ -69,6 +69,8 @@ import { fetchConfigErrorsAction } from './actions/configErrors'
 import { routes } from './routes'
 import { setTenantAction } from './actions/tenant'
 import { configureAuthFromTenant, configureAuthFromInfo } from './actions/auth'
+import { getHomepageUrl } from './api'
+import AuthCallbackPage from './pages/AuthCallback'
 
 class App extends React.Component {
   static propTypes = {
@@ -82,6 +84,7 @@ class App extends React.Component {
     dispatch: PropTypes.func,
     isKebabDropdownOpen: PropTypes.bool,
     user: PropTypes.object,
+    auth: PropTypes.object,
   }
 
   state = {
@@ -117,6 +120,12 @@ class App extends React.Component {
     const { info, tenant } = this.props
     const allRoutes = []
 
+    if ((window.location.origin + window.location.pathname) ===
+        (getHomepageUrl() + 'auth_callback')) {
+      // Sit on the auth callback page until login and token
+      // validation is complete (it will internally redirect when complete)
+      return <AuthCallbackPage/>
+    }
     if (info.isFetching) {
       return <Fetching />
     }
@@ -482,6 +491,7 @@ export default withRouter(connect(
     info: state.info,
     tenant: state.tenant,
     timezone: state.timezone,
-    user: state.user
+    user: state.user,
+    auth: state.auth,
   })
 )(App))

web/src/ZuulAuthProvider.jsx

@@ -67,7 +67,8 @@ class ZuulAuthProvider extends React.Component {
       onSignIn: async (user) => {
         // Update redux with the logged in state and send the
         // credentials to any other tabs.
-        this.props.dispatch(userLoggedIn(user))
+        const redirect = localStorage.getItem('zuul_auth_redirect')
+        this.props.dispatch(userLoggedIn(user, redirect))
         this.props.channel.postMessage({
           type: 'signIn',
           auth_params: auth_params,

web/src/actions/user.js

@@ -36,11 +36,12 @@ export const fetchUserACLRequest = (tenant) => ({
   tenant: tenant,
 })
 
-export const userLoggedIn = (user) => (dispatch) => {
+export const userLoggedIn = (user, redirect) => (dispatch) => {
   dispatch({
     type: USER_LOGGED_IN,
     user: user,
     token: getToken(user),
+    redirect: redirect,
   })
 }
 

web/src/pages/AuthCallback.jsx

@@ -13,29 +13,55 @@
 // under the License.
 
 import React, { useEffect } from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
 import { useHistory } from 'react-router-dom'
-
-import { Fetching } from '../containers/Fetching'
+import {
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateIcon,
+  Spinner,
+  Title,
+} from '@patternfly/react-core'
+import {
+  FingerprintIcon,
+} from '@patternfly/react-icons'
 
 // Several pages use the location hash in a way that would be
 // difficult to disentangle from the OIDC callback parameters.  This
 // dedicated callback page accepts the OIDC params and then internally
 // redirects to the page we saved before redirecting to the IDP.
 
-function AuthCallbackPage() {
-  let history = useHistory()
+function AuthCallbackPage(props) {
+  const history = useHistory()
+  const { user } = props
 
   useEffect(() => {
-    const redirect = localStorage.getItem('zuul_auth_redirect')
-    history.push(redirect)
-  }, [history])
+    if (user.redirect) {
+      history.push(user.redirect)
+    }
+  }, [history, user])
 
   return (
     <>
-      <div>Login successful. You will be redirected shortly...</div>
-      <Fetching />
+        <EmptyState>
+          <EmptyStateIcon icon={FingerprintIcon} />
+          <Title headingLevel="h1">Login in progress</Title>
+          <EmptyStateBody>
+            <p>
+              You will be redirected shortly...
+            </p>
+            <Spinner size="xl" />
+          </EmptyStateBody>
+        </EmptyState>
     </>
   )
 }
 
-export default AuthCallbackPage
+AuthCallbackPage.propTypes = {
+    user: PropTypes.object,
+}
+
+export default connect((state) => ({
+  user: state.user,
+}))(AuthCallbackPage)

web/src/reducers/user.js

@@ -29,6 +29,7 @@ export default (state = {
   scope: [],
   isAdmin: false,
   tenant: null,
+  redirect: null,
 }, action) => {
   switch (action.type) {
     case USER_LOGGED_IN: {
@@ -36,6 +37,7 @@ export default (state = {
         isFetching: false,
         data: action.user,
         token: action.token,
+        redirect: action.redirect,
         scope: [],
         isAdmin: false
       }
@@ -45,6 +47,7 @@ export default (state = {
         isFetching: false,
         data: null,
         token: null,
+        redirect: null,
         scope: [],
         isAdmin: false
       }

web/src/routes.js

@@ -34,7 +34,6 @@ import ConfigErrorsPage from './pages/ConfigErrors'
 import TenantsPage from './pages/Tenants'
 import StreamPage from './pages/Stream'
 import OpenApiPage from './pages/OpenApi'
-import AuthCallbackPage from './pages/AuthCallback'
 
 // The Route object are created in the App component.
 // Object with a title are created in the menu.
@@ -162,11 +161,7 @@ const routes = () => [
     component: ComponentsPage,
     noTenantPrefix: true,
   },
-  {
-    to: '/auth_callback',
-    component: AuthCallbackPage,
-    noTenantPrefix: true,
-  },
+  // auth_callback is handled in App.jsx
 ]
 
 export { routes }