fix: enforce auth on addClientLog call (#1284)

Author: janosbabik

apps/backend/src/mutations/AdminMutations.spec.ts

@@ -218,4 +218,10 @@ describe('Test Admin Mutations', () => {
       })
     ).resolves.toBe(true);
   });
+
+  test('An unauthenticated user can not add client log', () => {
+    return expect(
+      adminMutations.addClientLog(null, 'Some error')
+    ).resolves.toHaveProperty('reason', 'NOT_LOGGED_IN');
+  });
 });

apps/backend/src/mutations/AdminMutations.ts

@@ -112,7 +112,8 @@ export default class AdminMutations {
     return await this.dataSource.deleteInstitution(id);
   }
 
-  async addClientLog(error: string) {
+  @Authorized()
+  async addClientLog(agent: UserWithRole | null, error: string) {
     logger.logError('Error received from client', { error });
 
     return true;

apps/backend/src/resolvers/mutations/AddClientLogMutation.ts

@@ -9,6 +9,6 @@ export class AddClientLogMutation {
     @Arg('error', () => String) error: string,
     @Ctx() context: ResolverContext
   ) {
-    return context.mutations.admin.addClientLog(error);
+    return context.mutations.admin.addClientLog(context.user, error);
   }
 }

apps/frontend/src/components/App.tsx

@@ -10,7 +10,7 @@ import { FeatureContextProvider } from 'context/FeatureContextProvider';
 import { IdleContextPicker } from 'context/IdleContextProvider';
 import { SettingsContextProvider } from 'context/SettingsContextProvider';
 import { UserContextProvider } from 'context/UserContextProvider';
-import { getUnauthorizedApi } from 'hooks/common/useDataApi';
+import { sendClientLog } from 'hooks/common/useDataApi';
 import clearSession from 'utils/clearSession';
 
 import AppRoutes from './AppRoutes';
@@ -72,19 +72,30 @@ function Root() {
 
 const router = createBrowserRouter([{ path: '*', element: <Root /> }]);
 
-class App extends React.Component {
-  state = { errorUserInformation: '' };
-  static getDerivedStateFromError() {
+type ErrorUserInformation = {
+  id: string | number;
+  currentRole: string | null;
+};
+
+type AppState = {
+  errorUserInformation: ErrorUserInformation | null;
+  errorToken: string | null;
+};
+
+class App extends React.Component<Record<string, never>, AppState> {
+  state: AppState = { errorUserInformation: null, errorToken: null };
+  static getDerivedStateFromError(): AppState {
     // Update state so the next render will show the fallback UI.
     const user = localStorage.getItem('user');
-    const errorUserInformation = {
+    const token = localStorage.getItem('token');
+    const errorUserInformation: ErrorUserInformation = {
       id: user ? JSON.parse(user).id : 'Not logged in',
       currentRole: localStorage.getItem('currentRole'),
     };
 
     clearSession();
 
-    return { errorUserInformation };
+    return { errorUserInformation, errorToken: token };
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
@@ -98,7 +109,7 @@ class App extends React.Component {
     } catch (e) {
       errorMessage = 'Exception while preparing error message';
     } finally {
-      getUnauthorizedApi().addClientLog({ error: errorMessage });
+      void sendClientLog(errorMessage, this.state.errorToken);
     }
   }
 

apps/frontend/src/hooks/common/useDataApi.ts

@@ -18,11 +18,29 @@ const endpoint = '/graphql';
 const clientNameHeader = 'apollographql-client-name';
 const clientName = 'UOP frontend';
 
+export async function sendClientLog(
+  errorPayload: string,
+  token?: string | null
+) {
+  if (!token) return;
+
+  try {
+    await getSdk(
+      new GraphQLClient(endpoint)
+        .setHeader(clientNameHeader, clientName)
+        .setHeader('authorization', `Bearer ${token}`)
+    ).addClientLog({ error: errorPayload });
+  } catch (sendError) {
+    console.error('Failed to send client log', sendError);
+  }
+}
+
 const notifyAndLog = async (
   enqueueSnackbar: WithSnackbarProps['enqueueSnackbar'],
   userMessage: string,
   error: ClientError | string,
-  writeToServerLog = true
+  writeToServerLog = true,
+  token?: string
 ) => {
   enqueueSnackbar(userMessage, {
     variant: 'error',
@@ -33,10 +51,7 @@ const notifyAndLog = async (
   console.error({ userMessage, error });
 
   if (writeToServerLog) {
-    await getSdk(
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
-      new UnauthorizedGraphQLClient(endpoint, enqueueSnackbar, true)
-    ).addClientLog({ error: JSON.stringify({ userMessage, error }) });
+    await sendClientLog(JSON.stringify({ userMessage, error }), token);
   }
 };
 
@@ -49,8 +64,7 @@ export function getUnauthorizedApi() {
 class UnauthorizedGraphQLClient extends GraphQLClient {
   constructor(
     private endpoint: string,
-    private enqueueSnackbar: WithSnackbarProps['enqueueSnackbar'],
-    private skipErrorReport?: boolean
+    private enqueueSnackbar: WithSnackbarProps['enqueueSnackbar']
   ) {
     super(endpoint);
     this.setHeader(clientNameHeader, clientName);
@@ -63,13 +77,6 @@ class UnauthorizedGraphQLClient extends GraphQLClient {
     return super
       .request<T, V>(query as RequestQuery<T, V>, ...variablesAndRequestHeaders)
       .catch((error) => {
-        // if the `notificationWithClientLog` fails
-        // and it fails while reporting an error, it can
-        // easily cause an infinite loop
-        if (this.skipErrorReport) {
-          throw error;
-        }
-
         if (!error || !error.response) {
           notifyAndLog(
             this.enqueueSnackbar,
@@ -132,11 +139,16 @@ class AuthorizedGraphQLClient extends GraphQLClient {
         const newToken = data.token;
         this.setHeader('authorization', `Bearer ${newToken}`);
         this.tokenRenewed && this.tokenRenewed(newToken as string);
+        this.token = newToken;
+        this.renewalDate = this.getRenewalDate(this.token);
+        this.externalToken = this.getExternalToken(this.token);
       } catch (error) {
         notifyAndLog(
           this.enqueueSnackbar,
           'Server rejected user credentials',
-          JSON.stringify(error)
+          JSON.stringify(error),
+          true,
+          this.token
         );
         this.onSessionExpired();
       }
@@ -154,7 +166,8 @@ class AuthorizedGraphQLClient extends GraphQLClient {
             this.enqueueSnackbar,
             'No response received from server',
             error,
-            false
+            false,
+            this.token
           );
         } else if (
           error.response.error &&
@@ -164,7 +177,8 @@ class AuthorizedGraphQLClient extends GraphQLClient {
             this.enqueueSnackbar,
             'Connection problem!',
             error,
-            false
+            false,
+            this.token
           );
         } else if (
           error.response.errors &&
@@ -175,15 +189,17 @@ class AuthorizedGraphQLClient extends GraphQLClient {
             this.enqueueSnackbar,
             'Your session has expired, you will need to log in again through the external homepage',
             error,
-            false
+            false,
+            this.token
           );
           this.onSessionExpired();
         } else if ((jwtDecode(this.token) as any).exp < nowTimestampSeconds) {
           notifyAndLog(
             this.enqueueSnackbar,
             'Your session has expired, you will need to log in again.',
             error,
-            false
+            false,
+            this.token
           );
           this.onSessionExpired();
         } else {
@@ -192,7 +208,9 @@ class AuthorizedGraphQLClient extends GraphQLClient {
           notifyAndLog(
             this.enqueueSnackbar,
             graphQLError?.message || 'Something went wrong!',
-            error
+            error,
+            true,
+            this.token
           );
         }