fix(deps): update react monorepo to v19

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.env

@@ -0,0 +1,45 @@
+NODE_ENV='production'
+ACCESS_TOKEN_COOKIE_NAME=null
+BASE_URL=null
+CREDENTIALS_BASE_URL=null
+CSRF_TOKEN_API_PATH=null
+ECOMMERCE_BASE_URL=null
+LANGUAGE_PREFERENCE_COOKIE_NAME=null
+LMS_BASE_URL=null
+LOGIN_URL=null
+LOGOUT_URL=null
+MARKETING_SITE_BASE_URL=null
+ORDER_HISTORY_URL=null
+REFRESH_ACCESS_TOKEN_ENDPOINT=null
+SEGMENT_KEY=''
+SITE_NAME=null
+INFO_EMAIL=''
+# ***** Cookies *****
+USER_RETENTION_COOKIE_NAME=null
+# ***** Links *****
+LOGIN_ISSUE_SUPPORT_LINK=''
+AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK=null
+POST_REGISTRATION_REDIRECT_URL=''
+SEARCH_CATALOG_URL=''
+# ***** Features flags *****
+DISABLE_ENTERPRISE_LOGIN=''
+ENABLE_AUTO_GENERATED_USERNAME=''
+ENABLE_DYNAMIC_REGISTRATION_FIELDS=''
+ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN=''
+ENABLE_POST_REGISTRATION_RECOMMENDATIONS=''
+MARKETING_EMAILS_OPT_IN=''
+SHOW_CONFIGURABLE_EDX_FIELDS=''
+ENABLE_IMAGE_LAYOUT=''
+# ***** Zendesk related keys *****
+ZENDESK_KEY=''
+ZENDESK_LOGO_URL=''
+# ***** Base Container Images *****
+BANNER_IMAGE_LARGE=''
+BANNER_IMAGE_MEDIUM=''
+BANNER_IMAGE_SMALL=''
+BANNER_IMAGE_EXTRA_SMALL=''
+# ***** Miscellaneous *****
+APP_ID=''
+MFE_CONFIG_API_URL=''
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.development

@@ -41,3 +41,5 @@ APP_ID=''
 MFE_CONFIG_API_URL=''
 ZENDESK_KEY=''
 ZENDESK_LOGO_URL=''
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.private.example

@@ -0,0 +1,4 @@
+# Copy these to the .env.private to enable edX specific functionality on local system
+ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN='true'
+MARKETING_EMAILS_OPT_IN='true'
+SHOW_CONFIGURABLE_EDX_FIELDS='true'

.env.test

@@ -0,0 +1,21 @@
+ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
+BASE_URL='http://localhost:1995'
+CREDENTIALS_BASE_URL='http://localhost:18150'
+CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
+ECOMMERCE_BASE_URL='http://localhost:18130'
+LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
+LMS_BASE_URL='http://localhost:18000'
+LOGIN_URL='http://localhost:18000/login'
+LOGOUT_URL='http://localhost:18000/logout'
+LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
+LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
+LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
+FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
+MARKETING_SITE_BASE_URL='http://localhost:18000'
+ORDER_HISTORY_URL='http://localhost:1996/orders'
+REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
+SEGMENT_KEY=''
+SITE_NAME='Your Platform Name Here'
+APP_ID=''
+MFE_CONFIG_API_URL=''
+PARAGON_THEME_URLS={}

.eslintignore

@@ -0,0 +1,6 @@
+coverage/*
+dist/
+docs
+node_modules/
+__mocks__/
+__snapshots__/

.eslintrc.js

@@ -0,0 +1,52 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+const { createConfig } = require('@openedx/frontend-build');
+
+module.exports = createConfig('eslint', {
+  rules: {
+    // Temporarily update the 'indent', 'template-curly-spacing' and
+    // 'no-multiple-empty-lines' rules since they are causing eslint
+    // to fail for no apparent reason since upgrading
+    // @openedx/frontend-build from v3 to v5:
+    // - TypeError: Cannot read property 'range' of null
+    indent: [
+      'error',
+      2,
+      { ignoredNodes: ['TemplateLiteral', 'SwitchCase'] },
+    ],
+    'template-curly-spacing': 'off',
+    'jsx-a11y/label-has-associated-control': ['error', {
+      labelComponents: [],
+      labelAttributes: [],
+      controlComponents: [],
+      assert: 'htmlFor',
+      depth: 25,
+    }],
+    'sort-imports': ['error', { ignoreCase: true, ignoreDeclarationSort: true }],
+    'import/order': [
+      'error',
+      {
+        groups: [
+          'builtin',
+          'external',
+          'internal',
+          ['sibling', 'parent'],
+          'index',
+        ],
+        pathGroups: [
+          {
+            pattern: '@(react|react-dom|react-redux)',
+            group: 'external',
+            position: 'before',
+          },
+        ],
+        pathGroupsExcludedImportTypes: ['react'],
+        'newlines-between': 'always',
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: true,
+        },
+      },
+    ],
+    'function-paren-newline': 'off',
+  },
+});

.gitignore

@@ -1,15 +1,21 @@
+.DS_Store
+.eslintcache
+.idea
 node_modules
 npm-debug.log
 coverage
 module.config.js
+.env.private
+
 dist/
-/*.tgz
-
-### i18n ###
 src/i18n/transifex_input.json
+temp/babel-plugin-react-intl
 
-### Editors ###
-.DS_Store
+### pyenv ###
+.python-version
+
+### Emacs ###
 *~
 /temp
 /.vscode
+src/i18n/messages

.npmignore

@@ -1,6 +1,11 @@
-__mocks__
+.eslintignore
+.eslintrc.json
+.gitignore
+docker-compose.yml
+Dockerfile
+Makefile
+npm-debug.log
+
+coverage
 node_modules
-*.test.js
-*.test.jsx
-*.test.ts
-*.test.tsx
+public

.nvmrc

@@ -1 +1 @@
-20
+24

CODEOWNERS

@@ -1,2 +0,0 @@
-# The following users are the owners of all frontend-app-authn files
-*       @openedx/2u-infinity

README.rst

@@ -26,14 +26,49 @@ This is a micro-frontend application responsible for the login, registration and
 Getting Started
 ***************
 
-Installation
-============
+Prerequisites
+=============
 
 `Tutor`_ is currently recommended as a development environment for your new MFE. Please refer to the `relevant tutor-mfe documentation`_ to get started using it.
 
 .. _Tutor: https://github.com/overhangio/tutor
 .. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development
 
+Cloning and Startup
+===================
+
+1. Clone your new repo:
+
+.. code-block:: bash
+
+   git clone https://github.com/edx/frontend-app-authn.git
+
+2. Use the version of Node specified in the ``.nvmrc`` file.
+
+   The current version of the micro-frontend build scripts supports the version of Node found in ``.nvmrc``.
+   Using other major versions of node *may* work, but this is unsupported.  For
+   convenience, this repository includes a ``.nvmrc`` file to help in setting the
+   correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
+
+3. Install npm dependencies:
+
+.. code-block:: bash
+
+   cd frontend-app-authn && npm install
+
+4. Update the application port to use for local development:
+
+   The default port is 1999. If this does not work for you, update the line
+   ``PORT=1999`` to your port in all ``.env.*`` files
+
+5. Start the devserver. The app will be running at ``localhost:1999``, or whatever port you change it too.
+
+   .. code-block:: bash
+
+      npm run dev
+
+   **Note:** Follow `Enable social auth locally <docs/how_tos/enable_social_auth.rst>`_ for enabling Social Sign-on Buttons (SSO) locally
+
 Environment Variables/Setup Notes
 =================================
 
@@ -95,7 +130,7 @@ The authentication micro-frontend also requires the following additional variabl
 
    * - ``MFE_CONFIG_API_URL``
      - Link of the API to get runtime mfe configuration variables from the site configuration or django settings.
-     - ``/api/v1/mfe_config`` | ``''`` (empty strings are falsy)  
+     - ``/api/v1/mfe_config`` | ``''`` (empty strings are falsy)
 
    * - ``APP_ID``
      - Name of MFE, this will be used by the API to get runtime configurations for the specific micro frontend. For a frontend repo `frontend-app-appName`, use `appName` as APP_ID.
@@ -123,6 +158,10 @@ Furthermore, there are several edX-specific environment variables that enable in
      - Enables support for opting in marketing emails that helps us getting user consent for sending marketing emails.
      - ``true`` | ``''`` (empty strings are falsy)
 
+   * - ``SHOW_CONFIGURABLE_EDX_FIELDS``
+     - For edX, country and honor code fields are required by default. This flag enables edX specific required fields.
+     - ``true`` | ``''`` (empty strings are falsy)
+
 For more information see the document: `Micro-frontend applications in Open
 edX <https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development>`__.
 
@@ -201,4 +240,4 @@ Please see `LICENSE <https://github.com/openedx/frontend-app-authn/blob/master/L
    :target: https://github.com/openedx/edx-developer-docs/actions/workflows/ci.yml
    :alt: Continuous Integration
 .. |semantic-release| image:: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
-   :target: https://github.com/semantic-release/semantic-release
+   :target: https://github.com/semantic-release/semantic-release

app.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="@openedx/frontend-base" />
-
-declare module 'site.config' {
-  export default SiteConfig;
-}

babel.config.js

@@ -1,3 +0,0 @@
-const { createConfig } = require('@openedx/frontend-base/config');
-
-module.exports = createConfig('babel');

eslint.config.js

@@ -1,22 +0,0 @@
-// @ts-check
-
-const { createLintConfig } = require('@openedx/frontend-base/config');
-
-module.exports = createLintConfig(
-  {
-    files: [
-      'src/**/*',
-      'site.config.*',
-    ],
-  },
-  {
-    ignores: [
-      'coverage/*',
-      'dist/*',
-      'docs/*',
-      'node_modules/*',
-      '**/__mocks__/*',
-      '**/__snapshots__/*',
-    ],
-  },
-);

jest.config.js

@@ -1,15 +1,14 @@
-const { createConfig } = require('@openedx/frontend-base/config');
+const { createConfig } = require('@openedx/frontend-build');
 
-module.exports = createConfig('test', {
-  setupFilesAfterEnv: [
+module.exports = createConfig('jest', {
+  setupFiles: [
     '<rootDir>/src/setupTest.js',
   ],
   coveragePathIgnorePatterns: [
     'src/setupTest.js',
     'src/i18n',
+    'src/index.jsx',
+    'MainApp.jsx',
   ],
-  moduleNameMapper: {
-    '\\.svg$': '<rootDir>/src/__mocks__/svg.js',
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/src/__mocks__/file.js',
-  },
+  testEnvironment: 'jsdom',
 });

package.json

@@ -1,31 +1,25 @@
 {
-  "name": "@openedx/frontend-app-authn",
-  "version": "1.0.0-alpha.2",
-  "description": "Frontend authentication",
+  "name": "@edx/frontend-app-authn",
+  "version": "0.1.0",
+  "description": "Frontend application template",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/openedx/frontend-app-authn.git"
   },
-  "main": "src/index.ts",
-  "files": [
-    "/src"
-  ],
   "browserslist": [
     "extends @edx/browserslist-config"
   ],
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ],
   "scripts": {
-    "dev": "PORT=1999 PUBLIC_PATH=/authn openedx dev",
-    "i18n_extract": "openedx formatjs extract",
-    "lint": "openedx lint .",
-    "lint:fix": "openedx lint --fix .",
-    "snapshot": "openedx test --updateSnapshot",
-    "test": "openedx test --coverage --passWithNoTests"
+    "build": "fedx-scripts webpack",
+    "i18n_extract": "fedx-scripts formatjs extract",
+    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
+    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
+    "snapshot": "fedx-scripts jest --updateSnapshot",
+    "start": "fedx-scripts webpack-dev-server --progress",
+    "dev": "PUBLIC_PATH=/authn/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
+    "test": "fedx-scripts jest --coverage --passWithNoTests"
   },
-  "author": "Open edX",
+  "author": "edX",
   "license": "AGPL-3.0",
   "homepage": "https://github.com/openedx/frontend-app-authn#readme",
   "publishConfig": {
@@ -35,45 +29,48 @@
     "url": "https://github.com/openedx/frontend-app-authn/issues"
   },
   "dependencies": {
-    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.3",
-    "@edx/openedx-atlas": "^0.7.0",
-    "@fortawesome/fontawesome-svg-core": "^6.7.2",
-    "@fortawesome/free-brands-svg-icons": "^6.7.2",
-    "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@fortawesome/react-fontawesome": "^0.2.2",
-    "@redux-devtools/extension": "^3.3.0",
-    "classnames": "^2.5.1",
-    "fastest-levenshtein": "^1.0.16",
-    "form-urlencoded": "^6.1.5",
-    "i18n-iso-countries": "^7.13.0",
-    "prop-types": "^15.8.1",
-    "query-string": "^7.1.3",
-    "react-helmet": "^6.1.0",
-    "react-loading-skeleton": "^3.5.0",
-    "react-responsive": "^8.2.0",
-    "redux-logger": "^3.0.6",
-    "redux-mock-store": "^1.5.5",
-    "redux-saga": "^1.3.0",
-    "redux-thunk": "^2.4.2",
-    "reselect": "^5.1.1",
-    "universal-cookie": "^8.0.1"
+    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+    "@edx/frontend-platform": "^8.3.1",
+    "@edx/openedx-atlas": "^0.6.0",
+    "@fortawesome/fontawesome-svg-core": "6.7.2",
+    "@fortawesome/free-brands-svg-icons": "6.7.2",
+    "@fortawesome/free-solid-svg-icons": "6.7.2",
+    "@fortawesome/react-fontawesome": "0.2.6",
+    "@openedx/frontend-plugin-framework": "^1.7.0",
+    "@openedx/paragon": "^23.4.2",
+    "@optimizely/react-sdk": "^2.9.1",
+    "@tanstack/react-query": "^5.90.19",
+    "@testing-library/react": "^16.2.0",
+    "algoliasearch": "^4.14.3",
+    "algoliasearch-helper": "^3.26.0",
+    "classnames": "2.5.1",
+    "core-js": "3.43.0",
+    "fastest-levenshtein": "1.0.16",
+    "form-urlencoded": "6.1.6",
+    "prop-types": "15.8.1",
+    "query-string": "7.1.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-helmet": "6.1.0",
+    "react-loading-skeleton": "3.5.0",
+    "react-responsive": "8.2.0",
+    "react-router": "6.30.3",
+    "react-router-dom": "6.30.3",
+    "react-zendesk": "^0.1.13",
+    "regenerator-runtime": "0.14.1",
+    "universal-cookie": "7.2.2"
   },
   "devDependencies": {
-    "@edx/browserslist-config": "^1.5.0",
-    "@testing-library/react": "^16.3.0",
-    "babel-plugin-formatjs": "10.5.38",
-    "eslint-plugin-import": "2.31.0",
-    "jest": "^29.7.0",
-    "react-test-renderer": "^18.3.1"
-  },
-  "peerDependencies": {
-    "@openedx/frontend-base": "^1.0.0-alpha.2",
-    "@openedx/paragon": "^22",
-    "react": "^18",
-    "react-dom": "^18",
-    "react-redux": "^8",
-    "react-router": "^6",
-    "react-router-dom": "^6",
-    "redux": "^4"
+    "@edx/browserslist-config": "^1.1.1",
+    "@edx/typescript-config": "^1.1.0",
+    "@openedx/frontend-build": "^14.6.2",
+    "@testing-library/jest-dom": "^6.9.1",
+    "babel-plugin-formatjs": "10.5.41",
+    "eslint-plugin-import": "2.32.0",
+    "glob": "7.2.3",
+    "history": "5.3.0",
+    "jest": "30.3.0",
+    "react-test-renderer": "^19.0.0",
+    "ts-jest": "^29.4.0"
   }
 }

public/index.html

@@ -1,9 +1,24 @@
 <!doctype html>
 <html lang="en-us">
   <head>
-      <title>Authentication Development Site></title>
+      <title><%= (process.env.SITE_NAME && process.env.SITE_NAME != 'null') ? 'Authentication | ' + process.env.SITE_NAME : 'Authentication' %></title>    
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon"/>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.4.4/iframeResizer.contentWindow.min.js"
+              integrity="sha512-IWwZFBvHzN41wNI6etRLLuLrDDj/6AwJcPt7cmKJAzluYTIHHQ1PF8wh0rSy05jxEvvjflVvH2MxeV6riyEEXg=="
+              crossorigin="anonymous"
+              referrerpolicy="no-referrer">
+      </script>
+      <% if (process.env.OPTIMIZELY_URL) { %>
+        <script
+          src="<%= process.env.OPTIMIZELY_URL %>"
+        ></script>
+      <% } else if (process.env.OPTIMIZELY_PROJECT_ID) { %>
+        <script
+          src="<%= process.env.MARKETING_SITE_BASE_URL %>/optimizelyjs/<%= process.env.OPTIMIZELY_PROJECT_ID %>.js"
+        ></script>
+      <% } %>
   </head>
   <body>
     <div id="root"></div>

site.config.dev.tsx

@@ -1,20 +0,0 @@
-import { EnvironmentTypes, SiteConfig } from '@openedx/frontend-base';
-
-import { authnApp } from './src';
-
-import './src/app.scss';
-
-const siteConfig: SiteConfig = {
-  siteId: 'authn-dev',
-  siteName: 'Authn Dev',
-  baseUrl: 'http://apps.local.openedx.io:8080',
-  lmsBaseUrl: 'http://local.openedx.io:8000',
-  loginUrl: 'http://local.openedx.io:8000/login',
-  logoutUrl: 'http://local.openedx.io:8000/logout',
-
-  environment: EnvironmentTypes.DEVELOPMENT,
-  basename: '/authn',
-  apps: [authnApp],
-};
-
-export default siteConfig;

site.config.test.tsx

@@ -1,50 +0,0 @@
-import { EnvironmentTypes, SiteConfig } from '@openedx/frontend-base';
-
-import { appId } from './src/constants';
-
-const siteConfig: SiteConfig = {
-  siteId: 'test-site',
-  siteName: 'Test Site',
-  baseUrl: 'http://localhost:1996',
-  lmsBaseUrl: 'http://localhost:8000',
-  loginUrl: 'http://localhost:8000/login',
-  logoutUrl: 'http://localhost:8000/logout',
-
-  environment: EnvironmentTypes.TEST,
-  apps: [{
-    appId,
-    config: {
-      ACTIVATION_EMAIL_SUPPORT_LINK: null,
-      ALLOW_PUBLIC_ACCOUNT_CREATION: false,
-      AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: null,
-      BANNER_IMAGE_EXTRA_SMALL: '',
-      BANNER_IMAGE_LARGE: '',
-      BANNER_IMAGE_MEDIUM: '',
-      BANNER_IMAGE_SMALL: '',
-      DISABLE_ENTERPRISE_LOGIN: true,
-      ENABLE_AUTO_GENERATED_USERNAME: false,
-      ENABLE_DYNAMIC_REGISTRATION_FIELDS: false,
-      ENABLE_IMAGE_LAYOUT: false,
-      ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN: false,
-      FAVICON_URL: 'https://edx-cdn.org/v3/default/favicon.ico',
-      INFO_EMAIL: '',
-      LOGIN_ISSUE_SUPPORT_LINK: null,
-      LOGO_TRADEMARK_URL: 'https://edx-cdn.org/v3/default/logo-trademark.svg',
-      LOGO_URL: 'https://edx-cdn.org/v3/default/logo.svg',
-      LOGO_WHITE_URL: 'https://edx-cdn.org/v3/default/logo-white.svg',
-      MARKETING_EMAILS_OPT_IN: '',
-      MARKETING_SITE_BASE_URL: 'http://localhost:18000',
-      PASSWORD_RESET_SUPPORT_LINK: null,
-      POST_REGISTRATION_REDIRECT_URL: '',
-      PRIVACY_POLICY: null,
-      SEARCH_CATALOG_URL: null,
-      SESSION_COOKIE_DOMAIN: 'local.openedx.io',
-      SHOW_REGISTRATION_LINKS: false,
-      TOS_AND_HONOR_CODE: null,
-      TOS_LINK: null,
-      USER_RETENTION_COOKIE_NAME: '',
-    },
-  }],
-};
-
-export default siteConfig;

src/Main.tsx

@@ -1,23 +0,0 @@
-import { Provider as ReduxProvider } from 'react-redux';
-import { Outlet } from 'react-router-dom';
-import { CurrentAppProvider } from '@openedx/frontend-base';
-
-import { appId } from './constants';
-import {
-  registerIcons,
-} from './common-components';
-import configureStore from './data/configureStore';
-
-import './sass/_style.scss';
-
-registerIcons();
-
-const Main = () => (
-  <CurrentAppProvider appId={appId}>
-    <ReduxProvider store={configureStore()}>
-      <Outlet />
-    </ReduxProvider>
-  </CurrentAppProvider>
-);
-
-export default Main;

src/MainApp.jsx

@@ -0,0 +1,76 @@
+import { getConfig } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Helmet } from 'react-helmet';
+import { Navigate, Route, Routes } from 'react-router-dom';
+
+import {
+  EmbeddedRegistrationRoute, NotFoundPage, registerIcons, UnAuthOnlyRoute, Zendesk,
+} from './common-components';
+import {
+  AUTHN_PROGRESSIVE_PROFILING,
+  LOGIN_PAGE,
+  PAGE_NOT_FOUND,
+  PASSWORD_RESET_CONFIRM,
+  RECOMMENDATIONS,
+  REGISTER_EMBEDDED_PAGE,
+  REGISTER_PAGE,
+  RESET_PAGE,
+} from './data/constants';
+import { updatePathWithQueryParams } from './data/utils';
+import { ForgotPasswordPage } from './forgot-password';
+import Logistration from './logistration/Logistration';
+import { ProgressiveProfiling } from './progressive-profiling';
+import { RecommendationsPage } from './recommendations';
+import { RegistrationPage } from './register';
+import { ResetPasswordPage } from './reset-password';
+
+import './index.scss';
+
+registerIcons();
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    mutations: {
+      retry: false,
+    },
+  },
+});
+
+const MainApp = () => (
+  <QueryClientProvider client={queryClient}>
+    <AppProvider>
+      <Helmet>
+        <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
+      </Helmet>
+      {getConfig().ZENDESK_KEY && <Zendesk />}
+      <Routes>
+        <Route path="/" element={<Navigate replace to={updatePathWithQueryParams(REGISTER_PAGE)} />} />
+        <Route
+          path={REGISTER_EMBEDDED_PAGE}
+          element={<EmbeddedRegistrationRoute><RegistrationPage /></EmbeddedRegistrationRoute>}
+        />
+        <Route
+          path={LOGIN_PAGE}
+          element={
+            <UnAuthOnlyRoute><Logistration selectedPage={LOGIN_PAGE} /></UnAuthOnlyRoute>
+          }
+        />
+        <Route
+          path={REGISTER_PAGE}
+          element={
+            <UnAuthOnlyRoute><Logistration selectedPage={REGISTER_PAGE} /></UnAuthOnlyRoute>
+          }
+        />
+        <Route path={RESET_PAGE} element={<UnAuthOnlyRoute><ForgotPasswordPage /></UnAuthOnlyRoute>} />
+        <Route path={PASSWORD_RESET_CONFIRM} element={<ResetPasswordPage />} />
+        <Route path={AUTHN_PROGRESSIVE_PROFILING} element={<ProgressiveProfiling />} />
+        <Route path={RECOMMENDATIONS} element={<RecommendationsPage />} />
+        <Route path={PAGE_NOT_FOUND} element={<NotFoundPage />} />
+        <Route path="*" element={<Navigate replace to={PAGE_NOT_FOUND} />} />
+      </Routes>
+    </AppProvider>
+  </QueryClientProvider>
+);
+
+export default MainApp;

src/__mocks__/file.js

@@ -1 +0,0 @@
-module.exports = 'FileMock';

src/__mocks__/svg.js

@@ -1 +0,0 @@
-module.exports = 'SvgURL';

src/app.scss

@@ -1,6 +0,0 @@
-@use "@edx/brand/paragon/fonts";
-@use "@edx/brand/paragon/variables";
-@use "@openedx/paragon/scss/core/core";
-@use "@edx/brand/paragon/overrides";
-
-@use "sass/style";

src/app.ts

@@ -1,43 +0,0 @@
-import { App } from '@openedx/frontend-base';
-import { appId } from './constants';
-import routes from './routes';
-import messages from './i18n';
-
-const app: App = {
-  appId,
-  routes,
-  messages,
-  config: {
-    ACTIVATION_EMAIL_SUPPORT_LINK: null,
-    ALLOW_PUBLIC_ACCOUNT_CREATION: true,
-    AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: null,
-    BANNER_IMAGE_EXTRA_SMALL: '',
-    BANNER_IMAGE_LARGE: '',
-    BANNER_IMAGE_MEDIUM: '',
-    BANNER_IMAGE_SMALL: '',
-    DISABLE_ENTERPRISE_LOGIN: true,
-    ENABLE_AUTO_GENERATED_USERNAME: false,
-    ENABLE_DYNAMIC_REGISTRATION_FIELDS: false,
-    ENABLE_IMAGE_LAYOUT: false,
-    ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN: false,
-    FAVICON_URL: 'https://edx-cdn.org/v3/default/favicon.ico',
-    INFO_EMAIL: '',
-    LOGIN_ISSUE_SUPPORT_LINK: null,
-    LOGO_TRADEMARK_URL: 'https://edx-cdn.org/v3/default/logo-trademark.svg',
-    LOGO_URL: 'https://edx-cdn.org/v3/default/logo.svg',
-    LOGO_WHITE_URL: 'https://edx-cdn.org/v3/default/logo-white.svg',
-    MARKETING_EMAILS_OPT_IN: '',
-    MARKETING_SITE_BASE_URL: 'http://local.openedx.io',
-    PASSWORD_RESET_SUPPORT_LINK: null,
-    POST_REGISTRATION_REDIRECT_URL: '',
-    PRIVACY_POLICY: null,
-    SEARCH_CATALOG_URL: null,
-    SESSION_COOKIE_DOMAIN: 'local.openedx.io',
-    SHOW_REGISTRATION_LINKS: true,
-    TOS_AND_HONOR_CODE: null,
-    TOS_LINK: null,
-    USER_RETENTION_COOKIE_NAME: '',
-  },
-};
-
-export default app;

src/base-container/components/default-layout/DefaultLayout.test.jsx

@@ -1,4 +1,4 @@
-import { IntlProvider } from '@openedx/frontend-base';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { render, screen } from '@testing-library/react';
 
 import { DefaultLargeLayout, DefaultMediumLayout, DefaultSmallLayout } from './index';

src/base-container/components/default-layout/LargeLayout.jsx

@@ -1,4 +1,5 @@
-import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Hyperlink, Image } from '@openedx/paragon';
 import classNames from 'classnames';
 
@@ -10,20 +11,20 @@ const LargeLayout = () => {
   return (
     <div className="w-50 d-flex">
       <div className="col-md-9 bg-primary-400">
-        <Hyperlink destination={useAppConfig().MARKETING_SITE_BASE_URL}>
-          <Image className="logo position-absolute" alt={getSiteConfig().siteName} src={useAppConfig().LOGO_WHITE_URL} />
+        <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+          <Image className="logo position-absolute" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
         </Hyperlink>
         <div className="min-vh-100 d-flex align-items-center">
-          <div className={classNames({ 'large-yellow-line mr-n4.5': getSiteConfig().siteName === 'edX' })} />
+          <div className={classNames({ 'large-yellow-line mr-n4.5': getConfig().SITE_NAME === 'edX' })} />
           <h1
             className={classNames(
               'display-2 text-white mw-xs',
-              { 'ml-6': getSiteConfig().siteName !== 'edX' },
+              { 'ml-6': getConfig().SITE_NAME !== 'edX' },
             )}
           >
             {formatMessage(messages['start.learning'])}
             <div className="text-accent-a">
-              {formatMessage(messages['with.site.name'], { siteName: getSiteConfig().siteName })}
+              {formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
             </div>
           </h1>
         </div>

src/base-container/components/default-layout/MediumLayout.jsx

@@ -1,4 +1,5 @@
-import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Hyperlink, Image } from '@openedx/paragon';
 import classNames from 'classnames';
 
@@ -12,22 +13,22 @@ const MediumLayout = () => {
       <div className="w-100 medium-screen-top-stripe" />
       <div className="w-100 p-0 mb-3 d-flex">
         <div className="col-md-10 bg-primary-400">
-          <Hyperlink destination={useAppConfig().MARKETING_SITE_BASE_URL}>
-            <Image alt={getSiteConfig().siteName} className="logo" src={useAppConfig().LOGO_WHITE_URL} />
+          <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+            <Image alt={getConfig().SITE_NAME} className="logo" src={getConfig().LOGO_WHITE_URL} />
           </Hyperlink>
           <div className="d-flex align-items-center justify-content-center mb-4 ">
-            <div className={classNames({ 'mt-1 medium-yellow-line': getSiteConfig().siteName === 'edX' })} />
+            <div className={classNames({ 'mt-1 medium-yellow-line': getConfig().SITE_NAME === 'edX' })} />
             <div>
               <h1
                 className={classNames(
                   'display-1 text-white mt-5 mb-5 mr-2 main-heading',
-                  { 'ml-4.5': getSiteConfig().siteName !== 'edX' },
+                  { 'ml-4.5': getConfig().SITE_NAME !== 'edX' },
                 )}
               >
                 <span>
                   {formatMessage(messages['start.learning'])}{' '}
                   <span className="text-accent-a d-inline-block">
-                    {formatMessage(messages['with.site.name'], { siteName: getSiteConfig().siteName })}
+                    {formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
                   </span>
                 </span>
               </h1>

src/base-container/components/default-layout/SmallLayout.jsx

@@ -1,4 +1,5 @@
-import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Hyperlink, Image } from '@openedx/paragon';
 import classNames from 'classnames';
 
@@ -11,11 +12,11 @@ const SmallLayout = () => {
     <span className="bg-primary-400 w-100">
       <div className="col-md-12 small-screen-top-stripe" />
       <div>
-        <Hyperlink destination={useAppConfig().MARKETING_SITE_BASE_URL}>
-          <Image className="logo-small" alt={getSiteConfig().siteName} src={useAppConfig().LOGO_WHITE_URL} />
+        <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+          <Image className="logo-small" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
         </Hyperlink>
         <div className="d-flex align-items-center m-3.5">
-          <div className={classNames({ 'small-yellow-line mr-n2.5': getSiteConfig().siteName === 'edX' })} />
+          <div className={classNames({ 'small-yellow-line mr-n2.5': getConfig().SITE_NAME === 'edX' })} />
           <h1
             className={classNames(
               'text-white mt-3.5 mb-3.5',
@@ -24,7 +25,7 @@ const SmallLayout = () => {
             <span>
               {formatMessage(messages['start.learning'])}{' '}
               <span className="text-accent-a d-inline-block">
-                {formatMessage(messages['with.site.name'], { siteName: getSiteConfig().siteName })}
+                {formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
               </span>
             </span>
           </h1>

src/base-container/components/default-layout/messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from '@openedx/frontend-base';
+import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
   'start.learning': {

src/base-container/components/image-layout/ExtraSmallLayout.jsx

@@ -1,4 +1,7 @@
-import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Hyperlink, Image } from '@openedx/paragon';
 
 import messages from './messages';
@@ -9,10 +12,10 @@ const ExtraSmallLayout = () => {
   return (
     <span
       className="w-100 bg-primary-500 banner__image extra-small-layout"
-      style={{ backgroundImage: `url(${useAppConfig().BANNER_IMAGE_EXTRA_SMALL})` }}
+      style={{ backgroundImage: `url(${getConfig().BANNER_IMAGE_EXTRA_SMALL})` }}
     >
-      <Hyperlink destination={useAppConfig().MARKETING_SITE_BASE_URL}>
-        <Image className="company-logo" alt={getSiteConfig().siteName} src={useAppConfig().LOGO_WHITE_URL} />
+      <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+        <Image className="company-logo" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
       </Hyperlink>
       <div className="ml-4.5 mr-1 pb-3.5 pt-3.5">
         <h1 className="banner__heading">

src/base-container/components/image-layout/LargeLayout.jsx

@@ -1,4 +1,7 @@
-import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Hyperlink, Image } from '@openedx/paragon';
 
 import './index.scss';
@@ -10,10 +13,10 @@ const LargeLayout = () => {
   return (
     <div
       className="w-50 bg-primary-500 banner__image large-layout"
-      style={{ backgroundImage: `url(${useAppConfig().BANNER_IMAGE_LARGE})` }}
+      style={{ backgroundImage: `url(${getConfig().BANNER_IMAGE_LARGE})` }}
     >
-      <Hyperlink destination={useAppConfig().MARKETING_SITE_BASE_URL}>
-        <Image className="company-logo position-absolute" alt={getSiteConfig().siteName} src={useAppConfig().LOGO_WHITE_URL} />
+      <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+        <Image className="company-logo position-absolute" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
       </Hyperlink>
       <div className="min-vh-100 p-5 d-flex align-items-end">
         <h1 className="display-2 mw-sm mb-3 d-flex flex-column flex-shrink-0 justify-content-center">

src/base-container/components/image-layout/MediumLayout.jsx

@@ -1,4 +1,7 @@
-import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Hyperlink, Image } from '@openedx/paragon';
 
 import './index.scss';
@@ -10,10 +13,10 @@ const MediumLayout = () => {
   return (
     <div
       className="w-100 mb-3 bg-primary-500 banner__image medium-layout"
-      style={{ backgroundImage: `url(${useAppConfig().BANNER_IMAGE_MEDIUM})` }}
+      style={{ backgroundImage: `url(${getConfig().BANNER_IMAGE_MEDIUM})` }}
     >
-      <Hyperlink destination={useAppConfig().MARKETING_SITE_BASE_URL}>
-        <Image className="company-logo" alt={getSiteConfig().siteName} src={useAppConfig().LOGO_WHITE_URL} />
+      <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+        <Image className="company-logo" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
       </Hyperlink>
       <div className="ml-5 pb-4 pt-4">
         <h1 className="display-2 banner__heading">

src/base-container/components/image-layout/SmallLayout.jsx

@@ -1,4 +1,7 @@
-import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Hyperlink, Image } from '@openedx/paragon';
 
 import messages from './messages';
@@ -9,10 +12,10 @@ const SmallLayout = () => {
   return (
     <span
       className="w-100 bg-primary-500 banner__image small-layout"
-      style={{ backgroundImage: `url(${useAppConfig().BANNER_IMAGE_SMALL})` }}
+      style={{ backgroundImage: `url(${getConfig().BANNER_IMAGE_SMALL})` }}
     >
-      <Hyperlink destination={useAppConfig().MARKETING_SITE_BASE_URL}>
-        <Image className="company-logo" alt={getSiteConfig().siteName} src={useAppConfig().LOGO_WHITE_URL} />
+      <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+        <Image className="company-logo" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
       </Hyperlink>
       <div className="ml-5 mr-1 pb-3.5 pt-3.5">
         <h1 className="display-2">

src/base-container/components/image-layout/messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from '@openedx/frontend-base';
+import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
   'your.career.turning.point': {

src/base-container/components/welcome-page-layout/LargeLayout.jsx

@@ -1,4 +1,5 @@
-import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Hyperlink, Image } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
@@ -10,14 +11,14 @@ const LargeLayout = ({ fullName }) => {
   return (
     <div className="w-50 d-flex">
       <div className="col-md-10 bg-light-200 p-0">
-        <Hyperlink destination={useAppConfig().MARKETING_SITE_BASE_URL}>
-          <Image className="logo position-absolute" alt={getSiteConfig().siteName} src={useAppConfig().LOGO_URL} />
+        <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+          <Image className="logo position-absolute" alt={getConfig().SITE_NAME} src={getConfig().LOGO_URL} />
         </Hyperlink>
         <div className="min-vh-100 d-flex align-items-center">
           <div className="large-screen-left-container mr-n4.5 large-yellow-line mt-5" />
           <div>
             <h1 className="welcome-to-platform data-hj-suppress">
-              {formatMessage(messages['welcome.to.platform'], { siteName: getSiteConfig().siteName, fullName })}
+              {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, fullName })}
             </h1>
             <h2 className="complete-your-profile">
               {formatMessage(messages['complete.your.profile.1'])}

src/base-container/components/welcome-page-layout/MediumLayout.jsx

@@ -1,4 +1,5 @@
-import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Hyperlink, Image } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
@@ -12,14 +13,14 @@ const MediumLayout = ({ fullName }) => {
       <div className="w-100 medium-screen-top-stripe" />
       <div className="w-100 p-0 mb-3 d-flex">
         <div className="col-md-10 bg-light-200">
-          <Hyperlink destination={useAppConfig().MARKETING_SITE_BASE_URL}>
-            <Image className="logo" alt={getSiteConfig().siteName} src={useAppConfig().LOGO_URL} />
+          <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+            <Image className="logo" alt={getConfig().SITE_NAME} src={getConfig().LOGO_URL} />
           </Hyperlink>
           <div className="d-flex align-items-center justify-content-center mb-4 ml-5">
             <div className="medium-yellow-line mt-5 mr-n2" />
             <div>
               <h1 className="h3 data-hj-suppress mw-320">
-                {formatMessage(messages['welcome.to.platform'], { siteName: getSiteConfig().siteName, fullName })}
+                {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, fullName })}
               </h1>
               <h2 className="display-1">
                 {formatMessage(messages['complete.your.profile.1'])}

src/base-container/components/welcome-page-layout/SmallLayout.jsx

@@ -1,4 +1,5 @@
-import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Hyperlink, Image } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
@@ -10,14 +11,14 @@ const SmallLayout = ({ fullName }) => {
   return (
     <div className="min-vw-100 bg-light-200">
       <div className="col-md-12 small-screen-top-stripe" />
-      <Hyperlink destination={useAppConfig().MARKETING_SITE_BASE_URL}>
-        <Image className="logo-small" alt={getSiteConfig().siteName} src={useAppConfig().LOGO_URL} />
+      <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+        <Image className="logo-small" alt={getConfig().SITE_NAME} src={getConfig().LOGO_URL} />
       </Hyperlink>
       <div className="d-flex align-items-center m-3.5">
         <div className="small-yellow-line mt-4.5" />
         <div>
           <h1 className="h5 data-hj-suppress">
-            {formatMessage(messages['welcome.to.platform'], { siteName: getSiteConfig().siteName, fullName })}
+            {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, fullName })}
           </h1>
           <h2 className="h1">
             {formatMessage(messages['complete.your.profile.1'])}

src/base-container/components/welcome-page-layout/messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from '@openedx/frontend-base';
+import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
   'welcome.to.platform': {

src/base-container/index.jsx

@@ -1,4 +1,4 @@
-import { useAppConfig } from '@openedx/frontend-base';
+import { getConfig } from '@edx/frontend-platform';
 import { breakpoints } from '@openedx/paragon';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
@@ -11,7 +11,7 @@ import {
 import { AuthLargeLayout, AuthMediumLayout, AuthSmallLayout } from './components/welcome-page-layout';
 
 const BaseContainer = ({ children, showWelcomeBanner, fullName }) => {
-  const enableImageLayout = useAppConfig().ENABLE_IMAGE_LAYOUT;
+  const enableImageLayout = getConfig().ENABLE_IMAGE_LAYOUT;
 
   if (enableImageLayout) {
     return (

src/base-container/tests/BaseContainer.test.jsx

@@ -1,9 +1,9 @@
-import { IntlProvider, mergeAppConfig } from '@openedx/frontend-base';
+import { mergeConfig } from '@edx/frontend-platform';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { render } from '@testing-library/react';
 import { Context as ResponsiveContext } from 'react-responsive';
 
 import BaseContainer from '../index';
-import { appId } from '../../constants';
 
 const LargeScreen = {
   wrappingComponent: ResponsiveContext.Provider,
@@ -26,7 +26,7 @@ describe('Base component tests', () => {
   });
 
   it('renders Image layout when ENABLE_IMAGE_LAYOUT configuration is enabled', () => {
-    mergeAppConfig(appId, {
+    mergeConfig({
       ENABLE_IMAGE_LAYOUT: true,
     });
 

src/common-components/EnterpriseSSO.jsx

@@ -1,5 +1,6 @@
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
 import {
   Button, Form,
   Icon,
@@ -7,8 +8,8 @@ import {
 import { Login } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 
-import { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';
 import messages from './messages';
+import { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';
 
 /**
  * This component renders the Single sign-on (SSO) button only for the tpa provider passed
@@ -16,12 +17,12 @@ import messages from './messages';
 const EnterpriseSSO = (props) => {
   const { formatMessage } = useIntl();
   const tpaProvider = props.provider;
-  const hideRegistrationLink = useAppConfig().ALLOW_PUBLIC_ACCOUNT_CREATION === false
-    || useAppConfig().SHOW_REGISTRATION_LINKS === false;
+  const hideRegistrationLink = getConfig().ALLOW_PUBLIC_ACCOUNT_CREATION === false
+    || getConfig().SHOW_REGISTRATION_LINKS === false;
 
   const handleSubmit = (e, url) => {
     e.preventDefault();
-    window.location.href = getSiteConfig().lmsBaseUrl + url;
+    window.location.href = getConfig().LMS_BASE_URL + url;
   };
 
   const handleClick = (e) => {
@@ -47,7 +48,7 @@ const EnterpriseSSO = (props) => {
                 {tpaProvider.iconImage ? (
                   <div aria-hidden="true">
                     <img className="btn-tpa__image-icon" src={tpaProvider.iconImage} alt={`icon ${tpaProvider.name}`} />
-                    <span className="pl-2" aria-hidden="true">{tpaProvider.name}</span>
+                    <span className="pl-2" aria-hidden="true">{ tpaProvider.name }</span>
                   </div>
                 )
                   : (
@@ -59,7 +60,7 @@ const EnterpriseSSO = (props) => {
                             <Icon className="h-75" src={Login} />
                           )}
                       </div>
-                      <span className="pl-2" aria-hidden="true">{tpaProvider.name}</span>
+                      <span className="pl-2" aria-hidden="true">{ tpaProvider.name }</span>
                     </>
                   )}
               </Button>

src/common-components/InstitutionLogistration.jsx

@@ -1,4 +1,5 @@
-import { getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button, Hyperlink, Icon } from '@openedx/paragon';
 import { Institution } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
@@ -28,7 +29,7 @@ export const RenderInstitutionButton = props => {
  * This component renders the page list of available institutions for login
  * */
 const InstitutionLogistration = props => {
-  const lmsBaseUrl = getSiteConfig().lmsBaseUrl;
+  const lmsBaseUrl = getConfig().LMS_BASE_URL;
   const { formatMessage } = useIntl();
   const {
     secondaryProviders,

src/common-components/NotFoundPage.jsx

@@ -1,4 +1,4 @@
-import { FormattedMessage } from '@openedx/frontend-base';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 const NotFoundPage = () => (
   <div className="container-fluid d-flex py-5 justify-content-center align-items-start text-center">

src/common-components/PasswordField.jsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
 
-import { useIntl } from '@openedx/frontend-base';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Form, Icon, IconButton, OverlayTrigger, Tooltip, useToggle,
 } from '@openedx/paragon';
@@ -10,19 +9,33 @@ import {
 } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 
-import { LETTER_REGEX, NUMBER_REGEX } from '../data/constants';
-import { clearRegistrationBackendError, fetchRealtimeValidations } from '../register/data/actions';
-import { validatePasswordField } from '../register/data/utils';
 import messages from './messages';
+import { LETTER_REGEX, NUMBER_REGEX } from '../data/constants';
+import { useRegisterContext } from '../register/components/RegisterContext';
+import { useFieldValidations } from '../register/data/apiHook';
+import { validatePasswordField } from '../register/data/utils';
 
 const PasswordField = (props) => {
   const { formatMessage } = useIntl();
-  const dispatch = useDispatch();
-
-  const validationApiRateLimited = useSelector(state => state.register.validationApiRateLimited);
   const [isPasswordHidden, setHiddenTrue, setHiddenFalse] = useToggle(true);
   const [showTooltip, setShowTooltip] = useState(false);
 
+  const {
+    setValidationsSuccess,
+    setValidationsFailure,
+    validationApiRateLimited,
+    clearRegistrationBackendError,
+  } = useRegisterContext();
+
+  const fieldValidationsMutation = useFieldValidations({
+    onSuccess: (data) => {
+      setValidationsSuccess(data);
+    },
+    onError: () => {
+      setValidationsFailure();
+    },
+  });
+
   const handleBlur = (e) => {
     const { name, value } = e.target;
     if (name === props.name && e.relatedTarget?.name === 'passwordIcon') {
@@ -50,7 +63,7 @@ const PasswordField = (props) => {
       if (fieldError) {
         props.handleErrorChange('password', fieldError);
       } else if (!validationApiRateLimited) {
-        dispatch(fetchRealtimeValidations({ password: passwordValue }));
+        fieldValidationsMutation.mutate({ password: passwordValue });
       }
     }
   };
@@ -65,7 +78,7 @@ const PasswordField = (props) => {
     }
     if (props.handleErrorChange) {
       props.handleErrorChange('password', '');
-      dispatch(clearRegistrationBackendError('password'));
+      clearRegistrationBackendError('password');
     }
     setTimeout(() => setShowTooltip(props.showRequirements && true), 150);
   };

src/common-components/RedirectLogistration.jsx

@@ -1,9 +1,9 @@
-import { useAppConfig, getSiteConfig } from '@openedx/frontend-base';
+import { getConfig } from '@edx/frontend-platform';
 import PropTypes from 'prop-types';
 import { Navigate } from 'react-router-dom';
 
 import {
-  AUTHN_PROGRESSIVE_PROFILING, REDIRECT,
+  AUTHN_PROGRESSIVE_PROFILING, RECOMMENDATIONS, REDIRECT,
 } from '../data/constants';
 import { setCookie } from '../data/utils';
 
@@ -15,20 +15,20 @@ const RedirectLogistration = (props) => {
     redirectToProgressiveProfilingPage,
     success,
     optionalFields,
+    redirectToRecommendationsPage,
     educationLevel,
     userId,
     registrationEmbedded,
     host,
   } = props;
   let finalRedirectUrl = '';
-
   if (success) {
     // If we're in a third party auth pipeline, we must complete the pipeline
     // once user has successfully logged in. Otherwise, redirect to the specified redirect url.
     // Note: For multiple enterprise use case, we need to make sure that user first visits the
     // enterprise selection page and then complete the auth workflow
     if (finishAuthUrl && !redirectUrl.includes(finishAuthUrl)) {
-      finalRedirectUrl = getSiteConfig().lmsBaseUrl + finishAuthUrl;
+      finalRedirectUrl = getConfig().LMS_BASE_URL + finishAuthUrl;
     } else {
       finalRedirectUrl = redirectUrl;
     }
@@ -36,12 +36,12 @@ const RedirectLogistration = (props) => {
     // Redirect to Progressive Profiling after successful registration
     if (redirectToProgressiveProfilingPage) {
       // TODO: Do we still need this cookie?
-      setCookie('van-504-returning-user', true, useAppConfig().SESSION_COOKIE_DOMAIN);
+      setCookie('van-504-returning-user', true);
 
       if (registrationEmbedded) {
         window.parent.postMessage({
           action: REDIRECT,
-          redirectUrl: useAppConfig().POST_REGISTRATION_REDIRECT_URL,
+          redirectUrl: getConfig().POST_REGISTRATION_REDIRECT_URL,
         }, host);
         return null;
       }
@@ -59,6 +59,22 @@ const RedirectLogistration = (props) => {
       );
     }
 
+    // Redirect to Recommendation page
+    if (redirectToRecommendationsPage) {
+      const registrationResult = { redirectUrl: finalRedirectUrl, success };
+      return (
+        <Navigate
+          to={RECOMMENDATIONS}
+          state={{
+            registrationResult,
+            educationLevel,
+            userId,
+          }}
+          replace
+        />
+      );
+    }
+
     window.location.href = finalRedirectUrl;
   }
 
@@ -73,6 +89,7 @@ RedirectLogistration.defaultProps = {
   redirectUrl: '',
   redirectToProgressiveProfilingPage: false,
   optionalFields: {},
+  redirectToRecommendationsPage: false,
   userId: null,
   registrationEmbedded: false,
   host: '',
@@ -86,6 +103,7 @@ RedirectLogistration.propTypes = {
   redirectUrl: PropTypes.string,
   redirectToProgressiveProfilingPage: PropTypes.bool,
   optionalFields: PropTypes.shape({}),
+  redirectToRecommendationsPage: PropTypes.bool,
   userId: PropTypes.number,
   registrationEmbedded: PropTypes.bool,
   host: PropTypes.string,

src/common-components/SocialAuthProviders.jsx

@@ -1,11 +1,12 @@
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { getSiteConfig, useIntl } from '@openedx/frontend-base';
 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 messages from './messages';
+import { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';
 
 const SocialAuthProviders = (props) => {
   const { formatMessage } = useIntl();
@@ -15,7 +16,7 @@ const SocialAuthProviders = (props) => {
     e.preventDefault();
 
     const url = e.currentTarget.dataset.providerUrl;
-    window.location.href = getSiteConfig().lmsBaseUrl + url;
+    window.location.href = getConfig().LMS_BASE_URL + url;
   }
 
   const socialAuth = socialAuthProviders.map((provider, index) => (

src/common-components/ThirdPartyAuth.jsx

@@ -1,4 +1,5 @@
-import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Hyperlink, Icon,
 } from '@openedx/paragon';
@@ -7,10 +8,10 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import Skeleton from 'react-loading-skeleton';
 
+import messages from './messages';
 import {
   ENTERPRISE_LOGIN_URL, LOGIN_PAGE, PENDING_STATE, REGISTER_PAGE,
 } from '../data/constants';
-import messages from './messages';
 
 import {
   RenderInstitutionButton,
@@ -32,8 +33,8 @@ const ThirdPartyAuth = (props) => {
   } = props;
   const isInstitutionAuthActive = !!secondaryProviders.length && !currentProvider;
   const isSocialAuthActive = !!providers.length && !currentProvider;
-  const isEnterpriseLoginDisabled = useAppConfig().DISABLE_ENTERPRISE_LOGIN;
-  const enterpriseLoginURL = getSiteConfig().lmsBaseUrl + ENTERPRISE_LOGIN_URL;
+  const isEnterpriseLoginDisabled = getConfig().DISABLE_ENTERPRISE_LOGIN;
+  const enterpriseLoginURL = getConfig().LMS_BASE_URL + ENTERPRISE_LOGIN_URL;
   const isThirdPartyAuthActive = isSocialAuthActive || (isEnterpriseLoginDisabled && isInstitutionAuthActive);
 
   return (

src/common-components/ThirdPartyAuthAlert.jsx

@@ -1,14 +1,15 @@
-import { getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Alert } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
-import { LOGIN_PAGE, REGISTER_PAGE } from '../data/constants';
 import messages from './messages';
+import { LOGIN_PAGE, REGISTER_PAGE } from '../data/constants';
 
 const ThirdPartyAuthAlert = (props) => {
   const { formatMessage } = useIntl();
   const { currentProvider, referrer } = props;
-  const platformName = getSiteConfig().siteName;
+  const platformName = getConfig().SITE_NAME;
   let message;
 
   if (referrer === LOGIN_PAGE) {
@@ -27,7 +28,7 @@ const ThirdPartyAuthAlert = (props) => {
         {referrer === REGISTER_PAGE ? (
           <Alert.Heading>{formatMessage(messages['tpa.alert.heading'])}</Alert.Heading>
         ) : null}
-        <p>{message}</p>
+        <p>{ message }</p>
       </Alert>
       {referrer === REGISTER_PAGE ? (
         <h4 className="mt-4 mb-4">{formatMessage(messages['registration.using.tpa.form.heading'])}</h4>