✨(frontend) store and retrieve user token in sessionStorage

Ensure the user's token is saved to `sessionStorage` during login and retrieved
as needed. Improves token handling for authenticated API calls.

Author: kernicPanel

src/frontend/js/api/auth/keycloak.spec.ts

@@ -5,13 +5,15 @@ const mockKeycloakInit = jest.fn().mockResolvedValue(true);
 const mockKeycloakLogout = jest.fn().mockResolvedValue(undefined);
 const mockKeycloakLogin = jest.fn().mockResolvedValue(undefined);
 const mockKeycloakLoadUserProfile = jest.fn();
+const mockIdToken = 'mock-id-token-12345';
 
 jest.mock('keycloak-js', () => {
   return jest.fn().mockImplementation(() => ({
     init: mockKeycloakInit,
     logout: mockKeycloakLogout,
     login: mockKeycloakLogin,
     loadUserProfile: mockKeycloakLoadUserProfile,
+    idToken: 'mock-id-token-12345',
   }));
 });
 
@@ -50,6 +52,7 @@ describe('Keycloak API', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+    sessionStorage.clear();
     keycloakApi = API(authConfig);
   });
 
@@ -71,7 +74,23 @@ describe('Keycloak API', () => {
       expect(response).toEqual({
         username: 'John Doe',
         email: 'johndoe@example.com',
+        access_token: mockIdToken,
       });
+      expect(sessionStorage.getItem('RICHIE_USER_TOKEN')).toEqual(mockIdToken);
+    });
+  });
+
+  describe('user.accessToken', () => {
+    it('returns null when no token is stored', () => {
+      sessionStorage.removeItem('RICHIE_USER_TOKEN');
+      const token = keycloakApi.user.accessToken();
+      expect(token).toBeNull();
+    });
+
+    it('returns the token from sessionStorage when available', () => {
+      sessionStorage.setItem('RICHIE_USER_TOKEN', 'stored-token');
+      const token = keycloakApi.user.accessToken();
+      expect(token).toEqual('stored-token');
     });
   });
 

src/frontend/js/api/auth/keycloak.ts

@@ -3,6 +3,7 @@ import { AuthenticationBackend } from 'types/commonDataProps';
 import { APIAuthentication } from 'types/api';
 import { location } from 'utils/indirection/window';
 import { handle } from 'utils/errors/handle';
+import { RICHIE_USER_TOKEN } from '../../settings';
 
 const API = (APIConf: AuthenticationBackend): { user: APIAuthentication } => {
   const keycloak = new Keycloak({
@@ -22,13 +23,18 @@ const API = (APIConf: AuthenticationBackend): { user: APIAuthentication } => {
 
   return {
     user: {
+      accessToken: () => {
+        return sessionStorage.getItem(RICHIE_USER_TOKEN);
+      },
       me: async () => {
         return keycloak
           .loadUserProfile()
           .then((userProfile) => {
+            sessionStorage.setItem(RICHIE_USER_TOKEN, keycloak.idToken!);
             return {
               username: `${userProfile.firstName} ${userProfile.lastName}`,
               email: userProfile.email,
+              access_token: keycloak.idToken,
             };
           })
           .catch((error) => {