richie-education 3.2.2-dev27 → 3.2.2-dev30

package/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',

package/js/api/auth/keycloak.spec.ts

@@ -0,0 +1,126 @@
+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,
+      });
+    });
+  });
+});

package/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;

package/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:

package/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',
 }

package/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 {

package/js/widgets/Dashboard/components/LearnerDashboardSidebar/index.tsx

@@ -7,6 +7,8 @@ import {
   DashboardSidebarProps,
 } from 'widgets/Dashboard/components/DashboardSidebar';
 import { useSession } from 'contexts/SessionContext';
+import { APIBackend } from 'types/api';
+import context from 'utils/context';
 import { UserHelper } from 'utils/UserHelper';
 
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
@@ -30,15 +32,18 @@ export const LearnerDashboardSidebar = (props: Partial<DashboardSidebarProps>) =
 
   const getRouteLabel = getDashboardRouteLabel(intl);
 
+  const dashboardPaths = [
+    LearnerDashboardPaths.COURSES,
+    LearnerDashboardPaths.CERTIFICATES,
+    LearnerDashboardPaths.CONTRACTS,
+    LearnerDashboardPaths.BATCH_ORDERS,
+  ];
+  if (context?.authentication.backend !== APIBackend.KEYCLOAK) {
+    dashboardPaths.push(LearnerDashboardPaths.PREFERENCES);
+  }
   const links = useMemo(
     () =>
-      [
-        LearnerDashboardPaths.COURSES,
-        LearnerDashboardPaths.CERTIFICATES,
-        LearnerDashboardPaths.CONTRACTS,
-        LearnerDashboardPaths.PREFERENCES,
-        LearnerDashboardPaths.BATCH_ORDERS,
-      ].map((path) => ({
+      dashboardPaths.map((path) => ({
         to: generatePath(path),
         label: getRouteLabel(path),
         activePaths:

package/js/widgets/Dashboard/index.spec.tsx

@@ -1,4 +1,4 @@
-import { getByText, screen } from '@testing-library/react';
+import { getByText, queryByText, screen } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import userEvent from '@testing-library/user-event';
 import {
@@ -17,6 +17,7 @@ import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
 import { expectNoSpinner } from 'utils/test/expectSpinner';
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
+import context from 'utils/context';
 import { DashboardTest } from './components/DashboardTest';
 
 jest.mock('utils/context', () => ({
@@ -210,4 +211,23 @@ describe('<Dashboard />', () => {
     expectUrlMatchLocationDisplayed('/dummy/route');
     expect(screen.getByRole('heading', { name: /Page not found/ }));
   });
+
+  it('should not show preferences link when using keycloak backend', async () => {
+    // Temporarily change the authentication backend to keycloak
+    const originalBackend = context.authentication.backend;
+    context.authentication.backend = 'keycloak';
+
+    render(<DashboardTest initialRoute={LearnerDashboardPaths.COURSES} />, {
+      wrapper: BaseJoanieAppWrapper,
+    });
+    await expectNoSpinner('Loading orders and enrollments...');
+
+    const sidebar = screen.getByTestId('dashboard__sidebar');
+
+    // Verify that "My preferences" link is NOT present in the sidebar
+    expect(queryByText(sidebar, 'My preferences')).toBeNull();
+
+    // Restore original backend
+    context.authentication.backend = originalBackend;
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "3.2.2-dev27",
+  "version": "3.2.2-dev30",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {
@@ -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",

package/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,