Merge pull request #19531 from mozilla/polish-better-error-msg-for-invalid-token

polish(settings): Provide hint about what to do in invalid session state

Author: dschom

packages/fxa-react/components/AppErrorBoundary/index.tsx

@@ -6,13 +6,13 @@ import React from 'react';
 import AppErrorDialog from '../AppErrorDialog';
 import * as Sentry from '@sentry/browser';
 
-interface AppErrorBoundaryProps {
+type AppErrorBoundaryProps = {
   children?: React.ReactNode;
-}
+};
 
-interface AppErrorBoundaryState {
+type AppErrorBoundaryState = {
   error: Error | undefined;
-}
+};
 
 class AppErrorBoundary extends React.Component<
   AppErrorBoundaryProps,
@@ -22,7 +22,7 @@ class AppErrorBoundary extends React.Component<
     error: undefined | Error;
   };
 
-  constructor(props: {}) {
+  constructor(props: AppErrorBoundaryProps) {
     super(props);
     this.state = { error: undefined };
   }
@@ -38,7 +38,7 @@ class AppErrorBoundary extends React.Component<
 
   render() {
     const { error } = this.state;
-    return error ? <AppErrorDialog /> : (this.props as any).children;
+    return error ? <AppErrorDialog /> : this.props.children;
   }
 }
 

packages/fxa-react/components/AppErrorDialog/en.ftl

@@ -5,3 +5,8 @@ app-general-err-message = Something went wrong. Please try again later.
 
 # Specific handling for issues when bad or missing query parameters are detected
 app-query-parameter-err-heading = Bad Request: Invalid Query Parameters
+
+# Specific handler for issues where something went side with the session. Maybe it did't have proper permissions,
+# or maybe the session token is stale and the user needs to sign back in again.
+app-invalid-session-err-heading = Invalid Session
+app-invalid-session-err-message = Please sign out and sign in again.

packages/fxa-react/components/AppErrorDialog/index.stories.tsx

@@ -31,4 +31,12 @@ storiesOf('Components/AppErrorDialog', module)
     >
       <AppErrorDialog errorType="query-parameter-violation" />
     </AppLocalizationProvider>
+  ))
+  .add('invalid session', () => (
+    <AppLocalizationProvider
+      baseDir="./locales"
+      userLocales={navigator.languages}
+    >
+      <AppErrorDialog errorType="invalid-session" />
+    </AppLocalizationProvider>
   ));

packages/fxa-react/components/AppErrorDialog/index.test.tsx

@@ -14,4 +14,15 @@ describe('AppErrorDialog', () => {
 
     expect(queryByTestId('error-loading-app')).toBeInTheDocument();
   });
+
+  it('can trigger another signin attempt in invalid-session case', async () => {
+    const { queryByText } = renderWithLocalizationProvider(
+      <AppErrorDialog errorType="invalid-session" />
+    );
+
+    expect(queryByText('Invalid Session')).toBeInTheDocument();
+    expect(
+      queryByText('Please sign out and sign in again.')
+    ).toBeInTheDocument();
+  });
 });

packages/fxa-react/components/AppErrorDialog/index.tsx

@@ -5,7 +5,10 @@
 import React from 'react';
 import { Localized } from '@fluent/react';
 
-export type ErrorType = 'general' | 'query-parameter-violation';
+export type ErrorType =
+  | 'general'
+  | 'query-parameter-violation'
+  | 'invalid-session';
 
 const AppErrorDialog = ({ errorType }: { errorType?: ErrorType }) => {
   if (errorType == null) {
@@ -43,6 +46,24 @@ const AppErrorDialog = ({ errorType }: { errorType?: ErrorType }) => {
             </p>
           </Localized>
         )}
+
+        {errorType === 'invalid-session' && (
+          <>
+            <Localized id="app-invalid-session-err-heading">
+              <h2
+                className="text-grey-900 font-header text-lg font-bold mb-3"
+                data-testid="error-invalid-session"
+              >
+                Invalid Session
+              </h2>
+            </Localized>
+            <Localized id="app-invalid-session-err-message">
+              <p className="text-grey-400">
+                Please sign out and sign in again.
+              </p>
+            </Localized>
+          </>
+        )}
       </div>
     </div>
   );

packages/fxa-settings/src/components/ErrorBoundaries/index.stories.tsx

@@ -4,10 +4,7 @@
 
 import React from 'react';
 import { AppError } from '.';
-import {
-
-  UrlQueryData,
-} from '../../lib/model-data';
+import { UrlQueryData } from '../../lib/model-data';
 import { withLocalization } from 'fxa-react/lib/storybooks';
 
 import { Meta } from '@storybook/react';
@@ -43,3 +40,12 @@ export const QueryParamValidationError = () => {
   // AppError should display a list of the validation errors
   return <AppError error={validationError} />;
 };
+
+export const InvalidSessionError = () => {
+  const error = {
+    name: '',
+    message: 'Unconfirmed Session',
+    errno: 138,
+  };
+  return <AppError error={error} />;
+};

packages/fxa-settings/src/components/ErrorBoundaries/index.tsx

@@ -6,6 +6,7 @@ import React, { ReactNode } from 'react';
 import { ModelValidationErrors } from '../../lib/model-data';
 import * as Sentry from '@sentry/browser';
 import AppErrorDialog from 'fxa-react/components/AppErrorDialog';
+import { AuthUiErrors, isAuthUiError } from '../../lib/auth-errors/auth-errors';
 
 /**
  * Handles errors that might occur in fxa-settings
@@ -47,6 +48,16 @@ export class AppErrorBoundary extends React.Component<{ children: ReactNode }> {
 }
 
 export const AppError = ({ error }: { error?: Error }) => {
+  // Special handling for invalid session states
+  if (
+    isAuthUiError(error) &&
+    (error.errno === AuthUiErrors.INVALID_TOKEN.errno ||
+      error.errno === AuthUiErrors.UNVERIFIED_SESSION.errno)
+  ) {
+    // TODO: Add functionality so that is easy for a user to sign back in.
+    return <AppErrorDialog errorType="invalid-session" />;
+  }
+
   // Special handling for validation errors
   if (error instanceof ModelValidationErrors) {
     return <AppErrorDialog errorType="query-parameter-violation" />;

packages/fxa-settings/src/lib/auth-errors/auth-errors.ts

@@ -56,7 +56,8 @@ const ERRORS = {
   },
   INVALID_TOKEN: {
     errno: 110,
-    message: 'Invalid token',
+    message: 'Invalid session. Please sign out and sign in again.',
+    version: 2,
   },
   INVALID_TIMESTAMP: {
     errno: 111,
@@ -139,8 +140,8 @@ const ERRORS = {
   },
   UNVERIFIED_SESSION: {
     errno: 138,
-    message: 'Unconfirmed session',
-    version: 2,
+    message: 'Unconfirmed session. Please sign out and sign in again.',
+    version: 3,
   },
   EMAIL_PRIMARY_EXISTS: {
     errno: 139,
@@ -690,3 +691,14 @@ export const AuthUiErrorNos: {
     errnos.push(x.errno);
   }
 })();
+
+/**
+ * TypeGuard for AuthUiErrors
+ */
+export function isAuthUiError(error: any): error is AuthUiError {
+  return (
+    typeof error === 'object' &&
+    typeof error?.errno === 'number' &&
+    typeof error?.message === 'string'
+  );
+}

packages/fxa-settings/src/lib/auth-errors/en.ftl

@@ -4,6 +4,7 @@ auth-error-102 = Unknown account
 auth-error-103 = Incorrect password
 auth-error-105-2 = Invalid confirmation code
 auth-error-110 = Invalid token
+auth-error-110-2 = Invalid session. Please sign out and sign in again.
 # Error shown to users when they have attempted a request (e.g., requesting a password reset) too many times
 # and their requests have been throttled, but the specific amount of time before they can retry is unknown.
 auth-error-114-generic = You’ve tried too many times. Please try again later.
@@ -16,6 +17,7 @@ auth-error-114 = You’ve tried too many times. Please try again { $retryAfter }
 auth-error-125 = The request was blocked for security reasons
 auth-error-129-2 = You entered an invalid phone number. Please check it and try again.
 auth-error-138-2 = Unconfirmed session
+auth-error-138-3 = Unconfirmed Session. Please sign out and sign in again.
 auth-error-139 = Secondary email must be different than your account email
 auth-error-155 = TOTP token not found
 # Error shown when the user submits an invalid backup authentication code