richie-education 3.3.0 → 3.3.1-dev11

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',
@@ -84,6 +85,22 @@ describe('Keycloak API', () => {
   });
 
   describe('user.me', () => {
+    it('returns null when init returns false (not authenticated)', async () => {
+      mockKeycloakInit.mockResolvedValueOnce(false);
+      const api = API(authConfig);
+      const response = await api.user.me();
+      expect(response).toBeNull();
+      expect(mockKeycloakUpdateToken).not.toHaveBeenCalled();
+    });
+
+    it('returns null when init rejects', async () => {
+      mockKeycloakInit.mockRejectedValueOnce(new Error('Init failed'));
+      const api = API(authConfig);
+      const response = await api.user.me();
+      expect(response).toBeNull();
+      expect(mockKeycloakUpdateToken).not.toHaveBeenCalled();
+    });
+
     it('returns null when updateToken fails', async () => {
       mockKeycloakUpdateToken.mockRejectedValueOnce(new Error('Token refresh failed'));
       const response = await keycloakApi.user.me();

package/js/api/auth/keycloak.ts

@@ -9,10 +9,10 @@ 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!,
   });
-  keycloak.init({
+  const initPromise = keycloak.init({
     checkLoginIframe: false,
     flow: 'standard',
     onLoad: 'check-sso',
@@ -39,6 +39,15 @@ const API = (APIConf: AuthenticationBackend): { user: APIAuthentication } => {
     user: {
       accessToken: () => sessionStorage.getItem(RICHIE_USER_TOKEN),
       me: async () => {
+        let isAuthenticated: boolean;
+        try {
+          isAuthenticated = await initPromise;
+        } catch (error) {
+          handle(error);
+          return null;
+        }
+        if (!isAuthenticated) return null;
+
         try {
           await keycloak.updateToken(30);
         } catch (error) {

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/components/SaleTunnel/SaleTunnelInformation/SaleTunnelInformationSingular.tsx

@@ -146,9 +146,8 @@ export const SaleTunnelInformationSingular = () => {
   const discount = query.data?.discount ?? props.paymentPlan?.discount;
   const fromBatchOrder = query.data?.from_batch_order ?? props.paymentPlan?.from_batch_order;
 
-  const showPaymentSchedule =
+  const isCredentialWithPrice =
     product.type === ProductType.CREDENTIAL &&
-    schedule &&
     (discountedPrice != null ? discountedPrice > 0 : price != null && price > 0);
 
   useEffect(() => {
@@ -168,7 +167,9 @@ export const SaleTunnelInformationSingular = () => {
     setNeedsPayment(!fromBatchOrder);
   }, [fromBatchOrder, setNeedsPayment]);
 
-  const isKeycloakBackend = context?.authentication.backend === APIBackend.KEYCLOAK;
+  const isKeycloakBackend = [APIBackend.KEYCLOAK, APIBackend.FONZIE_KEYCLOAK].includes(
+    context?.authentication.backend as APIBackend,
+  );
 
   return (
     <>
@@ -204,18 +205,19 @@ export const SaleTunnelInformationSingular = () => {
         </div>
       )}
       <div>
-        {showPaymentSchedule ? (
-          <PaymentScheduleBlock schedule={schedule!} />
-        ) : (
-          <div>
-            <h4 className="block-title">
-              <FormattedMessage {...messages.paymentSchedule} />
-            </h4>
-            <Alert type={VariantType.NEUTRAL}>
-              <FormattedMessage {...messages.noPaymentSchedule} />
-            </Alert>
-          </div>
-        )}
+        {isCredentialWithPrice &&
+          (schedule ? (
+            <PaymentScheduleBlock schedule={schedule!} />
+          ) : (
+            <div>
+              <h4 className="block-title">
+                <FormattedMessage {...messages.paymentSchedule} />
+              </h4>
+              <Alert type={VariantType.NEUTRAL}>
+                <FormattedMessage {...messages.noPaymentSchedule} />
+              </Alert>
+            </div>
+          ))}
         <Voucher
           discount={discount}
           voucherError={voucherError}

package/js/components/SaleTunnel/index.full-process-b2b.spec.tsx

@@ -374,8 +374,16 @@ describe('SaleTunnel', () => {
     );
     await user.type(screen.getByLabelText('Voucher code'), 'DISCOUNT100');
     await user.click(screen.getByRole('button', { name: 'Validate' }));
-    await screen.findByRole('heading', { level: 4, name: 'Payment schedule' });
-    screen.getByText('No payment required. This order is fully covered.');
+    await screen.findByRole('heading', { level: 3, name: 'Information' });
+    await screen.findByText(
+      'No billing information required. This order is covered by your organization.',
+    );
+    expect(
+      screen.queryByRole('heading', { level: 4, name: 'Payment schedule' }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText('No payment required. This order is fully covered.'),
+    ).not.toBeInTheDocument();
     await screen.findByTestId('sale-tunnel__total__amount');
     const $totalAmountVoucher = screen.getByTestId('sale-tunnel__total__amount');
     expect($totalAmountVoucher).toHaveTextContent(

package/js/components/SaleTunnel/index.spec.tsx

@@ -484,8 +484,12 @@ describe.each([
         });
       });
     } else {
-      await screen.findByRole('heading', { level: 4, name: 'Payment schedule' });
-      screen.getByText('No payment required. This order is fully covered.');
+      expect(
+        screen.queryByRole('heading', { level: 4, name: 'Payment schedule' }),
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByText('No payment required. This order is fully covered.'),
+      ).not.toBeInTheDocument();
       expect(screen.queryByRole('table')).toBeNull();
     }
 
@@ -624,8 +628,12 @@ describe.each([
         });
       });
     } else {
-      await screen.findByRole('heading', { level: 4, name: 'Payment schedule' });
-      screen.getByText('No payment required. This order is fully covered.');
+      expect(
+        screen.queryByRole('heading', { level: 4, name: 'Payment schedule' }),
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByText('No payment required. This order is fully covered.'),
+      ).not.toBeInTheDocument();
       expect(screen.queryByRole('table')).toBeNull();
     }
 
@@ -838,10 +846,12 @@ describe.each([
         'No billing information required. This order is covered by your organization.',
       ),
     ).toBeInTheDocument();
-    expect(screen.getByRole('heading', { level: 4, name: 'Payment schedule' })).toBeInTheDocument();
     expect(
-      screen.getByText('No payment required. This order is fully covered.'),
-    ).toBeInTheDocument();
+      screen.queryByRole('heading', { level: 4, name: 'Payment schedule' }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText('No payment required. This order is fully covered.'),
+    ).not.toBeInTheDocument();
   });
 
   it('should hide voucher code input when one is already used', async () => {
@@ -1022,4 +1032,52 @@ describe('SaleTunnel with Keycloak backend', () => {
     // No OpenEdx profile API calls should have been made
     expect(fetchMock.calls().filter(([url]) => url.includes('/api/user/v1/'))).toHaveLength(0);
   });
+
+  it('should render keycloak account info when using fonzie-keycloak backend', async () => {
+    // Switch to fonzie-keycloak backend
+    const ctx = require('utils/context').default;
+    ctx.authentication.backend = 'fonzie-keycloak';
+
+    const product = CredentialProductFactory().one();
+    const paymentPlan = PaymentPlanFactory().one();
+
+    fetchMock
+      .get(
+        `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify({
+          course_code: course.code,
+          product_id: product.id,
+          state: NOT_CANCELED_ORDER_STATES,
+        })}`,
+        [],
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
+        paymentPlan,
+      );
+
+    render(<Wrapper product={product} isWithdrawable={true} paymentPlan={paymentPlan} />, {
+      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+    });
+
+    // Should display the "Account name" heading (keycloak flow)
+    await screen.findByRole('heading', { level: 4, name: 'Account name' });
+
+    // Should display the username from the session
+    screen.getByText(richieUser.username);
+
+    // Should display the email from the session
+    screen.getByText(richieUser.email!);
+
+    // Should display the keycloak account update link
+    const updateLink = screen.getByRole('link', {
+      name: 'please update your account',
+    });
+    expect(updateLink).toHaveAttribute('href', mockAccountUpdateUrl);
+
+    // Should NOT render the OpenEdx full name form
+    expect(screen.queryByLabelText('First name and last name')).not.toBeInTheDocument();
+
+    // No OpenEdx profile API calls should have been made
+    expect(fetchMock.calls().filter(([url]) => url.includes('/api/user/v1/'))).toHaveLength(0);
+  });
 });

package/js/pages/DashboardKeycloakProfile/index.spec.tsx

@@ -0,0 +1,77 @@
+import { screen } from '@testing-library/dom';
+import {
+  UserFactory,
+  RichieContextFactory as mockRichieContextFactory,
+} from 'utils/test/factories/richie';
+import { render } from 'utils/test/render';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { User } from 'types/User';
+import { AuthenticationApi } from 'api/authentication';
+import { APIAuthentication } from 'types/api';
+import DashboardKeycloakProfile, { DEFAULT_DISPLAYED_FORM_VALUE } from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: {
+      endpoint: 'https://endpoint.test',
+      backend: 'fonzie',
+    },
+    joanie_backend: {
+      endpoint: 'https://joanie.endpoint',
+    },
+  }).one(),
+}));
+
+describe('pages.DashboardKeycloakProfile', () => {
+  let richieUser: User;
+  let originalAccount: APIAuthentication['account'];
+  const mockAccountUpdateUrl = 'https://keycloak.test/auth/realms/richie/account';
+  setupJoanieSession();
+
+  beforeEach(() => {
+    richieUser = UserFactory().one();
+    originalAccount = AuthenticationApi!.account;
+    AuthenticationApi!.account = {
+      get: () => ({
+        username: richieUser.username,
+        email: richieUser.email,
+        firstName: null,
+        lastName: null,
+      }),
+      updateUrl: () => mockAccountUpdateUrl,
+    };
+  });
+
+  afterEach(() => {
+    AuthenticationApi!.account = originalAccount;
+  });
+
+  it('should render profile information', async () => {
+    render(<DashboardKeycloakProfile />, {
+      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+    });
+
+    expect(screen.getByText('Profile')).toBeInTheDocument();
+    expect(screen.getByText('Account information')).toBeInTheDocument();
+
+    expect(await screen.findByDisplayValue(richieUser.username)).toBeInTheDocument();
+    expect(screen.getByDisplayValue(richieUser.email!)).toBeInTheDocument();
+
+    const editLink = screen.getByRole('link', { name: 'Edit your profile' });
+    expect(editLink).toBeInTheDocument();
+    expect(editLink).toHaveAttribute('href', mockAccountUpdateUrl);
+  });
+
+  it('should render default values when user fields are empty', async () => {
+    const userWithoutEmail = UserFactory({ email: undefined }).one();
+
+    render(<DashboardKeycloakProfile />, {
+      queryOptions: { client: createTestQueryClient({ user: userWithoutEmail }) },
+    });
+
+    expect(await screen.findByDisplayValue(userWithoutEmail.username)).toBeInTheDocument();
+    expect(screen.getByLabelText('Account email')).toHaveValue(DEFAULT_DISPLAYED_FORM_VALUE);
+  });
+});

package/js/pages/DashboardKeycloakProfile/index.tsx

@@ -0,0 +1,92 @@
+import { Button, Input } from '@openfun/cunningham-react';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+import { useSession } from 'contexts/SessionContext';
+import { DashboardBox } from 'widgets/Dashboard/components/DashboardBox';
+import { DashboardCard } from 'widgets/Dashboard/components/DashboardCard';
+import Form from 'components/Form';
+import { AuthenticationApi } from 'api/authentication';
+import { KeycloakAccountApi } from 'types/api';
+
+const messages = defineMessages({
+  sectionHeader: {
+    id: 'components.DashboardKeycloakProfile.header',
+    description: 'Title of the dashboard keycloak profile block',
+    defaultMessage: 'Profile',
+  },
+  accountInformationHeader: {
+    id: 'components.DashboardKeycloakProfile.accountInformationHeader',
+    description: 'Title of the keycloak profile form "account information" block',
+    defaultMessage: 'Account information',
+  },
+  editButtonLabel: {
+    id: 'components.DashboardKeycloakProfile.editButtonLabel',
+    description: 'Label of the edit button link of the keycloak profile',
+    defaultMessage: 'Edit your profile',
+  },
+  usernameInputLabel: {
+    id: 'components.DashboardKeycloakProfile.usernameInputLabel',
+    description: 'Label of the keycloak profile "username" input',
+    defaultMessage: 'Account name',
+  },
+  usernameInputDescription: {
+    id: 'components.DashboardKeycloakProfile.usernameInputDescription',
+    description: 'Description of the keycloak profile "username" input',
+    defaultMessage: 'This name will be used in legal documents.',
+  },
+  emailInputLabel: {
+    id: 'components.DashboardKeycloakProfile.emailInputLabel',
+    description: 'Label of the keycloak profile "email" input',
+    defaultMessage: 'Account email',
+  },
+  emailInputDescription: {
+    id: 'components.DashboardKeycloakProfile.emailInputDescription',
+    description: 'Description of the keycloak profile "email" input',
+    defaultMessage: 'This email will be used to send you confirmation mails.',
+  },
+});
+
+export const DEFAULT_DISPLAYED_FORM_VALUE = ' - ';
+
+const DashboardKeycloakProfile = () => {
+  const intl = useIntl();
+  const { user } = useSession();
+  const accountApi = AuthenticationApi!.account as KeycloakAccountApi;
+
+  return (
+    <DashboardCard header={<FormattedMessage {...messages.sectionHeader} />}>
+      <DashboardBox.List>
+        <DashboardBox header={<FormattedMessage {...messages.accountInformationHeader} />}>
+          <Form.Row>
+            <Input
+              className="form-field"
+              fullWidth
+              name="username"
+              label={intl.formatMessage(messages.usernameInputLabel)}
+              disabled={true}
+              value={user?.username || DEFAULT_DISPLAYED_FORM_VALUE}
+              text={intl.formatMessage(messages.usernameInputDescription)}
+            />
+          </Form.Row>
+          <Form.Row>
+            <Input
+              className="form-field"
+              fullWidth
+              name="email"
+              label={intl.formatMessage(messages.emailInputLabel)}
+              disabled={true}
+              value={user?.email || DEFAULT_DISPLAYED_FORM_VALUE}
+              text={intl.formatMessage(messages.emailInputDescription)}
+            />
+          </Form.Row>
+        </DashboardBox>
+      </DashboardBox.List>
+
+      <Form.Footer>
+        <Button fullWidth href={accountApi.updateUrl()}>
+          <FormattedMessage {...messages.editButtonLabel} />
+        </Button>
+      </Form.Footer>
+    </DashboardCard>
+  );
+};
+export default DashboardKeycloakProfile;

package/js/pages/DashboardPreferences/index.spec.tsx

@@ -0,0 +1,141 @@
+import { act, render, screen } from '@testing-library/react';
+import fetchMock from 'fetch-mock';
+import {
+  UserFactory,
+  RichieContextFactory as mockRichieContextFactory,
+} from 'utils/test/factories/richie';
+import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
+import { OpenEdxApiProfileFactory } from 'utils/test/factories/openEdx';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { User } from 'types/User';
+import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
+import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
+import context from 'utils/context';
+import { AuthenticationApi } from 'api/authentication';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://endpoint.test' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+jest.mock('utils/indirection/window', () => ({
+  confirm: jest.fn(() => true),
+}));
+
+describe('<DashboardPreferences />', () => {
+  let richieUser: User;
+  const mockAccountUpdateUrl = 'https://keycloak.test/auth/realms/richie/account';
+
+  beforeEach(() => {
+    richieUser = UserFactory().one();
+    const openEdxProfile = OpenEdxApiProfileFactory({
+      username: richieUser.username,
+      email: richieUser.email,
+      name: richieUser.full_name,
+    }).one();
+    const { 'pref-lang': prefLang, ...openEdxAccount } = openEdxProfile;
+
+    fetchMock.get('https://endpoint.test/api/v1.0/user/me', richieUser);
+    fetchMock.get(
+      `https://endpoint.test/api/user/v1/accounts/${richieUser.username}`,
+      openEdxAccount,
+    );
+    fetchMock.get(`https://endpoint.test/api/user/v1/preferences/${richieUser.username}`, {
+      'pref-lang': prefLang,
+    });
+
+    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    fetchMock.restore();
+  });
+
+  it('should render the OpenEdx profile section when using fonzie backend', async () => {
+    const client = createTestQueryClient({ user: richieUser });
+    await act(async () => {
+      render(
+        <BaseJoanieAppWrapper queryOptions={{ client }}>
+          <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
+        </BaseJoanieAppWrapper>,
+      );
+    });
+
+    // The OpenEdx profile section should be visible
+    await screen.findByText('Profile');
+  });
+
+  it('should render the keycloak profile section when using keycloak backend', async () => {
+    const originalBackend = context.authentication.backend;
+    context.authentication.backend = 'keycloak';
+    const originalAccount = AuthenticationApi!.account;
+    AuthenticationApi!.account = {
+      get: () => ({
+        username: richieUser.username,
+        email: richieUser.email,
+        firstName: null,
+        lastName: null,
+      }),
+      updateUrl: () => mockAccountUpdateUrl,
+    };
+
+    const client = createTestQueryClient({ user: richieUser });
+    await act(async () => {
+      render(
+        <BaseJoanieAppWrapper queryOptions={{ client }}>
+          <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
+        </BaseJoanieAppWrapper>,
+      );
+    });
+
+    // The keycloak profile section should be visible
+    await screen.findByText('Account name');
+    await screen.findByText('Account email');
+    await screen.findByText('Edit your profile');
+    // The OpenEdx-specific section should NOT be visible
+    expect(screen.queryByText('Basic account information')).not.toBeInTheDocument();
+
+    context.authentication.backend = originalBackend;
+    AuthenticationApi!.account = originalAccount;
+  });
+
+  it('should render the keycloak profile section when using fonzie-keycloak backend', async () => {
+    const originalBackend = context.authentication.backend;
+    context.authentication.backend = 'fonzie-keycloak';
+    const originalAccount = AuthenticationApi!.account;
+    AuthenticationApi!.account = {
+      get: () => ({
+        username: richieUser.username,
+        email: richieUser.email,
+        firstName: null,
+        lastName: null,
+      }),
+      updateUrl: () => mockAccountUpdateUrl,
+    };
+
+    const client = createTestQueryClient({ user: richieUser });
+    await act(async () => {
+      render(
+        <BaseJoanieAppWrapper queryOptions={{ client }}>
+          <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
+        </BaseJoanieAppWrapper>,
+      );
+    });
+
+    // The keycloak profile section should be visible
+    await screen.findByText('Account name');
+    await screen.findByText('Account email');
+    await screen.findByText('Edit your profile');
+    // The OpenEdx-specific section should NOT be visible
+    expect(screen.queryByText('Basic account information')).not.toBeInTheDocument();
+
+    context.authentication.backend = originalBackend;
+    AuthenticationApi!.account = originalAccount;
+  });
+});

package/js/pages/DashboardPreferences/index.tsx

@@ -2,17 +2,23 @@ import { DashboardCreditCardsManagement } from 'pages/DashboardCreditCardsManage
 import { DashboardAddressesManagement } from 'pages/DashboardAddressesManagement';
 import { useDashboardNavigate } from 'widgets/Dashboard/hooks/useDashboardRouter';
 import DashboardOpenEdxProfile from 'pages/DashboardOpenEdxProfile';
+import DashboardKeycloakProfile from 'pages/DashboardKeycloakProfile';
 
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
+import { APIBackend } from 'types/api';
+import context from 'utils/context';
 
 /**
  * This component relies on react-router.
  */
 export const DashboardPreferences = () => {
   const navigate = useDashboardNavigate();
+  const isKeycloakBackend = [APIBackend.KEYCLOAK, APIBackend.FONZIE_KEYCLOAK].includes(
+    context?.authentication.backend as APIBackend,
+  );
   return (
     <div className="dashboard-preferences">
-      <DashboardOpenEdxProfile />
+      {isKeycloakBackend ? <DashboardKeycloakProfile /> : <DashboardOpenEdxProfile />}
       <DashboardAddressesManagement
         onClickCreate={() => navigate(LearnerDashboardPaths.PREFERENCES_ADDRESS_CREATION)}
         onClickEdit={(address) =>

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/js/widgets/Dashboard/components/LearnerDashboardSidebar/index.tsx

@@ -7,8 +7,6 @@ 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';
@@ -32,18 +30,15 @@ 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(
     () =>
-      dashboardPaths.map((path) => ({
+      [
+        LearnerDashboardPaths.COURSES,
+        LearnerDashboardPaths.CERTIFICATES,
+        LearnerDashboardPaths.CONTRACTS,
+        LearnerDashboardPaths.PREFERENCES,
+        LearnerDashboardPaths.BATCH_ORDERS,
+      ].map((path) => ({
         to: generatePath(path),
         label: getRouteLabel(path),
         activePaths:

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

@@ -212,7 +212,8 @@ describe('<Dashboard />', () => {
     expect(screen.getByRole('heading', { name: /Page not found/ }));
   });
 
-  it('should not show preferences link when using keycloak backend', async () => {
+  it('should show preferences link when using keycloak backend', async () => {
+    // The guard moved from the sidebar to DashboardPreferences itself.
     // Temporarily change the authentication backend to keycloak
     const originalBackend = context.authentication.backend;
     context.authentication.backend = 'keycloak';
@@ -224,8 +225,8 @@ describe('<Dashboard />', () => {
 
     const sidebar = screen.getByTestId('dashboard__sidebar');
 
-    // Verify that "My preferences" link is NOT present in the sidebar
-    expect(queryByText(sidebar, 'My preferences')).toBeNull();
+    // "My preferences" link is always present in the sidebar regardless of backend
+    expect(queryByText(sidebar, 'My preferences')).not.toBeNull();
 
     // Restore original backend
     context.authentication.backend = originalBackend;

package/package.json

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