Add redirection to previous page after sign in (canada-ca#1499)

Author: FestiveKyle

frontend/src/App.js

@@ -12,10 +12,10 @@ import { Flex, Link, CSSReset, useToast, Box } from '@chakra-ui/core'
 import { SkipLink } from './SkipLink'
 // import { TwoFactorNotificationBar } from './TwoFactorNotificationBar'
 import { useUserState } from './UserState'
-import { RouteIf } from './RouteIf'
 import { ErrorBoundary } from 'react-error-boundary'
 import { ErrorFallbackMessage } from './ErrorFallbackMessage'
 import { FloatingMenu } from './FloatingMenu'
+import PrivateRoute from './PrivateRoute'
 
 const PageNotFound = lazy(() => import('./PageNotFound'))
 const CreateUserPage = lazy(() => import('./CreateUserPage'))
@@ -141,90 +141,50 @@ export default function App() {
                 component={ResetPasswordPage}
               />
 
-              <Route
-                alternate="/sign-in"
-                path="/organizations"
-                render={({ match: { url } }) => (
-                  <>
-                    <Route path={`${url}`} component={Organizations} exact />
-                    <Route path={`${url}/:orgSlug`} exact>
-                      <ErrorBoundary FallbackComponent={ErrorFallbackMessage}>
-                        <OrganizationDetails />
-                      </ErrorBoundary>
-                    </Route>
-                  </>
-                )}
-              />
+              <PrivateRoute path="/organizations" exact>
+                <Organizations />
+              </PrivateRoute>
 
-              <RouteIf
-                condition={isLoggedIn()}
-                alternate="/sign-in"
-                path="/admin"
-              >
+              <PrivateRoute path="/organizations/:orgSlug" exact>
+                <OrganizationDetails />
+              </PrivateRoute>
+
+              <PrivateRoute path="/admin">
                 <ErrorBoundary FallbackComponent={ErrorFallbackMessage}>
                   <AdminPage />
                 </ErrorBoundary>
-              </RouteIf>
+              </PrivateRoute>
 
-              <RouteIf
-                condition={true}
-                alternate="/sign-in"
-                path="/domains"
-                render={({ match: { url } }) => (
-                  <>
-                    <Route path={`${url}`} component={DomainsPage} exact />
-                    <Route
-                      path={`${url}/:domainSlug`}
-                      component={DmarcGuidancePage}
-                      exact
-                    />
-                    <Route
-                      path={`${url}/:domainSlug/dmarc-report/:period?/:year?`}
-                      component={DmarcReportPage}
-                      exact
-                    />
-                  </>
-                )}
-              />
+              <PrivateRoute path="/domains" exact>
+                <DomainsPage />
+              </PrivateRoute>
 
-              <RouteIf
-                condition={true}
-                alternate="/sign-in"
-                path="/dmarc-summaries"
-                render={({ match: { url } }) => (
-                  <>
-                    <Route
-                      path={`${url}`}
-                      component={DmarcByDomainPage}
-                      exact
-                    />
-                  </>
-                )}
-              />
+              <PrivateRoute path="/domains/:domainSlug" exact>
+                <DmarcGuidancePage />
+              </PrivateRoute>
 
-              <RouteIf
-                condition={isLoggedIn()}
-                alternate="/sign-in"
-                path="/user"
+              <PrivateRoute
+                path="/domains/:domainSlug/dmarc-report/:period?/:year?"
+                exact
               >
-                <UserPage userName={currentUser.userName} />
-              </RouteIf>
+                <DmarcReportPage />
+              </PrivateRoute>
 
-              <RouteIf
-                condition={isLoggedIn()}
-                alternate="/sign-in"
-                path="/two-factor-code"
-              >
+              <PrivateRoute path="/dmarc-summaries" exact>
+                <DmarcByDomainPage />
+              </PrivateRoute>
+
+              <PrivateRoute path="/user">
+                <UserPage username={currentUser.userName} />
+              </PrivateRoute>
+
+              <PrivateRoute path="/two-factor-code">
                 <QRcodePage userName={currentUser.userName} />
-              </RouteIf>
+              </PrivateRoute>
 
-              <RouteIf
-                condition={true}
-                alternate="/sign-in"
-                path="/dmarc-report/:period?/:year?"
-              >
+              <PrivateRoute path="/dmarc-report/:period?/:year?">
                 <DmarcReportPage />
-              </RouteIf>
+              </PrivateRoute>
 
               <Route component={PageNotFound} />
             </Switch>

frontend/src/PrivateRoute.js

@@ -0,0 +1,34 @@
+// From https://reactrouter.com/web/example/auth-workflow
+
+import React from 'react'
+import { node } from 'prop-types'
+import { Route, Redirect, useLocation } from 'react-router-dom'
+import { useUserState } from './UserState'
+
+// A wrapper for <Route> that redirects to the login
+// screen if you're not yet authenticated.
+export default function PrivateRoute({ children, ...rest }) {
+  const { isLoggedIn } = useUserState()
+  const location = useLocation()
+  return (
+    <Route
+      {...rest}
+      render={() =>
+        isLoggedIn() ? (
+          children
+        ) : (
+          <Redirect
+            to={{
+              pathname: '/sign-in',
+              state: { from: location },
+            }}
+          />
+        )
+      }
+    />
+  )
+}
+
+PrivateRoute.propTypes = {
+  children: node,
+}

frontend/src/SignInPage.js

@@ -11,7 +11,7 @@ import {
   Text,
   useToast,
 } from '@chakra-ui/core'
-import { Link as RouteLink, useHistory } from 'react-router-dom'
+import { Link as RouteLink, useHistory, useLocation } from 'react-router-dom'
 import { useMutation } from '@apollo/client'
 import { Formik } from 'formik'
 import { SIGN_IN } from './graphql/mutations'
@@ -26,8 +26,11 @@ export default function SignInPage() {
   const { login } = useUserState()
   const { i18n } = useLingui()
   const history = useHistory()
+  const location = useLocation()
   const toast = useToast()
 
+  const { from } = location.state || { from: { pathname: '/' } }
+
   const validationSchema = object().shape({
     password: string().required(fieldRequirements.password.required.message),
     email: string()
@@ -55,7 +58,7 @@ export default function SignInPage() {
           userName: signIn.result.authResult.user.userName,
         })
         // // redirect to the home page.
-        history.push('/')
+        history.push(from)
         // // Display a welcome message
         toast({
           title: i18n._(t`Sign In.`),
@@ -72,6 +75,7 @@ export default function SignInPage() {
           `/authenticate/${signIn.result.sendMethod.toLowerCase()}/${
             signIn.result.authenticateToken
           }`,
+          { from },
         )
       } else {
         toast({

frontend/src/TwoFactorAuthenticatePage.js

@@ -3,7 +3,7 @@ import { t, Trans } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import { number, object } from 'yup'
 import { Box, Heading, useToast, Stack } from '@chakra-ui/core'
-import { useHistory, useParams } from 'react-router-dom'
+import { useHistory, useParams, useLocation } from 'react-router-dom'
 import { useMutation } from '@apollo/client'
 import { Formik } from 'formik'
 import { useUserState } from './UserState'
@@ -15,9 +15,11 @@ import { TrackerButton } from './TrackerButton'
 export default function TwoFactorAuthenticatePage() {
   const { login } = useUserState()
   const history = useHistory()
+  const location = useLocation()
   const toast = useToast()
   const { i18n } = useLingui()
   const { sendMethod, authenticateToken } = useParams()
+  const { from } = location.state || { from: { pathname: '/' } }
 
   const validationSchema = object().shape({
     twoFactorCode: number()
@@ -44,7 +46,7 @@ export default function TwoFactorAuthenticatePage() {
         userName: authenticate.authResult.user.userName,
       })
       // // redirect to the home page.
-      history.push('/')
+      history.replace(from)
       // // Display a welcome message
       toast({
         title: i18n._(t`Sign In.`),