Reduce log spam: Don't request user data if not authenticated

Author: eriksson-daniel

frontend/src/hooks/use-user.ts

@@ -1,3 +1,4 @@
+import { useIsAuthenticatedQuery } from '@app/redux-api/auth/api';
 import { useGetUserQuery } from '@app/redux-api/user/api';
 import { login } from '@app/user/login';
 import { useEffect } from 'react';
@@ -15,20 +16,16 @@ interface LoadedAuth {
 type AuthResult = LoadingAuth | LoadedAuth;
 
 export const useIsAuthenticated = (): AuthResult => {
-  const { data, isSuccess, isError, isLoading } = useGetUserQuery();
+  const { data, isSuccess, isError } = useIsAuthenticatedQuery();
 
   if (isSuccess) {
-    return { isAuthenticated: data !== undefined, isLoadingAuth: false };
+    return { isAuthenticated: data?.session.active ?? false, isLoadingAuth: false };
   }
 
   if (isError) {
     return { isAuthenticated: false, isLoadingAuth: false };
   }
 
-  if (isLoading) {
-    return { isAuthenticated: undefined, isLoadingAuth: true };
-  }
-
   return { isAuthenticated: undefined, isLoadingAuth: true };
 };
 

frontend/src/redux-api/auth/api.ts

@@ -0,0 +1,38 @@
+import { AUTH_BASE_QUERY } from '@app/redux-api/common';
+import { createApi } from '@reduxjs/toolkit/query/react';
+
+export const authApi = createApi({
+  reducerPath: 'authApi',
+  baseQuery: AUTH_BASE_QUERY,
+  tagTypes: ['isAuthenticated'],
+  endpoints: (builder) => ({
+    isAuthenticated: builder.query<Session | undefined, void>({
+      query: () => ({
+        url: '/oauth2/session',
+        validateStatus: (response) => response.status === 200 || response.status === 401,
+      }),
+      providesTags: ['isAuthenticated'],
+    }),
+  }),
+});
+
+export const { useIsAuthenticatedQuery } = authApi;
+
+type Session = {
+  session: {
+    created_at: string;
+    ends_at: string;
+    timeout_at: string;
+    ends_in_seconds: number;
+    active: boolean;
+    timeout_in_seconds: number;
+  };
+  tokens: {
+    expire_at: string;
+    refreshed_at: string;
+    expire_in_seconds: number;
+    next_auto_refresh_in_seconds: number;
+    refresh_cooldown: boolean;
+    refresh_cooldown_seconds: number;
+  };
+};

frontend/src/redux-api/common.ts

@@ -77,6 +77,7 @@ const staggeredBaseQuery = (baseUrl: string) => {
 
 export const API_PATH = '/api/klage-dittnav-api/api';
 export const API_BASE_QUERY = staggeredBaseQuery(API_PATH);
+export const AUTH_BASE_QUERY = staggeredBaseQuery('');
 
 export const KODEVERK_API_PATH = '/api/klage-kodeverk-api/kodeverk';
 export const KODEVERK_API_BASE_QUERY = staggeredBaseQuery(KODEVERK_API_PATH);

frontend/src/redux-api/server-sent-events.ts

@@ -1,5 +1,7 @@
 import { AppEventEnum } from '@app/logging/action';
 import { apiEvent, appEvent } from '@app/logging/logger';
+import { reduxStore } from '@app/redux/configure-store';
+import { authApi } from '@app/redux-api/auth/api';
 import { userApi } from '@app/redux-api/user/api';
 
 export enum ServerSentEventType {
@@ -96,7 +98,8 @@ export class ServerSentEventManager {
 
         if (!preflightOK) {
           // Probably the session timed out. Double check the logged in status.
-          userApi.util.invalidateTags(['user']);
+          reduxStore.dispatch(userApi.util.invalidateTags(['user']));
+          reduxStore.dispatch(authApi.util.invalidateTags(['isAuthenticated']));
 
           return;
         }

frontend/src/redux/configure-store.ts

@@ -1,4 +1,5 @@
 import { type RootState, rootReducer } from '@app/redux/root';
+import { authApi } from '@app/redux-api/auth/api';
 import { caseApi } from '@app/redux-api/case/api';
 import { innsendingsytelserApi } from '@app/redux-api/innsendingsytelser';
 import { userApi } from '@app/redux-api/user/api';
@@ -30,7 +31,8 @@ const rtkQueryErrorLogger: Middleware = () => (next) => (action) => {
     console.error('rtkQueryError', action);
 
     if (action.payload.status === 401) {
-      userApi.util.invalidateTags(['user']);
+      reduxStore.dispatch(userApi.util.invalidateTags(['user']));
+      reduxStore.dispatch(authApi.util.invalidateTags(['isAuthenticated']));
     }
   }
 
@@ -52,7 +54,13 @@ export const reduxStore = configureStore({
           'meta.arg.originalArgs.file',
         ],
       },
-    }).concat([innsendingsytelserApi.middleware, userApi.middleware, caseApi.middleware, rtkQueryErrorLogger]),
+    }).concat([
+      innsendingsytelserApi.middleware,
+      authApi.middleware,
+      userApi.middleware,
+      caseApi.middleware,
+      rtkQueryErrorLogger,
+    ]),
 });
 
 export type AppDispatch = typeof reduxStore.dispatch;

frontend/src/redux/root.ts

@@ -1,12 +1,14 @@
 import { loggedOutModalSlice } from '@app/redux/logged-out-modal';
 import { sessionSlice } from '@app/redux/session/session';
+import { authApi } from '@app/redux-api/auth/api';
 import { caseApi } from '@app/redux-api/case/api';
 import { innsendingsytelserApi } from '@app/redux-api/innsendingsytelser';
 import { userApi } from '@app/redux-api/user/api';
 import { combineReducers } from 'redux';
 
 export const rootReducer = combineReducers({
   [innsendingsytelserApi.reducerPath]: innsendingsytelserApi.reducer,
+  [authApi.reducerPath]: authApi.reducer,
   [userApi.reducerPath]: userApi.reducer,
   [caseApi.reducerPath]: caseApi.reducer,
   session: sessionSlice.reducer,