polish(settings): Clear MFA cache on sign out

Author: dschom

packages/fxa-settings/src/components/Settings/DropDownAvatarMenu/index.test.tsx

@@ -16,13 +16,24 @@ import { Account, AppContext } from '../../../models';
 import { SettingsContext } from '../../../models/contexts/SettingsContext';
 import firefox from '../../../lib/channels/firefox';
 import { PLACEHOLDER_IMAGE_URL } from '../../../pages/mocks';
+import { JwtTokenCache, MfaOtpRequestCache } from '../../../lib/cache';
 
 jest.mock('../../../models/AlertBarInfo');
 jest.mock('fxa-settings/src/lib/metrics', () => ({
   logViewEvent: jest.fn(),
   settingsViewName: 'quuz',
 }));
 
+jest.mock('../../../lib/cache', () => ({
+  ...jest.requireActual('../../../lib/cache'),
+  JwtTokenCache: {
+    clearTokens: jest.fn(),
+  },
+  MfaOtpRequestCache: {
+    clear: jest.fn(),
+  },
+}));
+
 const account = {
   avatar: {
     id: 'abc1234',
@@ -38,6 +49,10 @@ const account = {
 describe('DropDownAvatarMenu', () => {
   const dropDownId = 'drop-down-avatar-menu';
 
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
   it('renders and toggles as expected with default values', () => {
     const account = {
       avatar: { url: null, id: null },
@@ -142,6 +157,12 @@ describe('DropDownAvatarMenu', () => {
       expect(window.location.assign).toHaveBeenCalledWith(
         window.location.origin
       );
+      expect(JwtTokenCache.clearTokens).toHaveBeenCalledWith(
+        mockSession().token
+      );
+      expect(MfaOtpRequestCache.clear).toHaveBeenCalledWith(
+        mockSession().token
+      );
     });
 
     it('displays an error in the AlertBar', async () => {

packages/fxa-settings/src/components/Settings/DropDownAvatarMenu/index.tsx

@@ -12,6 +12,7 @@ import { logViewEvent, settingsViewName } from '../../../lib/metrics';
 import { Localized, useLocalization } from '@fluent/react';
 import firefox from '../../../lib/channels/firefox';
 import { FtlMsg } from 'fxa-react/lib/utils';
+import { JwtTokenCache, MfaOtpRequestCache } from '../../../lib/cache';
 
 export const DropDownAvatarMenu = () => {
   const { displayName, primaryEmail, avatar, uid } = useAccount();
@@ -33,6 +34,12 @@ export const DropDownAvatarMenu = () => {
   const signOut = async () => {
     if (session.destroy) {
       try {
+        // Clear JWTs associated with the current session and clear any
+        // record of cached OTP requests.
+        JwtTokenCache.clearTokens(session.token);
+        MfaOtpRequestCache.clear(session.token);
+
+        // Destroy the current session
         await session.destroy();
 
         // Send a logout event to Firefox even if the user is in a non-Sync flow.

packages/fxa-settings/src/lib/cache.ts

@@ -391,6 +391,20 @@ export class JwtTokenCache {
     this.state = { ...this.state };
     JwtTokenCache.listeners.forEach((l) => l());
   }
+
+  /**
+   * Remove all cached tokens associated with the provided session.
+   * @param sessionToken
+   */
+  static clearTokens(sessionToken: string) {
+    for (const key of Object.keys(this.state)) {
+      if (key.startsWith(sessionToken)) {
+        delete this.state[key];
+      }
+    }
+    this.state = { ...this.state };
+    JwtTokenCache.listeners.forEach((l) => l());
+  }
 }
 
 /**
@@ -460,4 +474,14 @@ export class MfaOtpRequestCache {
   static get(sessionToken: string, requiredScope: MfaScope) {
     return this.state[this.getKey(sessionToken, requiredScope)];
   }
+
+  static clear(sessionToken: string) {
+    for (const key of Object.keys(this.state)) {
+      console.log('!!! checking', key);
+      if (key.startsWith(sessionToken)) {
+        console.log('!!! deleting', key);
+        delete this.state[key];
+      }
+    }
+  }
 }