fix: use role-based routing

Routes are nested by default, but navigation constants used absolute
paths like '/login', causing navigate() and <Navigate> to go to /login
instead of /authn/login.

Replace path constants in navigation calls with getUrlByRouteRole()
where possible, which resolves the URL for a given route role from the
route config. Path constants are still generally useful, but are now all
relative (and camelCase).

Centralize route roles, path segments, and the dashboard role in
src/constants.ts.

Last but not least, prefer SPA navigation (<Navigate>, useNavigate) over
window.location.href where the target URL may be internal.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: arbrandes

src/common-components/EmbeddedRegistrationRoute.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { Navigate } from 'react-router-dom';
 
-import { PAGE_NOT_FOUND } from '../data/constants';
+import { notFoundPath } from '../constants';
 import { isHostAvailableInQueryParams } from '../data/utils';
 
 /**
@@ -16,7 +16,7 @@ const EmbeddedRegistrationRoute = ({ children }) => {
     return children;
   }
 
-  return <Navigate to={PAGE_NOT_FOUND} replace />;
+  return <Navigate to={`../${notFoundPath}`} replace />;
 };
 
 EmbeddedRegistrationRoute.propTypes = {

src/common-components/EnterpriseSSO.jsx

@@ -1,20 +1,23 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { useAppConfig, getSiteConfig, getUrlByRouteRole, useIntl } from '@openedx/frontend-base';
 import {
   Button, Form,
   Icon,
 } from '@openedx/paragon';
 import { Login } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
+import { useNavigate } from 'react-router-dom';
 
-import { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';
+import { loginRole } from '../constants';
+import { SUPPORTED_ICON_CLASSES } from '../data/constants';
 import messages from './messages';
 
 /**
  * This component renders the Single sign-on (SSO) button only for the tpa provider passed
  * */
 const EnterpriseSSO = (props) => {
   const { formatMessage } = useIntl();
+  const navigate = useNavigate();
   const tpaProvider = props.provider;
   const hideRegistrationLink = useAppConfig().ALLOW_PUBLIC_ACCOUNT_CREATION === false
     || useAppConfig().SHOW_REGISTRATION_LINKS === false;
@@ -26,7 +29,7 @@ const EnterpriseSSO = (props) => {
 
   const handleClick = (e) => {
     e.preventDefault();
-    window.location.href = LOGIN_PAGE;
+    navigate(getUrlByRouteRole(loginRole));
   };
 
   if (tpaProvider) {

src/common-components/RedirectLogistration.jsx

@@ -1,10 +1,9 @@
-import { useAppConfig, getSiteConfig } from '@openedx/frontend-base';
+import { useAppConfig, getSiteConfig, getUrlByRouteRole } from '@openedx/frontend-base';
 import PropTypes from 'prop-types';
 import { Navigate } from 'react-router-dom';
 
-import {
-  AUTHN_PROGRESSIVE_PROFILING, REDIRECT,
-} from '../data/constants';
+import { welcomeRole } from '../constants';
+import { REDIRECT } from '../data/constants';
 import { setCookie } from '../data/utils';
 
 const RedirectLogistration = (props) => {
@@ -48,7 +47,7 @@ const RedirectLogistration = (props) => {
       const registrationResult = { redirectUrl: finalRedirectUrl, success };
       return (
         <Navigate
-          to={AUTHN_PROGRESSIVE_PROFILING}
+          to={getUrlByRouteRole(welcomeRole)}
           state={{
             registrationResult,
             optionalFields,

src/common-components/SocialAuthProviders.jsx

@@ -4,7 +4,8 @@ import { Icon } from '@openedx/paragon';
 import { Login } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 
-import { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';
+import { loginPath } from '../constants';
+import { SUPPORTED_ICON_CLASSES } from '../data/constants';
 import messages from './messages';
 
 const SocialAuthProviders = (props) => {
@@ -24,7 +25,7 @@ const SocialAuthProviders = (props) => {
       key={provider.id}
       type="button"
       className={`btn-social btn-${provider.id} ${index % 2 === 0 ? 'mr-3' : ''}`}
-      data-provider-url={referrer === LOGIN_PAGE ? provider.loginUrl : provider.registerUrl}
+      data-provider-url={referrer === loginPath ? provider.loginUrl : provider.registerUrl}
       onClick={handleSubmit}
     >
       {provider.iconImage ? (
@@ -43,7 +44,7 @@ const SocialAuthProviders = (props) => {
         )}
       <span id="provider-name" className="notranslate mr-auto pl-2" aria-hidden="true">{provider.name}</span>
       <span className="sr-only">
-        {referrer === LOGIN_PAGE
+        {referrer === loginPath
           ? formatMessage(messages['sso.sign.in.with'], { providerName: provider.name })
           : formatMessage(messages['sso.create.account.using'], { providerName: provider.name })}
       </span>
@@ -55,7 +56,7 @@ const SocialAuthProviders = (props) => {
 };
 
 SocialAuthProviders.defaultProps = {
-  referrer: LOGIN_PAGE,
+  referrer: loginPath,
   socialAuthProviders: [],
 };
 

src/common-components/ThirdPartyAuth.jsx

@@ -7,9 +7,8 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import Skeleton from 'react-loading-skeleton';
 
-import {
-  ENTERPRISE_LOGIN_URL, LOGIN_PAGE, PENDING_STATE, REGISTER_PAGE,
-} from '../data/constants';
+import { loginPath, registerPath } from '../constants';
+import { ENTERPRISE_LOGIN_URL, PENDING_STATE } from '../data/constants';
 import messages from './messages';
 
 import {
@@ -75,7 +74,7 @@ const ThirdPartyAuth = (props) => {
             <div className="row m-0">
               <SocialAuthProviders
                 socialAuthProviders={providers}
-                referrer={isLoginPage ? LOGIN_PAGE : REGISTER_PAGE}
+                referrer={isLoginPage ? loginPath : registerPath}
               />
             </div>
           )}

src/common-components/ThirdPartyAuthAlert.jsx

@@ -2,7 +2,7 @@ import { getSiteConfig, useIntl } from '@openedx/frontend-base';
 import { Alert } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
-import { LOGIN_PAGE, REGISTER_PAGE } from '../data/constants';
+import { loginPath, registerPath } from '../constants';
 import messages from './messages';
 
 const ThirdPartyAuthAlert = (props) => {
@@ -11,7 +11,7 @@ const ThirdPartyAuthAlert = (props) => {
   const platformName = getSiteConfig().siteName;
   let message;
 
-  if (referrer === LOGIN_PAGE) {
+  if (referrer === loginPath) {
     message = formatMessage(messages['login.third.party.auth.account.not.linked'], { currentProvider, platformName });
   } else {
     message = formatMessage(messages['register.third.party.auth.account.not.linked'], { currentProvider, platformName });
@@ -23,13 +23,13 @@ const ThirdPartyAuthAlert = (props) => {
 
   return (
     <>
-      <Alert id="tpa-alert" className={referrer === REGISTER_PAGE ? 'alert-success mt-n2 mb-5' : 'alert-warning mt-n2 mb-5'}>
-        {referrer === REGISTER_PAGE ? (
+      <Alert id="tpa-alert" className={referrer === registerPath ? 'alert-success mt-n2 mb-5' : 'alert-warning mt-n2 mb-5'}>
+        {referrer === registerPath ? (
           <Alert.Heading>{formatMessage(messages['tpa.alert.heading'])}</Alert.Heading>
         ) : null}
         <p>{message}</p>
       </Alert>
-      {referrer === REGISTER_PAGE ? (
+      {referrer === registerPath ? (
         <h4 className="mt-4 mb-4">{formatMessage(messages['registration.using.tpa.form.heading'])}</h4>
       ) : null}
     </>
@@ -38,7 +38,7 @@ const ThirdPartyAuthAlert = (props) => {
 
 ThirdPartyAuthAlert.defaultProps = {
   currentProvider: '',
-  referrer: LOGIN_PAGE,
+  referrer: loginPath,
 };
 
 ThirdPartyAuthAlert.propTypes = {

src/common-components/UnAuthOnlyRoute.jsx

@@ -1,11 +1,10 @@
 import { useEffect, useState } from 'react';
 
-import { fetchAuthenticatedUser, getAuthenticatedUser, getSiteConfig } from '@openedx/frontend-base';
+import { fetchAuthenticatedUser, getAuthenticatedUser, getUrlByRouteRole } from '@openedx/frontend-base';
 import PropTypes from 'prop-types';
+import { Navigate } from 'react-router-dom';
 
-import {
-  DEFAULT_REDIRECT_URL,
-} from '../data/constants';
+import { dashboardRole } from '../constants';
 
 /**
  * This wrapper redirects the requester to our default redirect url if they are
@@ -24,8 +23,7 @@ const UnAuthOnlyRoute = ({ children }) => {
 
   if (isReady) {
     if (authUser && authUser.username) {
-      global.location.href = getSiteConfig().lmsBaseUrl.concat(DEFAULT_REDIRECT_URL);
-      return null;
+      return <Navigate to={getUrlByRouteRole(dashboardRole)} replace />;
     }
 
     return children;

src/common-components/tests/EmbeddedRegistrationRoute.test.jsx

@@ -1,43 +1,27 @@
-/* eslint-disable import/no-import-module-exports */
-/* eslint-disable react/function-component-definition */
-
 import { getSiteConfig } from '@openedx/frontend-base';
-import { render } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
+import { render, waitFor } from '@testing-library/react';
 import {
-  MemoryRouter, Route, BrowserRouter as Router, Routes,
+  MemoryRouter, Navigate, Outlet, Route, Routes,
 } from 'react-router-dom';
 
-import { PAGE_NOT_FOUND, REGISTER_EMBEDDED_PAGE } from '../../data/constants';
+import { notFoundPath, registerEmbeddedPath } from '../../constants';
 import EmbeddedRegistrationRoute from '../EmbeddedRegistrationRoute';
 
-const RRD = require('react-router-dom');
-// Just render plain div with its children
-// eslint-disable-next-line react/prop-types
-RRD.BrowserRouter = ({ children }) => <div>{children}</div>;
-module.exports = RRD;
-
-const TestApp = () => (
-  <Router>
-    <div>
-      <Routes>
-        <Route
-          path={REGISTER_EMBEDDED_PAGE}
-          element={<EmbeddedRegistrationRoute><span>Embedded Register Page</span></EmbeddedRegistrationRoute>}
-        />
-        <Route
-          path={PAGE_NOT_FOUND}
-          element={<span>Page not found</span>}
-        />
-      </Routes>
-    </div>
-  </Router>
-);
-
 describe('EmbeddedRegistrationRoute', () => {
   const routerWrapper = () => (
-    <MemoryRouter initialEntries={[REGISTER_EMBEDDED_PAGE]}>
-      <TestApp />
+    <MemoryRouter initialEntries={[`/authn/${registerEmbeddedPath}`]}>
+      <Routes>
+        <Route path="/authn" element={<Outlet />}>
+          <Route
+            path={registerEmbeddedPath}
+            element={<EmbeddedRegistrationRoute><span>Embedded Register Page</span></EmbeddedRegistrationRoute>}
+          />
+          <Route
+            path={notFoundPath}
+            element={<span>Page not found</span>}
+          />
+        </Route>
+      </Routes>
     </MemoryRouter>
   );
 
@@ -46,30 +30,25 @@ describe('EmbeddedRegistrationRoute', () => {
   });
 
   it('should not render embedded register page if host query param is not available in the url', async () => {
-    let embeddedRegistrationPage = null;
-    await act(async () => {
-      const { container } = await render(routerWrapper());
-      embeddedRegistrationPage = container;
-    });
+    const { container } = render(routerWrapper());
 
-    const renderedPage = embeddedRegistrationPage.querySelector('span');
-    expect(renderedPage.textContent).toBe('Page not found');
+    await waitFor(() => {
+      const renderedPage = container.querySelector('span');
+      expect(renderedPage).not.toBeNull();
+      expect(renderedPage.textContent).toBe('Page not found');
+    });
   });
 
-  it('should render embedded register page if host query param is available in the url (embedded)', async () => {
+  it('should render embedded register page if host query param is available in the url (embedded)', () => {
     delete window.location;
     window.location = {
-      href: getSiteConfig().baseUrl.concat(REGISTER_EMBEDDED_PAGE),
+      href: getSiteConfig().baseUrl.concat('/', registerEmbeddedPath),
       search: '?host=http://localhost/host-websit',
     };
 
-    let embeddedRegistrationPage = null;
-    await act(async () => {
-      const { container } = await render(routerWrapper());
-      embeddedRegistrationPage = container;
-    });
+    const { container } = render(routerWrapper());
 
-    const renderedPage = embeddedRegistrationPage.querySelector('span');
+    const renderedPage = container.querySelector('span');
     expect(renderedPage).toBeTruthy();
     expect(renderedPage.textContent).toBe('Embedded Register Page');
   });

src/common-components/tests/ThirdPartyAuthAlert.test.jsx

@@ -1,7 +1,8 @@
 import { IntlProvider } from '@openedx/frontend-base';
 import renderer from 'react-test-renderer';
 
-import { PENDING_STATE, REGISTER_PAGE } from '../../data/constants';
+import { registerPath } from '../../constants';
+import { PENDING_STATE } from '../../data/constants';
 import ThirdPartyAuthAlert from '../ThirdPartyAuthAlert';
 
 describe('ThirdPartyAuthAlert', () => {
@@ -26,7 +27,7 @@ describe('ThirdPartyAuthAlert', () => {
   it('should match register page third party auth alert message snapshot', () => {
     props = {
       ...props,
-      referrer: REGISTER_PAGE,
+      referrer: registerPath,
     };
 
     const tree = renderer.create(

src/common-components/tests/UnAuthOnlyRoute.test.jsx

@@ -9,12 +9,13 @@ import {
 } from 'react-router-dom';
 
 import { UnAuthOnlyRoute } from '..';
-import { REGISTER_PAGE } from '../../data/constants';
+import { registerPath } from '../../constants';
 
 jest.mock('@openedx/frontend-base', () => ({
   ...jest.requireActual('@openedx/frontend-base'),
   getAuthenticatedUser: jest.fn(),
   fetchAuthenticatedUser: jest.fn(),
+  getUrlByRouteRole: jest.fn((role) => `http://localhost:18000/${role.split('.').pop()}`),
 }));
 
 const RRD = require('react-router-dom');
@@ -27,15 +28,15 @@ const TestApp = () => (
   <Router>
     <div>
       <Routes>
-        <Route path={REGISTER_PAGE} element={<UnAuthOnlyRoute><span>Register Page</span></UnAuthOnlyRoute>} />
+        <Route path={`/${registerPath}`} element={<UnAuthOnlyRoute><span>Register Page</span></UnAuthOnlyRoute>} />
       </Routes>
     </div>
   </Router>
 );
 
 describe('UnAuthOnlyRoute', () => {
   const routerWrapper = () => (
-    <MemoryRouter initialEntries={[REGISTER_PAGE]}>
+    <MemoryRouter initialEntries={[`/${registerPath}`]}>
       <TestApp />
     </MemoryRouter>
   );