feat: handle relative next param locally after login/registration

When a user navigates to a protected SPA route while logged out, the
authenticatedLoader redirects to /authn/login?next=%2Fsome-path. Previously,
this relative next param was sent to the LMS backend, which resolved it
against itself and returned an absolute LMS URL — causing a full page
navigation away from the SPA shell.

Now, when next starts with /, it is stripped from the API payload and
handled locally: after login/registration succeeds, fetchAuthenticatedUser
refreshes the auth cache so authenticatedLoader allows the target route,
RedirectLogistration uses <Navigate> for SPA navigation, and
hydrateAuthenticatedUser runs in the background to populate the full
user profile (avatar, etc.) in the header.

Also applies the same relative-path SPA navigation pattern to
ProgressiveProfilingPageModal and replaces the hardcoded LMS dashboard
fallback in the registration API with getUrlByRouteRole for consistency.

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

Author: arbrandes

src/common-components/RedirectLogistration.jsx

@@ -59,6 +59,9 @@ const RedirectLogistration = (props) => {
       );
     }
 
+    if (finalRedirectUrl.startsWith('/')) {
+      return <Navigate to={finalRedirectUrl} replace />;
+    }
     window.location.href = finalRedirectUrl;
   }
 

src/login/LoginPage.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 
 import {
-  getSiteConfig, sendPageEvent, sendTrackEvent, useIntl
+  fetchAuthenticatedUser, hydrateAuthenticatedUser, getSiteConfig, sendPageEvent, sendTrackEvent, useIntl,
 } from '@openedx/frontend-base';
 import { Form, StatefulButton } from '@openedx/paragon';
 import PropTypes from 'prop-types';
@@ -65,8 +65,16 @@ const LoginPage = ({
     context: {},
   });
   const { mutate: loginUser, isPending: isLoggingIn } = useLogin({
-    onSuccess: (data) => {
-      setLoginResult({ success: true, redirectUrl: data.redirectUrl || '' });
+    onSuccess: async (data) => {
+      if (localNextPath) {
+        await fetchAuthenticatedUser({ forceRefresh: true });
+        setLoginResult({ success: true, redirectUrl: localNextPath });
+        // Hydrate in the background — publishes AUTHENTICATED_USER_CHANGED after
+        // SPA navigation, so the header picks up the full user profile (avatar, etc.)
+        hydrateAuthenticatedUser();
+      } else {
+        setLoginResult({ success: true, redirectUrl: data.redirectUrl || '' });
+      }
     },
     onError: (formattedError) => {
       setErrorCode(prev => ({
@@ -90,6 +98,7 @@ const LoginPage = ({
   const { formatMessage } = useIntl();
   const activationMsgType = getActivationStatus();
   const queryParams = useMemo(() => getAllPossibleQueryParams(), []);
+  const localNextPath = queryParams.next?.startsWith('/') ? queryParams.next : null;
 
   const tpaHint = useMemo(() => getTpaHint(), []);
   const params = { ...queryParams };
@@ -173,6 +182,9 @@ const LoginPage = ({
       password: formData.password,
       ...queryParams,
     };
+    if (localNextPath) {
+      delete payload.next;
+    }
     loginUser(payload);
   };
 

src/progressive-profiling/ProgressiveProfilingPageModal.jsx

@@ -1,17 +1,23 @@
 import { getSiteConfig, useIntl } from '@openedx/frontend-base';
 import { ActionRow, Button, ModalDialog } from '@openedx/paragon';
 import PropTypes from 'prop-types';
+import { useNavigate } from 'react-router-dom';
 
 import messages from './messages';
 
 const ProgressiveProfilingPageModal = (props) => {
   const { formatMessage } = useIntl();
+  const navigate = useNavigate();
   const { isOpen, redirectUrl } = props;
   const platformName = getSiteConfig().siteName;
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    window.location.href = redirectUrl;
+    if (redirectUrl.startsWith('/')) {
+      navigate(redirectUrl);
+    } else {
+      window.location.href = redirectUrl;
+    }
   };
 
   return (

src/register/RegistrationPage.jsx

@@ -1,6 +1,8 @@
 import { useEffect, useMemo, useState } from 'react';
 
 import {
+  fetchAuthenticatedUser,
+  hydrateAuthenticatedUser,
   useAppConfig,
   getSiteConfig,
   sendPageEvent, sendTrackEvent,
@@ -108,8 +110,16 @@ const RegistrationPage = (props) => {
 
   const backendRegistrationError = registrationError;
   const registrationMutation = useRegistration({
-    onSuccess: (data) => {
-      setRegistrationResult(data);
+    onSuccess: async (data) => {
+      if (localNextPath) {
+        await fetchAuthenticatedUser({ forceRefresh: true });
+        setRegistrationResult({ ...data, redirectUrl: localNextPath });
+        // Hydrate in the background — publishes AUTHENTICATED_USER_CHANGED after
+        // SPA navigation, so the header picks up the full user profile (avatar, etc.)
+        hydrateAuthenticatedUser();
+      } else {
+        setRegistrationResult(data);
+      }
       setRegistrationError({});
     },
     onError: (errorData) => {
@@ -121,6 +131,7 @@ const RegistrationPage = (props) => {
   const registrationErrorCode = registrationError?.errorCode || backendRegistrationError?.errorCode;
   const submitState = registrationMutation.isPending ? PENDING_STATE : DEFAULT_STATE;
   const queryParams = useMemo(() => getAllPossibleQueryParams(), []);
+  const localNextPath = queryParams.next?.startsWith('/') ? queryParams.next : null;
   const tpaHint = useMemo(() => getTpaHint(), []);
   // Initialize form state from local backedUpFormData
   const backedUpFormData = registrationFormData;
@@ -292,12 +303,15 @@ const RegistrationPage = (props) => {
     }
 
     // Preparing payload for submission
+    const registrationQueryParams = localNextPath
+      ? Object.fromEntries(Object.entries(queryParams).filter(([key]) => key !== 'next'))
+      : queryParams;
     payload = prepareRegistrationPayload(
       payload,
       configurableFormFields,
       flags.showMarketingEmailOptInCheckbox,
       totalRegistrationTime,
-      queryParams,
+      registrationQueryParams,
     );
 
     // making register call with React Query

src/register/RegistrationPage.test.jsx

@@ -266,14 +266,14 @@ describe('RegistrationPage', () => {
         password: 'password1',
         country: 'Pakistan',
         total_registration_time: 0,
-        next: '/course/demo-course-url',
       };
 
       const { getByLabelText, container } = render(renderWrapper(<RegistrationPage {...props} />));
       populateRequiredFields(getByLabelText, payload);
       const button = container.querySelector('button.btn-brand');
       fireEvent.click(button);
 
+      // Relative `next` param is stripped from the API payload (handled locally via SPA navigation)
       expect(mockRegistrationMutation.mutate).toHaveBeenCalledWith({ ...payload, country: 'PK' });
     });
 

src/register/data/api.test.ts

@@ -1,4 +1,4 @@
-import { getAuthenticatedHttpClient, getHttpClient, getSiteConfig } from '@openedx/frontend-base';
+import { getAuthenticatedHttpClient, getHttpClient, getSiteConfig, getUrlByRouteRole } from '@openedx/frontend-base';
 import * as QueryString from 'query-string';
 
 import { getFieldsValidations, registerNewUserApi } from './api';
@@ -8,6 +8,7 @@ jest.mock('@openedx/frontend-base', () => ({
   getSiteConfig: jest.fn(),
   getAuthenticatedHttpClient: jest.fn(),
   getHttpClient: jest.fn(),
+  getUrlByRouteRole: jest.fn(),
 }));
 
 jest.mock('query-string', () => ({
@@ -18,6 +19,7 @@ describe('API Functions', () => {
   let mockAuthenticatedHttpClient: any;
   let mockHttpClient: any;
   let mockGetSiteConfig: any;
+  let mockGetUrlByRouteRole: any;
   let mockStringify: any;
 
   beforeEach(() => {
@@ -28,6 +30,7 @@ describe('API Functions', () => {
       post: jest.fn(),
     };
     mockGetSiteConfig = getSiteConfig as jest.MockedFunction<typeof getSiteConfig>;
+    mockGetUrlByRouteRole = getUrlByRouteRole as jest.MockedFunction<typeof getUrlByRouteRole>;
     mockStringify = QueryString.stringify as jest.MockedFunction<typeof QueryString.stringify>;
 
     (getAuthenticatedHttpClient as jest.MockedFunction<typeof getAuthenticatedHttpClient>)
@@ -39,6 +42,8 @@ describe('API Functions', () => {
       lmsBaseUrl: 'http://localhost:18000',
     });
 
+    mockGetUrlByRouteRole.mockReturnValue('http://localhost:18000/dashboard');
+
     mockStringify.mockImplementation((obj) => Object.keys(obj).map(key => `${key}=${obj[key]}`).join('&'));
   });
 

src/register/data/api.ts

@@ -1,4 +1,4 @@
-import { getAuthenticatedHttpClient, getHttpClient, getSiteConfig } from '@openedx/frontend-base';
+import { getAuthenticatedHttpClient, getHttpClient, getSiteConfig, getUrlByRouteRole } from '@openedx/frontend-base';
 import * as QueryString from 'query-string';
 
 const registerNewUserApi = async (registrationInformation) => {
@@ -14,7 +14,7 @@ const registerNewUserApi = async (registrationInformation) => {
     });
 
   return {
-    redirectUrl: data.redirect_url || `${getSiteConfig().lmsBaseUrl}/dashboard`,
+    redirectUrl: data.redirect_url || getUrlByRouteRole('org.openedx.frontend.role.dashboard'),
     success: data.success || false,
     authenticatedUser: data.authenticated_user,
   };