Logging out of Gitlab and clearing session storage

client/package.json

@@ -28,7 +28,7 @@
     "stop": "npx kill-port 4000",
     "syntax": "npx eslint . --fix",
     "test:all": "yarn test:unit && yarn test:int && yarn test:e2e",
-    "test:e2e": "yarn build && yarn configapp:test && npx kill-port 4000 && yarn start >/dev/null & playwright test && npx kill-port 4000",
+    "test:e2e": "yarn build && yarn config:test && npx kill-port 4000 && yarn start >/dev/null & playwright test && npx kill-port 4000",
     "test:int": "jest -c ./jest.integration.config.json ../test/integration --coverage",
     "test:unit": "jest -c ./jest.config.json ../test/unitTests --coverage"
   },
@@ -51,7 +51,7 @@
     "@typescript-eslint/eslint-plugin": "^6.12.0",
     "@typescript-eslint/parser": "^6.12.0",
     "dotenv": "^16.1.4",
-    "eslint": "^8.54.0",
+    "eslint": "8.54.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.29.0",

client/src/page/MenuToolbar.tsx

@@ -67,7 +67,7 @@ function MenuToolbar({
 
   const handleSignOut = async () => {
     if (auth) {
-      await signOut();
+      await signOut(auth);
     }
   };
 

client/src/util/auth/Authentication.ts

@@ -1,12 +1,14 @@
 import { User } from 'oidc-client-ts';
 import { useDispatch } from 'react-redux';
 import { setUserName } from 'store/auth.slice';
-import { useAuth } from 'react-oidc-context';
-import { getLogoutRedirectURI } from '../envUtil';
+import { AuthContextProps } from 'react-oidc-context';
+import { getLogoutRedirectURI, useAppURL, cleanURL } from 'util/envUtil';
 
 export interface CustomAuthContext {
   signoutRedirect: () => Promise<void>;
   removeUser: () => Promise<void>;
+  signoutSilent: () => Promise<void>;
+  revokeTokens: () => Promise<void>;
   user?: User | null | undefined;
 }
 
@@ -20,20 +22,31 @@ export function getAndSetUsername(auth: CustomAuthContext) {
   }
 }
 
-export async function signOut() {
-  const auth = useAuth();
+export async function signOut(auth: AuthContextProps) {
+  if (!auth.user) {
+    return;
+  }
   const LOGOUT_URL = getLogoutRedirectURI() ?? '';
-
-  if (auth.user) {
-    const idToken = auth.user.id_token; // camelCase for variable name
-    localStorage.clear();
-    sessionStorage.clear();
-
+  const APP_URL = cleanURL(useAppURL());
+  const idToken = auth.user.id_token;
+  try {
+    await auth.revokeTokens();
     await auth.removeUser();
+    await auth.clearStaleState();
+    sessionStorage.clear();
+    document.cookie = '_xsrf=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
     await auth.signoutRedirect({
       post_logout_redirect_uri: LOGOUT_URL.toString(),
       id_token_hint: idToken,
     });
+    await fetch(`${APP_URL}/_oauth/logout`, {
+      signal: AbortSignal.timeout(30000),
+    });
+    setTimeout(() => {
+      window.location.reload();
+    }, 3000);
+  } catch (e) {
+    throw new Error(`Error occurred during logout: ${e}`);
   }
 }
 

client/src/util/envUtil.ts

@@ -34,7 +34,7 @@ export function useURLforLIB(): string {
   return useUserLink(useAppURL(), window.env.REACT_APP_URL_LIBLINK);
 }
 
-function useAppURL(): string {
+export function useAppURL(): string {
   return `${cleanURL(window.env.REACT_APP_URL)}/${useURLbasename()}`;
 }
 

client/test/README.md

@@ -3,7 +3,7 @@
 The E2E tests require a functional gitlab oauth setup, traefik gateway and a
 live react client website. The E2E tests do not launch the react client website.
 So it is important to launch the website using `yarn start`. Keep this server
-running while performing the E2E tests with `yarn test -e` command.
+running while performing the E2E tests with `yarn test:e2e` command.
 
 The E2E tests use playwright test runner. You also need to have the software
 installed. If it is not installed, you can install with the following command.
@@ -174,7 +174,7 @@ gateway and the client website hosted behind traefik.
 Once you've properly set up your .env file, you can now run the end-to-end tests.
 
 ```bash
-yarn test -e
+yarn test:e2e
 ```
 
 This command launches the test runner and executes all end-to-end tests.

client/test/unitTests/Util/Auth/Authentication.test.ts

@@ -0,0 +1,156 @@
+import { signOut } from 'util/auth/Authentication';
+import { useAuth } from 'react-oidc-context';
+import { getLogoutRedirectURI, useAppURL, cleanURL } from 'util/envUtil';
+
+jest.mock('react-oidc-context');
+jest.mock('util/envUtil', () => ({
+  getLogoutRedirectURI: jest.fn(),
+  useAppURL: jest.fn(),
+  cleanURL: jest.fn(),
+}));
+jest.useFakeTimers();
+
+describe('signOut', () => {
+  const mockUser = { id_token: 'token' };
+  const mockSignoutRedirect = jest.fn();
+  const mockRevokeTokens = jest.fn();
+  const mockClearStaleState = jest.fn();
+  const mockremoveUser = jest.fn();
+  const mockClear = jest.fn();
+
+  Object.defineProperty(AbortSignal, 'timeout', {
+    value: jest.fn(),
+    writable: false,
+  });
+
+  Object.defineProperty(global, 'fetch', {
+    value: jest.fn(async (URL, signal) => {
+      signal();
+      switch (URL) {
+        case 'https://foo.com/_oauth/logout':
+          return {
+            ok: true,
+            status: 401,
+            json: async () => {},
+          };
+        default: {
+          throw new Error(`Unhandled request: ${URL}`);
+        }
+      }
+    }),
+    writable: true,
+  });
+
+  beforeEach(() => {
+    (useAuth as jest.Mock).mockReturnValue({
+      signoutRedirect: mockSignoutRedirect,
+      revokeTokens: mockRevokeTokens,
+      clearStaleState: mockClearStaleState,
+      removeUser: mockremoveUser,
+      user: mockUser,
+    });
+    (getLogoutRedirectURI as jest.Mock).mockReturnValue(
+      'https://logoutredirecturi.com/',
+    );
+    (useAppURL as jest.Mock).mockReturnValue('https://foo.com/');
+    (cleanURL as jest.Mock).mockReturnValue('https://foo.com');
+    Object.defineProperty(window, 'document', {
+      value: {
+        cookie: '',
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+      },
+      writable: true,
+    });
+    Object.defineProperty(window, 'sessionStorage', {
+      value: {
+        clear: mockClear,
+      },
+      writable: true,
+    });
+    Object.defineProperty(window, 'location', {
+      value: { reload: jest.fn() },
+      writable: true,
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('expires _xsrf cookie', async () => {
+    const auth = useAuth();
+    await signOut(auth);
+
+    expect(window.document.cookie).toBe(
+      '_xsrf=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;',
+    );
+  });
+
+  it('does not signoutRedirect if auth.user is null', async () => {
+    const auth = useAuth();
+    auth.user = null;
+
+    const signOutResult = await signOut(auth);
+
+    expect(signOutResult).toBeUndefined();
+    expect(mockSignoutRedirect).not.toHaveBeenCalled();
+  });
+
+  it('signsOutRedirect, clearStaleState, removeTokens and removeUer if user is authorized', async () => {
+    const auth = useAuth();
+    await signOut(auth);
+    expect(useAppURL).toHaveBeenCalled();
+    expect(cleanURL).toHaveBeenCalled();
+    expect(mockSignoutRedirect).toHaveBeenCalled();
+    expect(mockClearStaleState).toHaveBeenCalled();
+    expect(mockRevokeTokens).toHaveBeenCalled();
+    expect(mockremoveUser).toHaveBeenCalled();
+  });
+
+  it('fetches the URI from window.env', async () => {
+    const auth = useAuth();
+    const fetchBody = { signal: AbortSignal.timeout(30000) };
+    await signOut(auth);
+    expect(global.fetch).toHaveBeenCalledWith(
+      'https://foo.com/_oauth/logout',
+      fetchBody,
+    );
+  });
+
+  it('throws an error if fetch rejects', async () => {
+    const auth = useAuth();
+    global.fetch = jest.fn().mockRejectedValueOnce('foo');
+    await expect(signOut(auth)).rejects.toThrow(
+      Error('Error occurred during logout: foo'),
+    );
+  });
+
+  it('throws an error if signoutRedirect rejects', async () => {
+    const auth = useAuth();
+    auth.signoutRedirect = jest
+      .fn()
+      .mockRejectedValueOnce(new Error('signoutRedirect rejected'));
+    await expect(signOut(auth)).rejects.toThrow(
+      Error('Error occurred during logout: Error: signoutRedirect rejected'),
+    );
+  });
+
+  it('reloads the page', async () => {
+    const auth = useAuth();
+    await signOut(auth);
+    await waitMiliseconds(3000);
+    expect(window.location.reload).toHaveBeenCalled();
+  });
+
+  it('clears sessionStorage', async () => {
+    const auth = useAuth();
+    await signOut(auth);
+
+    expect(mockClear).toHaveBeenCalled();
+  });
+});
+
+async function waitMiliseconds(ms: number) {
+  jest.advanceTimersByTime(ms);
+}