bug(settings): Add pre-check for JWT expiration

Because:
- If a flow is started with an expired token, the MFA dialog will not render until a web request is made that invalidates the token. Once the token is invalidated, the flow must be restarted...

This Commit:
- Adds the ability to decode the JWT's payload
- Adds a check to determine if the JWT is expired to the hasToken check.
- If the token is expired, hasToken returns false, and the MFA dialog will render, so the user can get a valid JWT before the flow starts.

Author: dschom

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

@@ -106,6 +106,29 @@ describe('MfaGuard', () => {
     expect(mockAuthClient.mfaRequestOtp).not.toHaveBeenCalled();
   });
 
+  it('renders dialog when JWT has expired', async () => {
+    // Set an expired token...
+    JwtTokenCache.setToken(
+      mockSessionToken,
+      mockScope,
+      // The middle part of the string is the payload. The other parts don't matter for this test.
+      '__.eyJzdWIiOiI4YjMzNmZlNGE5MmM0ZTk5YmMyNGIyMjFmOTUzMzk0MiIsInNjb3BlIjpbIm1mYTpyZWNvdmVyeV9rZXkiXSwiaWF0IjoxNzU5MjQ3MTE3LCJqdGkiOiJjYmY1N2M2MC1hYzcwLTRhNGEtYTdkMy0wN2U0NTdlM2E4MWYiLCJzdGlkIjoiMzI5ZjQzNTFiMDUwN2QwNDVmNDYxZWQxNWY4MzZmNDM3MDBhMmM0YTk5NmVlMWM1ODMxZTQzNGIxZjc4ZjFhNCIsImV4cCI6MTc1OTI0NzE0NywiYXVkIjoiZnhhIiwiaXNzIjoiYWNjb3VudHMuZmlyZWZveC5jb20ifQ.__'
+    );
+
+    renderWithRouter(
+      <AppContext.Provider value={mockAppContext()}>
+        <MfaGuard requiredScope={mockScope}>
+          <div>secured</div>
+        </MfaGuard>
+      </AppContext.Provider>
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByText('Enter confirmation code')).toBeInTheDocument();
+      expect(mockAuthClient.mfaRequestOtp).toHaveBeenCalled();
+    });
+  });
+
   it('shows error banner on invalid OTP', async () => {
     renderWithRouter(
       <AppContext.Provider value={mockAppContext()}>

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

@@ -268,6 +268,18 @@ export function isInReactExperiment() {
   }
 }
 
+/** Decoded JWT payload state */
+export type JwtPayload = {
+  aud: string;
+  exp: number;
+  iat: number;
+  iss: string;
+  jti: string;
+  stid: string;
+  sub: string;
+  scope: Array<string>;
+};
+
 /**
  * External Container for holding JWTs.
  *
@@ -335,7 +347,63 @@ export class JwtTokenCache {
    */
   static hasToken(sessionToken: string, scope: MfaScope) {
     const key = JwtTokenCache.getKey(sessionToken, scope);
-    return this.state[key] != null;
+    const jwt = this.state[key];
+    return jwt != null && !this.isExpired(jwt);
+  }
+
+  /**
+   * Checks if a token is expired. If the token cannot be decoded or the exp
+   * claim cannot be found in the payload, then we will also return false.
+   * @param token A valid JWT
+   * @returns True if the token's exp claim is greater than now.
+   */
+  static isExpired(token: string) {
+    const decodedJwt = this.decodeTokenPayload(token);
+
+    // Under real use this shouldn't happen. If a token could be decode
+    // we can't tell if it expired so return false. We get a little fast
+    // and loose with some our mocks, and this helps keep them simple...
+    if (!decodedJwt) {
+      return false;
+    }
+
+    return decodedJwt.exp * 1000 < Date.now();
+  }
+
+  /**
+   * Decodes a jwt's payload
+   * @param token
+   * @returns
+   */
+  static decodeTokenPayload(token: string) {
+    try {
+      const [, payload] = token.split('.');
+      const base64 = payload.replace(/-/g, '+').replace(/_/g, '/');
+      const jsonPayload = decodeURIComponent(
+        atob(base64)
+          .split('')
+          .map((c) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
+          .join('')
+      );
+      const decoded = JSON.parse(jsonPayload);
+
+      // Type guard for JwtPayload
+      if (
+        decoded &&
+        typeof decoded.aud === 'string' &&
+        typeof decoded.exp === 'number' &&
+        typeof decoded.iat === 'number' &&
+        typeof decoded.iss === 'string' &&
+        typeof decoded.jti === 'string' &&
+        typeof decoded.stid === 'string' &&
+        typeof decoded.sub === 'string' &&
+        decoded.scope instanceof Array
+      ) {
+        return decoded as JwtPayload;
+      }
+    } catch {}
+
+    return null;
   }
 
   /**

packages/fxa-settings/src/models/Account.ts

@@ -19,6 +19,7 @@ import {
   getStoredAccountData,
   sessionToken,
   JwtTokenCache,
+  JwtNotFoundError,
 } from '../lib/cache';
 import firefox from '../lib/channels/firefox';
 import Storage from '../lib/storage';
@@ -1631,11 +1632,11 @@ export class Account implements AccountData {
   getCachedJwtByScope(scope: MfaScope) {
     const token = sessionToken();
     if (!token) {
-      throw AuthUiErrors.INVALID_TOKEN;
+      throw new JwtNotFoundError('Missing parent session token.');
     }
     const hasJwt = JwtTokenCache.hasToken(token, scope);
     if (!hasJwt) {
-      throw AuthUiErrors.INVALID_TOKEN;
+      throw new JwtNotFoundError('Missing or expired jwt.');
     }
 
     return JwtTokenCache.getToken(token, scope);