✨(frontend) add Keycloak authentication support

Add Keycloak as an authentication backend in the frontend.
Includes configuration updates, API integration, and required dependencies.

Author: kernicPanel

CHANGELOG.md

@@ -8,6 +8,10 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+### Added
+
+- Add keycloak as an authentication backend
+
 ## [3.2.1] - 2025-11-03
 
 ### Fixed

src/frontend/jest.config.js

@@ -15,7 +15,17 @@ module.exports = {
   },
   resolver: '<rootDir>/jest/resolver.js',
   transformIgnorePatterns: [
-    'node_modules/(?!(react-intl|lodash-es|@hookform/resolvers|query-string|decode-uri-component|split-on-first|filter-obj|@openfun/cunningham-react)/)',
+    'node_modules/(?!(' +
+      'react-intl' +
+      '|lodash-es' +
+      '|@hookform/resolvers' +
+      '|query-string' +
+      '|decode-uri-component' +
+      '|split-on-first' +
+      '|filter-obj' +
+      '|@openfun/cunningham-react' +
+      '|keycloak-js' +
+      ')/)',
   ],
   globals: {
     RICHIE_VERSION: 'test',

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

@@ -0,0 +1,125 @@
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import API from './keycloak';
+
+const mockKeycloakInit = jest.fn().mockResolvedValue(true);
+const mockKeycloakLogout = jest.fn().mockResolvedValue(undefined);
+const mockKeycloakLogin = jest.fn().mockResolvedValue(undefined);
+const mockKeycloakLoadUserProfile = jest.fn();
+
+jest.mock('keycloak-js', () => {
+  return jest.fn().mockImplementation(() => ({
+    init: mockKeycloakInit,
+    logout: mockKeycloakLogout,
+    login: mockKeycloakLogin,
+    loadUserProfile: mockKeycloakLoadUserProfile,
+  }));
+});
+
+jest.mock('utils/indirection/window', () => ({
+  location: {
+    origin: 'https://richie.test',
+    pathname: '/courses/test-course/',
+  },
+}));
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: {
+      backend: 'keycloak',
+      endpoint: 'https://keycloak.test/auth',
+      client_id: 'richie-client',
+      realm: 'richie-realm',
+      auth_url: 'https://keycloak.test/auth/realms/richie-realm/protocol/openid-connect/auth',
+    },
+  }).one(),
+}));
+
+describe('Keycloak API', () => {
+  const authConfig = {
+    backend: 'keycloak',
+    endpoint: 'https://keycloak.test/auth',
+    client_id: 'richie-client',
+    realm: 'richie-realm',
+    auth_url: 'https://keycloak.test/auth/realms/richie-realm/protocol/openid-connect/auth',
+    registration_url: 'https://keycloak.test/auth/realms/richie-realm/protocol/openid-connect/registrations',
+  };
+
+  let keycloakApi: ReturnType<typeof API>;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    keycloakApi = API(authConfig);
+  });
+
+  describe('user.me', () => {
+    it('returns null when loadUserProfile fails', async () => {
+      mockKeycloakLoadUserProfile.mockRejectedValueOnce(new Error('Not authenticated'));
+      const response = await keycloakApi.user.me();
+      expect(response).toBeNull();
+    });
+
+    it('returns user when loadUserProfile succeeds', async () => {
+      mockKeycloakLoadUserProfile.mockResolvedValueOnce({
+        firstName: 'John',
+        lastName: 'Doe',
+        email: 'johndoe@example.com',
+      });
+
+      const response = await keycloakApi.user.me();
+      expect(response).toEqual({
+        username: 'John Doe',
+        email: 'johndoe@example.com',
+      });
+    });
+  });
+
+  describe('user.login', () => {
+    it('calls keycloak.login with correct redirect URI', async () => {
+      await keycloakApi.user.login();
+
+      expect(mockKeycloakLogin).toHaveBeenCalledWith({
+        redirectUri: 'https://richie.test/courses/test-course/',
+      });
+    });
+  });
+
+  describe('user.register', () => {
+    it('calls keycloak.login with register action', async () => {
+      await keycloakApi.user.register();
+
+      expect(mockKeycloakLogin).toHaveBeenCalledWith({
+        redirectUri: 'https://richie.test/courses/test-course/',
+        action: 'REGISTER',
+      });
+    });
+  });
+
+  describe('user.logout', () => {
+    it('calls keycloak.logout with correct redirect URI', async () => {
+      await keycloakApi.user.logout();
+
+      expect(mockKeycloakLogout).toHaveBeenCalledWith({
+        redirectUri: 'https://richie.test/courses/test-course/',
+      });
+    });
+  });
+
+  describe('Keycloak initialization', () => {
+    it('initializes keycloak with correct configuration', () => {
+      const Keycloak = require('keycloak-js');
+
+      expect(Keycloak).toHaveBeenCalledWith({
+        url: 'https://keycloak.test/auth',
+        realm: 'richie-realm',
+        clientId: 'richie-client',
+      });
+
+      expect(mockKeycloakInit).toHaveBeenCalledWith({
+        checkLoginIframe: false,
+        flow: 'implicit',
+        token: undefined,
+      });
+    });
+  });
+});

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

@@ -0,0 +1,55 @@
+import Keycloak from 'keycloak-js';
+import { AuthenticationBackend } from 'types/commonDataProps';
+import { APIAuthentication } from 'types/api';
+import { location } from 'utils/indirection/window';
+import { handle } from 'utils/errors/handle';
+
+const API = (APIConf: AuthenticationBackend): { user: APIAuthentication } => {
+  const keycloak = new Keycloak({
+    url: APIConf.endpoint,
+    realm: APIConf.realm!,
+    clientId: APIConf.client_id!,
+  });
+  keycloak.init({
+    checkLoginIframe: false,
+    flow: 'implicit',
+    token: APIConf.token!,
+  });
+
+  const getRedirectUri = () => {
+    return `${location.origin}${location.pathname}`;
+  };
+
+  return {
+    user: {
+      me: async () => {
+        return keycloak
+          .loadUserProfile()
+          .then((userProfile) => {
+            return {
+              username: `${userProfile.firstName} ${userProfile.lastName}`,
+              email: userProfile.email,
+            };
+          })
+          .catch((error) => {
+            handle(error);
+            return null;
+          });
+      },
+
+      login: async () => {
+        await keycloak.login({ redirectUri: getRedirectUri() });
+      },
+
+      register: async () => {
+        await keycloak.login({ redirectUri: getRedirectUri(), action: 'REGISTER' });
+      },
+
+      logout: async () => {
+        await keycloak.logout({ redirectUri: getRedirectUri() });
+      },
+    },
+  };
+};
+
+export default API;

src/frontend/js/api/authentication.ts

@@ -11,6 +11,7 @@ import { Nullable } from 'types/utils';
 import context from 'utils/context';
 import { APIAuthentication, APIBackend } from 'types/api';
 import DummyApiInterface from './lms/dummy';
+import KeycloakApiInterface from './auth/keycloak';
 import OpenEdxDogwoodApiInterface from './lms/openedx-dogwood';
 import OpenEdxHawthornApiInterface from './lms/openedx-hawthorn';
 import OpenEdxFonzieApiInterface from './lms/openedx-fonzie';
@@ -22,6 +23,8 @@ const AuthenticationAPIHandler = (): Nullable<APIAuthentication> => {
   switch (AUTHENTICATION.backend) {
     case APIBackend.DUMMY:
       return DummyApiInterface(AUTHENTICATION).user;
+    case APIBackend.KEYCLOAK:
+      return KeycloakApiInterface(AUTHENTICATION).user;
     case APIBackend.OPENEDX_DOGWOOD:
       return OpenEdxDogwoodApiInterface(AUTHENTICATION).user;
     case APIBackend.OPENEDX_HAWTHORN:

src/frontend/js/types/api.ts

@@ -60,6 +60,7 @@ export enum APIBackend {
   DUMMY = 'dummy',
   FONZIE = 'fonzie',
   JOANIE = 'joanie',
+  KEYCLOAK = 'keycloak',
   OPENEDX_DOGWOOD = 'openedx-dogwood',
   OPENEDX_HAWTHORN = 'openedx-hawthorn',
 }

src/frontend/js/types/commonDataProps.ts

@@ -14,6 +14,17 @@ export interface LMSBackend {
 export interface AuthenticationBackend {
   backend: string;
   endpoint: string;
+  client_id?: string;
+  realm?: string;
+  token?: string;
+  auth_url?: string;
+  registration_url?: string;
+  user_info_url?: string;
+  logout_url?: string;
+  user?: {
+    username: string;
+    email: string;
+  };
 }
 
 enum FEATURES {

src/frontend/package.json

@@ -118,6 +118,7 @@
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "js-cookie": "3.0.5",
+    "keycloak-js": "26.2.2",
     "lodash-es": "4.17.21",
     "mdn-polyfills": "5.20.0",
     "msw": "2.7.3",

src/frontend/tsconfig.json

@@ -19,7 +19,8 @@
     "module": "esnext",
     "moduleResolution": "node",
     "paths": {
-      "intl-pluralrules": ["types/libs/intl-pluralrules"]
+      "intl-pluralrules": ["types/libs/intl-pluralrules"],
+      "keycloak-js": ["../node_modules/keycloak-js/lib/keycloak"]
     },
     "resolveJsonModule": true,
     "skipLibCheck": true,

src/frontend/yarn.lock

@@ -8398,6 +8398,11 @@ jsonify@^0.0.1:
     object.assign "^4.1.4"
     object.values "^1.1.6"
 
+keycloak-js@26.2.2:
+  version "26.2.2"
+  resolved "https://registry.yarnpkg.com/keycloak-js/-/keycloak-js-26.2.2.tgz#857ea50b89d6c979870919d525991f6553a6edb0"
+  integrity sha512-ug7pNZ1xNkd7PPkerOJCEU2VnUhS7CYStDOCFJgqCNQ64h53ppxaKrh4iXH0xM8hFu5b1W6e6lsyYWqBMvaQFg==
+
 keyv@^4.5.3:
   version "4.5.4"
   resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"