[PWA-147] Sign Out should revoke customer token using graphql mutation

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

@@ -1,8 +1,11 @@
 import actions from '../actions';
-import { getUserDetails, resetPassword } from '../asyncActions';
+import { getUserDetails, resetPassword, signOut } from '../asyncActions';
 
 jest.mock('../../../../RestApi');
 jest.mock('../../../../util/simplePersistence');
+jest.mock('../../../../util/router-helpers', () => ({
+    refresh: jest.fn()
+}));
 
 const dispatch = jest.fn();
 const getState = jest.fn(() => ({
@@ -12,6 +15,7 @@ const thunkArgs = [dispatch, getState];
 const fetchUserDetails = jest
     .fn()
     .mockResolvedValue({ data: { customer: {} } });
+const revokeToken = jest.fn().mockResolvedValue({});
 
 describe('getUserDetails', () => {
     test('it returns a thunk', () => {
@@ -94,3 +98,18 @@ describe('resetPassword', () => {
         );
     });
 });
+
+describe('signOut', () => {
+    const history = {};
+
+    test('signOut returns a thunk', () => {
+        expect(signOut({ history, revokeToken })).toBeInstanceOf(Function);
+    });
+
+    test('signOut thunk invokes revokeToken', async () => {
+        await signOut({ history, revokeToken })(dispatch);
+
+        expect(revokeToken).toHaveBeenCalled();
+        expect(revokeToken).toHaveReturned();
+    });
+});

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

@@ -45,8 +45,11 @@ export const signIn = credentials =>
         }
     };
 
-export const signOut = ({ history }) => async dispatch => {
-    // Sign the user out in local storage and Redux.
+export const signOut = ({ history, revokeToken }) => async dispatch => {
+    // Send mutation to revoke token.
+    await revokeToken();
+
+    // Remove token from local storage and Redux.
     await dispatch(clearToken());
     await dispatch(actions.reset());
     await clearCheckoutDataFromStorage();

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

@@ -1,5 +1,8 @@
 import { useCallback, useEffect, useState } from 'react';
+import { useHistory } from 'react-router-dom';
+
 import { useUserContext } from '../../context/user';
+import { useMutation } from '@apollo/react-hooks';
 
 const UNAUTHED_ONLY = ['CREATE_ACCOUNT', 'FORGOT_PASSWORD', 'SIGN_IN'];
 
@@ -30,11 +33,14 @@ export const useAuthModal = props => {
         showForgotPassword,
         showMainMenu,
         showMyAccount,
+        signOutMutation,
         view
     } = props;
 
     const [username, setUsername] = useState('');
     const [{ currentUser }, { signOut }] = useUserContext();
+    const [revokeToken] = useMutation(signOutMutation);
+    const history = useHistory();
 
     // If the user is authed, the only valid view is "MY_ACCOUNT".
     // view an also be `MENU` but in that case we don't want to act.
@@ -54,9 +60,8 @@ export const useAuthModal = props => {
     }, [showMyAccount]);
 
     const handleSignOut = useCallback(() => {
-        // TODO: Get history from router context when implemented.
-        signOut({ history: window.history });
-    }, [signOut]);
+        signOut({ history, revokeToken });
+    }, [history, revokeToken, signOut]);
 
     return {
         handleClose,

packages/venia-ui/lib/components/AuthModal/authModal.js

@@ -8,6 +8,7 @@ import MyAccount from '../MyAccount';
 import SignIn from '../SignIn';
 import defaultClasses from './authModal.css';
 import { useAuthModal } from '@magento/peregrine/lib/talons/AuthModal/useAuthModal';
+import SIGN_OUT_MUTATION from '../../queries/signOut.graphql';
 
 const AuthModal = props => {
     const {
@@ -19,7 +20,10 @@ const AuthModal = props => {
         showForgotPassword,
         showMyAccount,
         username
-    } = useAuthModal(props);
+    } = useAuthModal({
+        ...props,
+        signOutMutation: SIGN_OUT_MUTATION
+    });
 
     let child = null;
     switch (props.view) {

packages/venia-ui/lib/queries/signOut.graphql

@@ -0,0 +1,5 @@
+mutation signOut {
+    revokeCustomerToken {
+        result
+    }
+}