Add middleware to schedule sign-out

packages/peregrine/lib/Apollo/attachClientToStore.js

@@ -0,0 +1,7 @@
+import { extraArgument } from '../store/middleware/thunk';
+
+const attachClientToStore = apolloClient => {
+    Object.assign(extraArgument, { apolloClient });
+};
+
+export default attachClientToStore;

packages/peregrine/lib/context/cart.js

@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useEffect, useMemo } from 'react';
 import { connect } from 'react-redux';
-import { useApolloClient, useMutation } from '@apollo/client';
+import { useMutation } from '@apollo/client';
 import gql from 'graphql-tag';
 
 import { useAwaitQuery } from '@magento/peregrine/lib/hooks/useAwaitQuery';
@@ -55,20 +55,16 @@ const CartContextProvider = props => {
         derivedCartState
     ]);
 
-    const apolloClient = useApolloClient();
     const [fetchCartId] = useMutation(CREATE_CART_MUTATION);
     const fetchCartDetails = useAwaitQuery(CART_DETAILS_QUERY);
 
     useEffect(() => {
-        // cartApi.getCartDetails initializes the cart if there isn't one. Also, we pass
-        // apolloClient to wipe the store in event of auth token expiry which
-        // will only happen if the user refreshes.
+        // cartApi.getCartDetails initializes the cart if there isn't one.
         cartApi.getCartDetails({
-            apolloClient,
             fetchCartId,
             fetchCartDetails
         });
-    }, [apolloClient, cartApi, fetchCartDetails, fetchCartId]);
+    }, [cartApi, fetchCartDetails, fetchCartId]);
 
     return (
         <CartContext.Provider value={contextValue}>

packages/peregrine/lib/store/actions/cart/__tests__/asyncActions.spec.js

@@ -32,7 +32,13 @@ const getState = jest.fn(() => ({
     cart: { cartId: 'CART_ID' },
     user: { isSignedIn: false }
 }));
-const thunkArgs = [dispatch, getState];
+const thunkArgs = [
+    dispatch,
+    getState,
+    {
+        apolloClient: {}
+    }
+];
 
 describe('createCart', () => {
     test('it returns a thunk', () => {

packages/peregrine/lib/store/actions/cart/asyncActions.js

@@ -317,9 +317,9 @@ export const removeItemFromCart = payload => {
 };
 
 export const getCartDetails = payload => {
-    const { apolloClient, fetchCartId, fetchCartDetails } = payload;
+    const { fetchCartId, fetchCartDetails } = payload;
 
-    return async function thunk(dispatch, getState) {
+    return async function thunk(dispatch, getState, { apolloClient }) {
         const { cart, user } = getState();
         const { cartId } = cart;
         const { isSignedIn } = user;
@@ -367,13 +367,10 @@ export const getCartDetails = payload => {
                     await dispatch(removeCart());
                 }
 
-                // Clear the cart data from apollo client if we get here and
-                // have an apolloClient.
-                if (apolloClient) {
-                    await clearCartDataFromCache(apolloClient);
-                }
+                // Clear cart data from Apollo cache
+                await clearCartDataFromCache(apolloClient);
 
-                // Create a new one
+                // Create a new cart
                 try {
                     await dispatch(
                         createCart({

packages/peregrine/lib/store/actions/user/__tests__/asyncActions.spec.js

@@ -8,7 +8,14 @@ const dispatch = jest.fn();
 const getState = jest.fn(() => ({
     user: { isSignedIn: false }
 }));
-const thunkArgs = [dispatch, getState];
+const thunkArgs = [
+    dispatch,
+    getState,
+    {
+        apolloClient: {}
+    }
+];
+
 const fetchUserDetails = jest
     .fn()
     .mockResolvedValue({ data: { customer: {} } });
@@ -102,7 +109,7 @@ describe('signOut', () => {
     });
 
     test('signOut thunk invokes revokeToken and dispatchs actions', async () => {
-        await signOut({ revokeToken })(dispatch);
+        await signOut({ revokeToken })(...thunkArgs);
 
         expect(revokeToken).toHaveBeenCalledTimes(1);
         expect(dispatch).toHaveBeenCalledTimes(3);
@@ -112,7 +119,7 @@ describe('signOut', () => {
         const consoleSpy = jest.spyOn(console, 'error');
         revokeToken.mockRejectedValueOnce(new Error('Revoke Token Error'));
 
-        await signOut({ revokeToken })(dispatch);
+        await signOut({ revokeToken })(...thunkArgs);
 
         expect(revokeToken).toHaveBeenCalledTimes(1);
         expect(consoleSpy).toHaveBeenCalledTimes(1);

packages/peregrine/lib/store/actions/user/asyncActions.js

@@ -1,4 +1,6 @@
 import BrowserPersistence from '../../../util/simplePersistence';
+import { clearCartDataFromCache } from '../../../Apollo/clearCartDataFromCache';
+import { clearCustomerDataFromCache } from '../../../Apollo/clearCustomerDataFromCache';
 import { removeCart } from '../cart';
 import { clearCheckoutDataFromStorage } from '../checkout';
 
@@ -7,7 +9,7 @@ import actions from './actions';
 const storage = new BrowserPersistence();
 
 export const signOut = (payload = {}) =>
-    async function thunk(dispatch) {
+    async function thunk(dispatch, getState, { apolloClient }) {
         const { revokeToken } = payload;
 
         if (revokeToken) {
@@ -23,6 +25,8 @@ export const signOut = (payload = {}) =>
         await dispatch(clearToken());
         await dispatch(actions.reset());
         await clearCheckoutDataFromStorage();
+        await clearCartDataFromCache(apolloClient);
+        await clearCustomerDataFromCache(apolloClient);
 
         // Now that we're signed out, forget the old (customer) cart.
         // We don't need to create a new cart here because we're going to refresh

packages/peregrine/lib/store/enhancers/middleware.js

@@ -1,9 +1,10 @@
 import { applyMiddleware } from 'redux';
-import thunk from 'redux-thunk';
 
+import auth from '../middleware/auth';
 import log from '../middleware/log';
+import thunk from '../middleware/thunk';
 
-const middleware = [thunk];
+const middleware = [thunk, auth];
 
 if (process.env.NODE_ENV !== 'production') {
     middleware.push(log);

packages/peregrine/lib/store/middleware/auth.js

@@ -0,0 +1,82 @@
+import BrowserPersistence from '../../util/simplePersistence';
+import userActions, { signOut } from '../actions/user';
+
+const timeouts = new Map();
+const intervals = new Map();
+const storage = new BrowserPersistence();
+const SET_TOKEN = userActions.setToken.toString();
+const CLEAR_TOKEN = userActions.clearToken.toString();
+const GET_DETAILS = userActions.getDetails.request.toString();
+
+const isSigningIn = type => type === SET_TOKEN || type === GET_DETAILS;
+const isSigningOut = type => type === CLEAR_TOKEN;
+
+/**
+ * This function adheres to Redux's middleware pattern.
+ *
+ * @param {Store} store The store to augment.
+ * @returns {Function}
+ */
+const scheduleSignOut = store => next => action => {
+    const { dispatch } = store;
+
+    if (isSigningIn(action.type)) {
+        // `BrowserPersistence.getItem()` only returns the value
+        // but we need the full item with timestamp and ttl
+        const item = storage.getRawItem('signin_token');
+
+        // exit if there's nothing in storage
+        if (!item) return next(action);
+
+        const { timeStored, ttl, value } = JSON.parse(item);
+        const parsedValue = JSON.parse(value);
+        const preciseTTL = ttl * 1000;
+        const elapsed = Date.now() - timeStored;
+        const expiry = Math.max(preciseTTL - elapsed, 0);
+
+        // establish a sign-out routine
+        const callback = () => {
+            dispatch(signOut()).then(() => {
+                timeouts.delete(parsedValue);
+                intervals.delete(parsedValue);
+
+                // refresh the page, important for checkout
+                history.go(0);
+            });
+        };
+
+        // set a timeout that runs once when the token expires
+        if (!timeouts.has(parsedValue)) {
+            const timeoutId = setTimeout(callback, expiry);
+
+            timeouts.set(parsedValue, timeoutId);
+        }
+
+        // then set an interval that runs once per second
+        // on mobile, the timeout won't fire if the tab is inactive
+        if (!intervals.has(parsedValue)) {
+            const intervalId = setInterval(() => {
+                const hasExpired = Date.now() - timeStored > preciseTTL;
+
+                if (hasExpired) callback();
+            }, 1000);
+
+            intervals.set(parsedValue, intervalId);
+        }
+    } else if (isSigningOut(action.type)) {
+        for (const timeoutId of timeouts) {
+            clearTimeout(timeoutId);
+        }
+
+        for (const intervalId of intervals) {
+            clearInterval(intervalId);
+        }
+
+        timeouts.clear();
+        intervals.clear();
+    }
+
+    return next(action);
+};
+
+export default scheduleSignOut;

packages/peregrine/lib/store/middleware/thunk.js

@@ -0,0 +1,4 @@
+import thunk from 'redux-thunk';
+
+export const extraArgument = {};
+export default thunk.withExtraArgument(extraArgument);

packages/peregrine/lib/talons/AuthModal/useAuthModal.js

@@ -1,10 +1,8 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import { useApolloClient, useMutation } from '@apollo/client';
+import { useMutation } from '@apollo/client';
 
 import mergeOperations from '../../util/shallowMerge';
-import { clearCartDataFromCache } from '../../Apollo/clearCartDataFromCache';
-import { clearCustomerDataFromCache } from '../../Apollo/clearCustomerDataFromCache';
 import { useUserContext } from '../../context/user';
 import DEFAULT_OPERATIONS from './authModal.gql';
 
@@ -48,7 +46,6 @@ export const useAuthModal = props => {
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
     const { signOutMutation } = operations;
 
-    const apolloClient = useApolloClient();
     const [isSigningOut, setIsSigningOut] = useState(false);
     const [username, setUsername] = useState('');
     const [{ currentUser, isSignedIn }, { signOut }] = useUserContext();
@@ -89,14 +86,12 @@ export const useAuthModal = props => {
 
         // Delete cart/user data from the redux store.
         await signOut({ revokeToken });
-        await clearCartDataFromCache(apolloClient);
-        await clearCustomerDataFromCache(apolloClient);
 
         // Refresh the page as a way to say "re-initialize". An alternative
         // would be to call apolloClient.resetStore() but that would require
         // a large refactor.
         history.go(0);
-    }, [apolloClient, history, revokeToken, signOut]);
+    }, [history, revokeToken, signOut]);
 
     return {
         handleCancel,

packages/peregrine/lib/talons/Header/__tests__/useAccountMenu.spec.js

@@ -46,14 +46,6 @@ jest.mock('@magento/peregrine/lib/hooks/useDropdown', () => ({
     })
 }));
 
-jest.mock('@magento/peregrine/lib/Apollo/clearCartDataFromCache', () => ({
-    clearCartDataFromCache: jest.fn().mockResolvedValue()
-}));
-
-jest.mock('@magento/peregrine/lib/Apollo/clearCustomerDataFromCache', () => ({
-    clearCustomerDataFromCache: jest.fn().mockResolvedValue()
-}));
-
 const defaultProps = {
     accountMenuIsOpen: false,
     setAccountMenuIsOpen: jest.fn()

packages/peregrine/lib/talons/Header/useAccountMenu.js

@@ -1,9 +1,7 @@
 import { useState, useCallback, useEffect } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
-import { useApolloClient, useMutation } from '@apollo/client';
+import { useMutation } from '@apollo/client';
 
-import { clearCartDataFromCache } from '../../Apollo/clearCartDataFromCache';
-import { clearCustomerDataFromCache } from '../../Apollo/clearCustomerDataFromCache';
 import mergeOperations from '../../util/shallowMerge';
 import { useUserContext } from '../../context/user';
 
@@ -36,7 +34,6 @@ export const useAccountMenu = props => {
     const [view, setView] = useState('SIGNIN');
     const [username, setUsername] = useState('');
 
-    const apolloClient = useApolloClient();
     const history = useHistory();
     const location = useLocation();
     const [revokeToken] = useMutation(signOutMutation);
@@ -48,14 +45,12 @@ export const useAccountMenu = props => {
 
         // Delete cart/user data from the redux store.
         await signOut({ revokeToken });
-        await clearCartDataFromCache(apolloClient);
-        await clearCustomerDataFromCache(apolloClient);
 
         // Refresh the page as a way to say "re-initialize". An alternative
         // would be to call apolloClient.resetStore() but that would require
         // a large refactor.
         history.go(0);
-    }, [apolloClient, history, revokeToken, setAccountMenuIsOpen, signOut]);
+    }, [history, revokeToken, setAccountMenuIsOpen, signOut]);
 
     const handleForgotPassword = useCallback(() => {
         setView('FORGOT_PASSWORD');

packages/peregrine/lib/util/simplePersistence.js

@@ -30,6 +30,9 @@ export default class BrowserPersistence {
             this.constructor.KEY || BrowserPersistence.KEY
         );
     }
+    getRawItem(name) {
+        return this.storage.getItem(name);
+    }
     getItem(name) {
         const now = Date.now();
         const item = this.storage.getItem(name);