Merge pull request #1127 from isaacphysics/handle-session-expiry

Handle session expiry

Author: jsharkey13

src/IsaacAppTypes.tsx

@@ -39,7 +39,7 @@ export type Action =
     | {type: ACTION_TYPE.USER_SNAPSHOT_PARTIAL_UPDATE; userSnapshot: UserSnapshot}
 
     | {type: ACTION_TYPE.CURRENT_USER_REQUEST}
-    | {type: ACTION_TYPE.CURRENT_USER_RESPONSE_SUCCESS; user: Immutable<ApiTypes.RegisteredUserDTO>}
+    | {type: ACTION_TYPE.CURRENT_USER_RESPONSE_SUCCESS; user: Immutable<LoggedInUser>}
     | {type: ACTION_TYPE.CURRENT_USER_RESPONSE_FAILURE}
     | {type: ACTION_TYPE.USER_DETAILS_UPDATE_REQUEST}
     | {type: ACTION_TYPE.USER_DETAILS_UPDATE_RESPONSE_SUCCESS; user: Immutable<ApiTypes.RegisteredUserDTO>}
@@ -271,7 +271,7 @@ export interface CanAttemptQuestionTypeDTO {
     remainingAttempts?: number;
 }
 
-export type LoggedInUser = {loggedIn: true} & ApiTypes.RegisteredUserDTO;
+export type LoggedInUser = {loggedIn: true, sessionExpiry?: number} & ApiTypes.RegisteredUserDTO;
 export type PotentialUser = LoggedInUser | {loggedIn: false; requesting?: boolean;};
 
 export interface ValidationUser extends ApiTypes.RegisteredUserDTO {

src/app/components/navigation/IsaacApp.tsx

@@ -79,6 +79,7 @@ import {MyGameboards} from "../pages/MyGameboards";
 import {GameboardFilter} from "../pages/GameboardFilter";
 import {ScrollToTop} from "../site/ScrollToTop";
 import {QuestionFinder} from "../pages/QuestionFinder";
+import {SessionCookieExpired} from "../pages/SessionCookieExpired";
 
 const ContentEmails = lazy(() => import('../pages/ContentEmails'));
 const MyProgress = lazy(() => import('../pages/MyProgress'));
@@ -155,6 +156,7 @@ export const IsaacApp = () => {
                         {/* Errors; these paths work but aren't really used */}
                         <Route exact path={serverError ? undefined : "/error"} component={ServerError} />
                         <Route exact path={goneAwayError ? undefined : "/error_stale"} component={SessionExpired} />
+                        <Route exact path={"/error_expired"} component={SessionCookieExpired} />
                         <TrackedRoute exact path={"/auth_error"} component={AuthError} />
                         <TrackedRoute exact path={"/consistency-error"} component={ConsistencyError} />
 

src/app/components/pages/SessionCookieExpired.tsx

@@ -0,0 +1,18 @@
+import React, {useEffect} from "react";
+import {Button, Container} from "reactstrap";
+import {TitleAndBreadcrumb} from "../elements/TitleAndBreadcrumb";
+import {SITE_TITLE, trackEvent} from "../../services";
+
+export const SessionCookieExpired = () => {
+    useEffect(() => {
+        trackEvent("exception", { props: { description: `cookie_expired`, fatal: true } });
+    }, []);
+
+    return <Container>
+        <div>
+            <TitleAndBreadcrumb breadcrumbTitleOverride="Session expired" currentPageTitle="Your session has expired"/>
+            <p className="pb-2">{`Sorry, your ${SITE_TITLE} session has expired. Please log in again to continue.`}</p>
+            <Button color="primary" href="/login">Back to login</Button>
+        </div>
+    </Container>;
+};

src/app/services/constants.ts

@@ -171,6 +171,7 @@ export enum ACTION_TYPE {
     AUTHENTICATION_HANDLE_CALLBACK = "AUTHENTICATION_HANDLE_CALLBACK",
 
     USER_CONSISTENCY_ERROR = "USER_CONSISTENCY_ERROR",
+    USER_SESSION_EXPIRED = "USER_SESSION_EXPIRED",
 
     GROUP_GET_MEMBERSHIPS_REQUEST = "GROUP_GET_MEMBERSHIP_REQUEST",
     GROUP_GET_MEMBERSHIPS_RESPONSE_SUCCESS = "GROUP_GET_MEMBERSHIP_RESPONSE_SUCCESS",

src/app/state/actions/index.tsx

@@ -190,7 +190,10 @@ export const requestCurrentUser = () => async (dispatch: Dispatch<Action>) => {
                 dispatch(getUserPreferences() as any)
             ]);
         }
-        dispatch({type: ACTION_TYPE.CURRENT_USER_RESPONSE_SUCCESS, user: currentUser.data});
+        const expiry = currentUser.headers["x-session-expires"] ?
+            Date.parse(currentUser.headers["x-session-expires"]) : undefined;
+        dispatch({type: ACTION_TYPE.CURRENT_USER_RESPONSE_SUCCESS,
+            user: {loggedIn: true, sessionExpiry: expiry, ...currentUser.data}});
     } catch (e) {
         dispatch({type: ACTION_TYPE.CURRENT_USER_RESPONSE_FAILURE});
     }
@@ -395,11 +398,8 @@ export const logInUser = (provider: AuthenticationProvider, credentials: Credent
                 return;
             }
         }
-        // Request user preferences, as we do in the requestCurrentUser action:
-        await Promise.all([
-            dispatch(getUserAuthSettings() as any),
-            dispatch(getUserPreferences() as any)
-        ]);
+        // requestCurrentUser gives us extra information like auth settings, preferences and time until session expiry
+        dispatch(requestCurrentUser() as any);
         dispatch({type: ACTION_TYPE.USER_LOG_IN_RESPONSE_SUCCESS, user: result.data});
         history.replace(persistence.pop(KEY.AFTER_AUTH_PATH) || "/");
     } catch (e: any) {

src/app/state/middleware/userConsistencyChecker.tsx

@@ -1,4 +1,4 @@
-import {AnyAction, Dispatch, Middleware, MiddlewareAPI} from "redux";
+import {Dispatch, Middleware, MiddlewareAPI} from "redux";
 import {RegisteredUserDTO} from "../../../IsaacApiTypes";
 import {ACTION_TYPE, isDefined} from "../../services";
 import {redirectTo, getUserId, logAction, setUserId, AppDispatch} from "../index";
@@ -23,6 +23,8 @@ const checkUserConsistency = (middleware: MiddlewareAPI) => {
         dispatch(logAction({type: "USER_CONSISTENCY_WARNING_SHOWN", userAgent: navigator.userAgent}));
         // Mark error after this check has finished, else the error will be snuffed by the error reducer.
         window.setTimeout(() => middleware.dispatch({type: ACTION_TYPE.USER_CONSISTENCY_ERROR}));
+    } else if (state?.user?.sessionExpiry && state.user.sessionExpiry - Date.now() <= 0) {
+        window.setTimeout(() => middleware.dispatch({type: ACTION_TYPE.USER_SESSION_EXPIRED}));
     } else {
         scheduleNextCheck(middleware);
     }
@@ -62,6 +64,9 @@ export const userConsistencyCheckerMiddleware: Middleware = (api: MiddlewareAPI)
             redirect = "/consistency-error";
             clearCurrentUser();
             break;
+        case ACTION_TYPE.USER_SESSION_EXPIRED:
+            redirect = "/error_expired";
+            break;
         case ACTION_TYPE.USER_LOG_OUT_RESPONSE_SUCCESS:
         case ACTION_TYPE.USER_LOG_OUT_EVERYWHERE_RESPONSE_SUCCESS:
             redirect = "/";

src/app/state/slices/user.ts

@@ -31,7 +31,7 @@ export const userSlice = createSlice({
             () => ({loggedIn: false, requesting: true}),
         ).addMatcher(
             loggedInMatcher,
-            (_, action) => ({loggedIn: true, ...action.user}),
+            (_, action) => ({sessionExpiry: undefined, loggedIn: true, ...action.user}),
         ).addMatcher(
             loggedOutMatcher,
             () => ({loggedIn: false}),

src/test/dateUtils.ts

@@ -16,4 +16,5 @@ export const DAYS_AGO = (date: Date = new Date(NOW), delta_days: number, roundDo
     return date.valueOf();
 };
 
-export const SOME_FIXED_FUTURE_DATE = Date.parse('15 Jan 2050 12:00:00 GMT');
+export const SOME_FIXED_FUTURE_DATE_AS_STRING = '15 Jan 2050 12:00:00 GMT';
+export const SOME_FIXED_FUTURE_DATE = Date.parse(SOME_FIXED_FUTURE_DATE_AS_STRING);

src/test/pages/SessionCookieExpired.test.tsx

@@ -0,0 +1,56 @@
+import {navigateToMyAccount, renderTestEnvironment} from "../testUtils";
+import {NOW, SOME_FIXED_FUTURE_DATE} from "../dateUtils";
+import {redirectTo} from "../../app/state";
+import * as Actions from "../../app/state/actions";
+
+
+describe("SessionExpired", () => {
+    it('should redirect to session expired login page when session has expired', async () => {
+        // Arrange
+        //  Annoyingly, the hard-redirect we use is not implemented in JSDOM/RTL, so we need to mock it out.
+        jest.spyOn(Actions, "redirectTo");
+        // @ts-ignore
+        redirectTo.mockImplementation(() => true);
+
+        //  Set the session expiry to be now
+        renderTestEnvironment({role: "STUDENT", sessionExpires: new Date(NOW).toUTCString()});
+
+        //  Navigate to My Account (any page will do)
+        await navigateToMyAccount();
+
+        // Act
+        //  Wait for the user consistency check to notice
+        await new Promise((r) => setTimeout(r, 1500));
+
+        // Assert
+        //  Check we were redirected to the login page. Ideally we'd check the page itself, but this is the best we can
+        //  do for the reasons described above.
+        expect(redirectTo).toHaveBeenLastCalledWith("/error_expired");
+
+        // Teardown
+        // @ts-ignore
+        redirectTo.mockRestore();
+    });
+
+    it('should not redirect when session expiry has not passed', async () => {
+        // Arrange
+        jest.spyOn(Actions, "redirectTo");
+        // @ts-ignore
+        redirectTo.mockImplementation(() => true);
+
+        //  Set the session expiry to in the future
+        renderTestEnvironment({role: "STUDENT", sessionExpires: new Date(SOME_FIXED_FUTURE_DATE).toUTCString()});
+
+        //  Navigate to My Account (any page will do)
+        await navigateToMyAccount();
+
+        // Act
+        //  Wait for the user consistency check to notice, if it's going to
+        await new Promise((r) => setTimeout(r, 1500));
+
+        // Assert
+        //  We should still be where we were.
+        expect(window.location.pathname).toEqual("/account");
+        expect(redirectTo).not.toHaveBeenLastCalledWith("/error_expired");
+    });
+});

src/test/state/actions.test.tsx

@@ -21,6 +21,7 @@ import {
 import {ACTION_TYPE} from "../../app/services";
 import {Action} from "../../IsaacAppTypes";
 import {jest} from "@jest/globals";
+import {SOME_FIXED_FUTURE_DATE_AS_STRING} from "../dateUtils";
 
 const mockStore = configureMockStore([thunk, ...middleware]);
 const axiosMock = new MockAdapter(endpoint);
@@ -50,7 +51,8 @@ describe("requestCurrentUser action", () => {
         const userAuthSettings = userAuthenticationSettings[dameShirley.id as number];
         const userPreferences = userPreferencesSettings[dameShirley.id as number];
 
-        axiosMock.onGet(`/users/current_user`).replyOnce(200, dameShirley);
+        axiosMock.onGet(`/users/current_user`).replyOnce(200, dameShirley,
+            {"x-session-expires": SOME_FIXED_FUTURE_DATE_AS_STRING});
         axiosMock.onGet(`/auth/user_authentication_settings`).replyOnce(200, userAuthSettings);
         axiosMock.onGet(`/users/user_preferences`).replyOnce(200, userPreferences);
 
@@ -63,7 +65,9 @@ describe("requestCurrentUser action", () => {
             {type: ACTION_TYPE.USER_PREFERENCES_REQUEST},
             {type: ACTION_TYPE.USER_PREFERENCES_RESPONSE_SUCCESS, userPreferences}
         ];
-        const expectedFinalActions = [{type: ACTION_TYPE.CURRENT_USER_RESPONSE_SUCCESS, user: dameShirley}];
+        const expectedFinalActions = [
+            {type: ACTION_TYPE.CURRENT_USER_RESPONSE_SUCCESS, user: {...dameShirley, loggedIn: true, sessionExpiry: 2525860800000}}
+        ];
 
         const actualActions = store.getActions();
 

src/test/testUtils.tsx

@@ -12,6 +12,7 @@ import React from "react";
 import {MemoryRouter} from "react-router";
 import {screen, within} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import {SOME_FIXED_FUTURE_DATE_AS_STRING} from "./dateUtils";
 
 export function paramsToObject(entries: URLSearchParams): {[key: string]: string} {
     const result: {[key: string]: string} = {};
@@ -28,6 +29,7 @@ export const augmentErrorMessage = (message?: string) => (e: Error) => {
 interface RenderTestEnvironmentOptions {
     role?: UserRole | "ANONYMOUS";
     modifyUser?: (u: typeof mockUser) => typeof mockUser;
+    sessionExpires?: string;
     PageComponent?: React.FC<any>;
     initalRouteEntries?: string[];
     extraEndpoints?: RestHandler<any>[];
@@ -43,7 +45,7 @@ interface RenderTestEnvironmentOptions {
 // When called, the Redux store will be cleaned completely, and other the MSW server handlers will be reset to
 // defaults (those in handlers.ts).
 export const renderTestEnvironment = (options?: RenderTestEnvironmentOptions) => {
-    const {role, modifyUser, PageComponent, initalRouteEntries, extraEndpoints} = options ?? {};
+    const {role, modifyUser, sessionExpires, PageComponent, initalRouteEntries, extraEndpoints} = options ?? {};
     store.dispatch({type: ACTION_TYPE.USER_LOG_OUT_RESPONSE_SUCCESS});
     store.dispatch(isaacApi.util.resetApiState());
     server.resetHandlers();
@@ -66,7 +68,8 @@ export const renderTestEnvironment = (options?: RenderTestEnvironmentOptions) =>
                 });
                 return res(
                     ctx.status(200),
-                    ctx.json(modifyUser ? modifyUser(userWithRole) : userWithRole)
+                    ctx.json(modifyUser ? modifyUser(userWithRole) : userWithRole),
+                    ctx.set("x-session-expires", sessionExpires ?? SOME_FIXED_FUTURE_DATE_AS_STRING)
                 );
             }),
         );