richie-education 3.3.1-dev5 → 3.3.1-dev8

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

@@ -44,8 +44,8 @@ jest.mock('utils/context', () => ({
     authentication: {
       backend: 'keycloak',
       endpoint: 'https://keycloak.test/auth',
-      client_id: 'richie-client',
-      realm: 'richie-realm',
+      keycloak_client_id: 'richie-client',
+      keycloak_realm: 'richie-realm',
       auth_url: 'https://keycloak.test/auth/realms/richie-realm/protocol/openid-connect/auth',
     },
   }).one(),
@@ -55,8 +55,9 @@ describe('Keycloak API', () => {
   const authConfig = {
     backend: 'keycloak',
     endpoint: 'https://keycloak.test/auth',
-    client_id: 'richie-client',
-    realm: 'richie-realm',
+    keycloak_endpoint: 'https://keycloak.test/auth',
+    keycloak_client_id: 'richie-client',
+    keycloak_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',

package/js/api/auth/keycloak.ts

@@ -9,8 +9,8 @@ import { RICHIE_USER_TOKEN } from 'settings';
 const API = (APIConf: AuthenticationBackend): { user: APIAuthentication } => {
   const keycloak = new Keycloak({
     url: APIConf.endpoint,
-    realm: APIConf.realm!,
-    clientId: APIConf.client_id!,
+    realm: APIConf.keycloak_realm!,
+    clientId: APIConf.keycloak_client_id!,
   });
   const initPromise = keycloak.init({
     checkLoginIframe: false,

package/js/api/authentication.ts

@@ -15,6 +15,7 @@ import KeycloakApiInterface from './auth/keycloak';
 import OpenEdxDogwoodApiInterface from './lms/openedx-dogwood';
 import OpenEdxHawthornApiInterface from './lms/openedx-hawthorn';
 import OpenEdxFonzieApiInterface from './lms/openedx-fonzie';
+import OpenEdxFonzieKeycloakApiInterface from './lms/openedx-fonzie-keycloak';
 
 const AuthenticationAPIHandler = (): Nullable<APIAuthentication> => {
   const AUTHENTICATION: AuthenticationBackend = context?.authentication;
@@ -31,6 +32,8 @@ const AuthenticationAPIHandler = (): Nullable<APIAuthentication> => {
       return OpenEdxHawthornApiInterface(AUTHENTICATION).user;
     case APIBackend.FONZIE:
       return OpenEdxFonzieApiInterface(AUTHENTICATION).user;
+    case APIBackend.FONZIE_KEYCLOAK:
+      return OpenEdxFonzieKeycloakApiInterface(AUTHENTICATION).user;
     default:
       handle(new Error(`No Authentication Backend found for ${AUTHENTICATION.backend}.`));
       return null;

package/js/api/lms/openedx-fonzie-keycloak.spec.ts

@@ -0,0 +1,79 @@
+import { faker } from '@faker-js/faker';
+import fetchMock from 'fetch-mock';
+import { RICHIE_USER_TOKEN } from 'settings';
+import { OpenEdxApiProfileFactory } from 'utils/test/factories/openEdx';
+import { location } from 'utils/indirection/window';
+import FonzieKeycloakAPIInterface from './openedx-fonzie-keycloak';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: null,
+}));
+
+jest.mock('utils/indirection/window', () => ({
+  location: {
+    href: 'http://localhost/',
+    assign: jest.fn(),
+  },
+}));
+
+describe('Fonzie Keycloak API', () => {
+  const configuration = {
+    backend: 'fonzie-keycloak',
+    course_regexp: '.*',
+    endpoint: 'https://demo.endpoint.api',
+    keycloak_endpoint: 'https://keycloak.test/auth',
+    keycloak_realm: 'richie-realm',
+  };
+
+  beforeEach(() => {
+    fetchMock.restore();
+    jest.clearAllMocks();
+  });
+
+  it('uses its own route to get user information', async () => {
+    const user = {
+      username: faker.internet.username(),
+    };
+
+    fetchMock.get('https://demo.endpoint.api/api/v1.0/user/me', user);
+
+    const api = FonzieKeycloakAPIInterface(configuration);
+    await expect(api.user.me()).resolves.toEqual(user);
+  });
+
+  it('redirects to keycloak-login endpoint on login', () => {
+    const api = FonzieKeycloakAPIInterface(configuration);
+    api.user.login!();
+
+    expect(location.assign).toHaveBeenCalledWith(
+      `https://demo.endpoint.api/keycloak-login?next=${encodeURIComponent('http://localhost/')}`,
+    );
+  });
+
+  it('uses keycloak account URL to get user profile', async () => {
+    const openEdxApiProfile = OpenEdxApiProfileFactory().one();
+    const { 'pref-lang': language, ...account } = openEdxApiProfile;
+
+    fetchMock.get('https://keycloak.test/auth/realms/richie-realm/account/', account);
+    fetchMock.get(
+      `https://demo.endpoint.api/api/user/v1/preferences/${openEdxApiProfile.username}`,
+      { 'pref-lang': language },
+    );
+
+    const api = FonzieKeycloakAPIInterface(configuration);
+    expect(await api.user.account!.get(openEdxApiProfile.username)).toEqual(openEdxApiProfile);
+    expect(fetchMock.calls()).toHaveLength(2);
+  });
+
+  it('is able to retrieve access token within the session storage', () => {
+    const accessToken = faker.string.uuid();
+    sessionStorage.setItem(RICHIE_USER_TOKEN, accessToken);
+
+    const api = FonzieKeycloakAPIInterface(configuration);
+    expect(api.user.accessToken).not.toBeUndefined();
+
+    const token = api.user.accessToken!();
+    expect(token).toEqual(accessToken);
+  });
+});

package/js/api/lms/openedx-fonzie-keycloak.ts

@@ -0,0 +1,106 @@
+import Cookies from 'js-cookie';
+import { AuthenticationBackend } from 'types/commonDataProps';
+import { APILms } from 'types/api';
+import { RICHIE_USER_TOKEN, EDX_CSRF_TOKEN_COOKIE_NAME } from 'settings';
+import { isHttpError } from 'utils/errors/HttpError';
+import { handle } from 'utils/errors/handle';
+import { OpenEdxApiProfile } from 'types/openEdx';
+import { checkStatus } from 'api/utils';
+import { OpenEdxFullNameFormValues } from 'components/OpenEdxFullNameForm';
+import { location } from 'utils/indirection/window';
+import OpenEdxHawthornApiInterface from './openedx-hawthorn';
+
+/**
+ *
+ * OpenEdX completed by Fonzie API Implementation
+ *
+ * This implementation inherits from Hawthorn implementation.
+ * The `user.me` method has to be overriden to retrieve user information from
+ * fonzie API to retrieve a JWT Token
+ *
+ * A method `accessToken` has been added to retrieve the access_token
+ * stored in the persisted client by react query within SessionStorage.
+ *
+ * Related resources:
+ * https://github.com/openfun/fonzie/pull/24
+ *
+ */
+
+const API = (APIConf: AuthenticationBackend): APILms => {
+  const APIOptions = {
+    routes: {
+      user: {
+        login: `${APIConf.endpoint}/keycloak-login`,
+        me: `${APIConf.endpoint}/api/v1.0/user/me`,
+        account: `${APIConf.keycloak_endpoint}/realms/${APIConf.keycloak_realm}/account/`,
+        preferences: `${APIConf.endpoint}/api/user/v1/preferences/:username`,
+      },
+    },
+  };
+
+  const ApiInterface = OpenEdxHawthornApiInterface(APIConf, APIOptions);
+  return {
+    ...ApiInterface,
+    user: {
+      ...ApiInterface.user,
+      login: () => {
+        const next = encodeURIComponent(location.href);
+        location.assign(`${APIOptions.routes.user.login}?next=${next}`);
+      },
+      accessToken: () => {
+        return sessionStorage.getItem(RICHIE_USER_TOKEN);
+      },
+      account: {
+        get: async (username: string) => {
+          const options: RequestInit = {
+            credentials: 'include',
+          };
+
+          try {
+            const account = await fetch(
+              APIOptions.routes.user.account.replace(':username', username),
+              options,
+            ).then(checkStatus);
+            const preferences = await fetch(
+              APIOptions.routes.user.preferences.replace(':username', username),
+              options,
+            ).then(checkStatus);
+
+            return {
+              ...account,
+              ...preferences,
+            } as OpenEdxApiProfile;
+          } catch (e) {
+            if (isHttpError(e)) {
+              handle(new Error(`[GET - Account] > ${e.code} - ${e.message}`));
+            }
+
+            throw e;
+          }
+        },
+        update: async (username: string, data: OpenEdxFullNameFormValues) => {
+          const csrfToken = Cookies.get(EDX_CSRF_TOKEN_COOKIE_NAME) || '';
+          try {
+            return await fetch(APIOptions.routes.user.account.replace(':username', username), {
+              method: 'PATCH',
+              credentials: 'include',
+              headers: {
+                'Content-Type': 'application/merge-patch+json',
+                'X-CSRFTOKEN': csrfToken,
+              },
+              body: JSON.stringify(data),
+            }).then(checkStatus);
+          } catch (e) {
+            if (isHttpError(e)) {
+              handle(new Error(`[POST - Account] > ${e.code} - ${e.message}`));
+            }
+
+            throw e;
+          }
+        },
+      },
+    },
+  };
+};
+
+export default API;

package/js/types/api.ts

@@ -68,6 +68,7 @@ export interface APIOptions {
 export enum APIBackend {
   DUMMY = 'dummy',
   FONZIE = 'fonzie',
+  FONZIE_KEYCLOAK = 'fonzie-keycloak',
   JOANIE = 'joanie',
   KEYCLOAK = 'keycloak',
   OPENEDX_DOGWOOD = 'openedx-dogwood',

package/js/types/commonDataProps.ts

@@ -14,8 +14,9 @@ export interface LMSBackend {
 export interface AuthenticationBackend {
   backend: string;
   endpoint: string;
-  client_id?: string;
-  realm?: string;
+  keycloak_client_id?: string;
+  keycloak_endpoint?: string;
+  keycloak_realm?: string;
   token?: string;
   auth_url?: string;
   registration_url?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "3.3.1-dev5",
+  "version": "3.3.1-dev8",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {