fix: username suggestions alignment (#1279 )

Co-authored-by: Kyrylo Hudym-Levkovych <kyr.hudym@kyrs-MacBook-Pro.local>
2025-08-08 16:55:59 +05:00
257 changed files with 20593 additions and 20063 deletions
--- a/.env
+++ b/.env
@@ -0,0 +1,43 @@
+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=''
--- a/.env.private.example
+++ b/.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'
--- a/.env.test
+++ b/.env.test
@@ -0,0 +1,20 @@
+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=''
--- a/.eslintignore
+++ b/.eslintignore
@@ -0,0 +1,6 @@
+coverage/*
+dist/
+docs
+node_modules/
+__mocks__/
+__snapshots__/
--- a/.eslintrc.js
+++ b/.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',
+  },
+});
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -1 +0,0 @@
-*   @openedx/2U-infinity
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -1,7 +0,0 @@
-version: 2
-updates:
-    # Adding new check for github-actions
-  - package-ecosystem: "github-actions"
-    directory: "/"
-    schedule:
-        interval: "weekly"
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -25,5 +25,5 @@ Include a link to the sandbox for design changes or screenshot for before and af

 #### Post-merge Checklist

-* [ ] Deploy the changes to prod after verifying on stage or ask **@openedx/2u-infinity** to do it. 
+* [ ] Deploy the changes to prod after verifying on stage or ask **@openedx/2u-vanguards** to do it. 
 * [ ] 🎉 🙌 Celebrate! Thanks for your contribution.
--- a/.github/workflows/autoupdate-pull-request.yml
+++ b/.github/workflows/autoupdate-pull-request.yml
@@ -10,7 +10,7 @@ on:
 jobs:
  autoupdate:
    name: autoupdate
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
    steps:
      - uses: docker://chinthakagodawita/autoupdate-action:v1
        env:
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -10,15 +10,17 @@ on:

 jobs:
  tests:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04

    steps:
    - name: Checkout
-      uses: actions/checkout@v4
+      uses: actions/checkout@v3
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
    - name: Setup Nodejs
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v3
      with:
-        node-version-file: '.nvmrc'
+        node-version: ${{ env.NODE_VER }}

    - name: Install Dependencies
      run: npm ci
@@ -39,7 +41,4 @@ jobs:
      run: npm run build

    - name: Run Code Coverage
-      uses: codecov/codecov-action@v5
-      with:
-        token: ${{ secrets.CODECOV_TOKEN }}
-        fail_ci_if_error: true
+      uses: codecov/codecov-action@v3
--- a/.github/workflows/lockfileversion-check.yml
+++ b/.github/workflows/lockfileversion-check.yml
@@ -10,4 +10,4 @@ on:

 jobs:
  version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master
+    uses: openedx/.github/.github/workflows/lockfile-check.yml@master
--- a/.gitignore
+++ b/.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
--- a/.npmignore
+++ b/.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
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-24
+18
--- a/2
+++ b/2
@@ -1,2 +1,2 @@
 # The following users are the owners of all frontend-app-authn files
-*       @openedx/2u-infinity
+*       @openedx/2u-vanguards
--- a/13
+++ b/13
@@ -13,19 +13,6 @@ precommit:
 requirements:
 	npm ci

-clean:
-	rm -rf dist
-
-build: clean
-	tsc --project tsconfig.build.json
-	tsc-alias -p tsconfig.build.json
-	find src -type f -name '*.scss' -exec sh -c '\
-	  for f in "$$@"; do \
-	    d="dist/$${f#src/}"; \
-	    mkdir -p "$$(dirname "$$d")"; \
-	    cp "$$f" "$$d"; \
-	  done' sh {} +
-
 i18n.extract:
 	# Pulling display strings from .jsx files into .json files...
 	rm -rf $(transifex_temp)
--- a/README.rst
+++ b/README.rst
@@ -29,15 +29,29 @@ Getting Started
 Installation
 ============

-`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.
+This MFE is bundled with `Devstack <https://github.com/openedx/devstack>`_, see the `Getting Started <https://github.com/openedx/devstack#getting-started>`_ section for setup instructions.

-.. _Tutor: https://github.com/overhangio/tutor
-.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development
+1. Install Devstack using the `Getting Started <https://github.com/openedx/devstack#getting-started>`_ instructions.
+
+2. Start up LMS, if it's not already started.
+
+4. Within this project (frontend-app-authn), install requirements and start the development server:
+
+   .. code-block::
+
+      npm install
+      npm start # The server will run on port 1999
+
+5. Once the dev server is up, visit http://localhost:1999 to access the MFE
+
+   .. image:: ./docs/images/frontend-app-authn-localhost-preview.png
+
+   **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
 =================================

-This MFE is configured via environment variables supplied at build time.  All micro-frontends have a shared set of required environment variables, as documented in the Open edX Developer Guide under `Required Environment Variables <https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development>`__.
+This MFE is configured via environment variables supplied at build time.  All micro-frontends have a shared set of required environment variables, as documented in the Open edX Developer Guide under `Required Environment Variables <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html#required-environment-variables>`__.

 The authentication micro-frontend also requires the following additional variable:

@@ -123,14 +137,18 @@ 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>`__.
+edX <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html#required-environment-variables>`__.

 How To Contribute
 =================

 Contributions are very welcome, and strongly encouraged! We've
-put together `some documentation that describes our contribution process <https://docs.openedx.org/en/latest/developers/references/developer_guide/process/index.html>`_.
+put together `some documentation that describes our contribution process <https://edx.readthedocs.org/projects/edx-developer-guide/en/latest/process/index.html>`_.

 Even though they were written with edx-platform in mind, the guidelines should be followed for Open edX code in general.

@@ -169,7 +187,7 @@ All community members are expected to follow the `Open edX Code of Conduct <http
 People
 ======
 The assigned maintainers for this component and other project details may be
-found in `Backstage <https://backstage.openedx.org/catalog/default/group/2u-infinity>`_. Backstage pulls this data from the ``catalog-info.yaml``
+found in `Backstage <https://backstage.openedx.org/catalog/default/group/2u-vanguards>`_. Backstage pulls this data from the ``catalog-info.yaml``
 file in this repo.

 Reporting Security Issues
@@ -201,4 +219,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
--- a/app.d.ts
+++ b/app.d.ts
@@ -1,5 +0,0 @@
-/// <reference types="@openedx/frontend-base" />
-
-declare module 'site.config' {
-  export default SiteConfig;
-}
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,3 +0,0 @@
-const { createConfig } = require('@openedx/frontend-base/tools');
-
-module.exports = createConfig('babel');
--- a/catalog-info.yaml
+++ b/catalog-info.yaml
@@ -12,8 +12,7 @@ metadata:
      icon: 'Article'
  annotations:
    openedx.org/arch-interest-groups: ""
-    openedx.org/release: "master"
 spec:
-  owner: group:2u-infinity
+  owner: group:2u-vanguards
  type: 'service'
  lifecycle: 'production'
--- a/docs/how_tos/enable_social_auth.rst
+++ b/docs/how_tos/enable_social_auth.rst
@@ -3,7 +3,7 @@ Enable Social Auth Locally

 Please follow the steps below to enable social auth (SSO) locally.

-1. Follow `Enabling Third Party Authentication <https://docs.openedx.org/en/latest/site_ops/install_configure_run_guide/configuration/tpa/index.html>`_ for backend configuration.
+1. Follow `Enabling Third Party Authentication <https://edx.readthedocs.io/projects/edx-installing-configuring-and-running/en/latest/configuration/tpa/index.html>`_ for backend configuration.

 2. Authn has a component for rendering Social Auth providers at frontend which goes through each provider.

--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,22 +0,0 @@
-// @ts-check
-
-const { createLintConfig } = require('@openedx/frontend-base/tools');
-
-module.exports = createLintConfig(
-  {
-    files: [
-      'src/**/*',
-      'site.config.*',
-    ],
-  },
-  {
-    ignores: [
-      'coverage/*',
-      'dist/*',
-      'docs/*',
-      'node_modules/*',
-      '**/__mocks__/*',
-      '**/__snapshots__/*',
-    ],
-  },
-);
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,15 +1,14 @@
-const { createConfig } = require('@openedx/frontend-base/tools');
+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',
 });
--- a/openedx.yaml
+++ b/openedx.yaml
@@ -0,0 +1,8 @@
+# This file describes this Open edX repo, as described in OEP-2:
+# http://open-edx-proposals.readthedocs.io/en/latest/oeps/oep-0002.html#specification
+
+nick: Authn MFE
+oeps: {}
+owner: openedx/2u-vanguards
+openedx-release:
+  ref: master
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,40 +1,28 @@
 {
-  "name": "@openedx/frontend-app-authn",
-  "version": "1.0.0-alpha.6",
-  "description": "Frontend authentication",
-  "engines": {
-    "node": "^24.12"
-  },
+  "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"
  },
-  "exports": {
-    ".": "./dist/index.js",
-    "./app.scss": "./dist/app.scss"
-  },
-  "files": [
-    "/dist"
-  ],
  "browserslist": [
    "extends @edx/browserslist-config"
  ],
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ],
  "scripts": {
-    "build": "make build",
-    "clean": "make clean",
-    "dev": "PORT=1999 PUBLIC_PATH=/authn openedx dev",
-    "i18n_extract": "openedx formatjs extract",
-    "lint": "openedx lint .",
-    "lint:fix": "openedx lint --fix .",
-    "prepack": "npm run build",
-    "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 .",
+    "snapshot": "fedx-scripts jest --updateSnapshot",
+    "start": "fedx-scripts webpack-dev-server --progress",
+    "test": "fedx-scripts jest --coverage --passWithNoTests"
  },
-  "author": "Open edX",
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint"
+    }
+  },
+  "author": "edX",
  "license": "AGPL-3.0",
  "homepage": "https://github.com/openedx/frontend-app-authn#readme",
  "publishConfig": {
@@ -44,41 +32,54 @@
    "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",
-    "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",
-    "universal-cookie": "^8.0.1"
+    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+    "@edx/frontend-platform": "7.1.3",
+    "@edx/openedx-atlas": "^0.6.0",
+    "@fortawesome/fontawesome-svg-core": "6.5.2",
+    "@fortawesome/free-brands-svg-icons": "6.5.2",
+    "@fortawesome/free-solid-svg-icons": "6.5.2",
+    "@fortawesome/react-fontawesome": "0.2.0",
+    "@openedx/paragon": "^22.1.1",
+    "@optimizely/react-sdk": "^2.9.1",
+    "@redux-devtools/extension": "3.3.0",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
+    "algoliasearch": "^4.14.3",
+    "algoliasearch-helper": "^3.14.0",
+    "classnames": "2.5.1",
+    "core-js": "3.36.1",
+    "fastest-levenshtein": "1.0.16",
+    "form-urlencoded": "6.1.4",
+    "prop-types": "15.8.1",
+    "query-string": "7.1.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-helmet": "6.1.0",
+    "react-loading-skeleton": "3.4.0",
+    "react-redux": "7.2.9",
+    "react-responsive": "8.2.0",
+    "react-router": "6.22.3",
+    "react-router-dom": "6.22.3",
+    "react-zendesk": "^0.1.13",
+    "redux": "4.2.0",
+    "redux-logger": "3.0.6",
+    "redux-mock-store": "1.5.4",
+    "redux-saga": "1.3.0",
+    "redux-thunk": "2.4.2",
+    "regenerator-runtime": "0.14.1",
+    "reselect": "4.1.8",
+    "universal-cookie": "4.0.4"
  },
  "devDependencies": {
-    "@edx/browserslist-config": "^1.5.0",
-    "@testing-library/react": "^16.3.0",
-    "@types/jest": "^29.5.14",
-    "babel-plugin-formatjs": "10.5.38",
-    "eslint-plugin-import": "2.31.0",
-    "jest": "^29.7.0",
-    "react-test-renderer": "^18.3.1",
-    "ts-jest": "^29.4.0",
-    "tsc-alias": "^1.8.16"
-  },
-  "peerDependencies": {
-    "@openedx/frontend-base": "^1.0.0-alpha.14",
-    "@openedx/paragon": "^23",
-    "@tanstack/react-query": "^5",
-    "react": "^18",
-    "react-dom": "^18",
-    "react-router": "^6",
-    "react-router-dom": "^6"
+    "@edx/browserslist-config": "^1.1.1",
+    "@edx/reactifex": "1.1.0",
+    "@openedx/frontend-build": "13.1.4",
+    "babel-plugin-formatjs": "10.5.14",
+    "eslint-plugin-import": "2.29.1",
+    "glob": "7.2.3",
+    "history": "5.3.0",
+    "husky": "7.0.4",
+    "jest": "29.7.0",
+    "react-test-renderer": "^17.0.2"
  }
 }
--- a/public/index.html
+++ b/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.3.9/iframeResizer.contentWindow.min.js"
+              integrity="sha512-mdT/HQRzoRP4laVz49Mndx6rcCGA3IhuyhP3gaY0E9sZPkwbtDk9ttQIq9o8qGCf5VvJv1Xsy3k2yTjfUoczqw=="
+              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>
--- a/site.config.dev.tsx
+++ b/site.config.dev.tsx
@@ -1,19 +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,
-  apps: [authnApp],
-};
-
-export default siteConfig;
--- a/site.config.test.tsx
+++ b/site.config.test.tsx
@@ -1,52 +0,0 @@
-import type { 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',
-
-  // Use 'test' instead of EnvironmentTypes.TEST to break a circular dependency
-  // when mocking `@openedx/frontend-base` itself.
-  environment: 'test' as SiteConfig['environment'],
-  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;
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -1,19 +0,0 @@
-import { Outlet } from 'react-router-dom';
-import { CurrentAppProvider } from '@openedx/frontend-base';
-
-import { appId } from './constants';
-import {
-  registerIcons,
-} from './common-components';
-
-import './sass/_style.scss';
-
-registerIcons();
-
-const Main = () => (
-  <CurrentAppProvider appId={appId}>
-    <Outlet />
-  </CurrentAppProvider>
-);
-
-export default Main;
--- a/src/MainApp.jsx
+++ b/src/MainApp.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { Helmet } from 'react-helmet';
+import { Navigate, Route, Routes } from 'react-router-dom';
+
+import {
+  EmbeddedRegistrationRoute, NotFoundPage, registerIcons, UnAuthOnlyRoute, Zendesk,
+} from './common-components';
+import configureStore from './data/configureStore';
+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 MainApp = () => (
+  <AppProvider store={configureStore()}>
+    <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 /></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>
+);
+
+export default MainApp;
--- a/src/mocks/file.js
+++ b/src/mocks/file.js
@@ -1 +0,0 @@
-module.exports = 'FileMock';
--- a/src/mocks/svg.js
+++ b/src/mocks/svg.js
@@ -1 +0,0 @@
-module.exports = 'SvgURL';
--- a/src/app.scss
+++ b/src/app.scss
@@ -1,2 +0,0 @@
-@use "@openedx/frontend-base/shell/app.scss";
-@use "./sass/style";
--- a/src/app.ts
+++ b/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;
--- a/src/base-container/components/default-layout/DefaultLayout.test.jsx
+++ b/src/base-container/components/default-layout/DefaultLayout.test.jsx
@@ -1,4 +1,6 @@
-import { IntlProvider } from '@openedx/frontend-base';
+import React from 'react';
+
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { render, screen } from '@testing-library/react';

 import { DefaultLargeLayout, DefaultMediumLayout, DefaultSmallLayout } from './index';
--- a/src/base-container/components/default-layout/LargeLayout.jsx
+++ b/src/base-container/components/default-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 classNames from 'classnames';

@@ -10,20 +13,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>
--- a/src/base-container/components/default-layout/MediumLayout.jsx
+++ b/src/base-container/components/default-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 classNames from 'classnames';

@@ -12,22 +15,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>
--- a/src/base-container/components/default-layout/SmallLayout.jsx
+++ b/src/base-container/components/default-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 classNames from 'classnames';

@@ -11,11 +14,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 +27,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>
--- a/src/base-container/components/default-layout/messages.js
+++ b/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': {
--- a/src/base-container/components/image-layout/ExtraSmallLayout.jsx
+++ b/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">
--- a/src/base-container/components/image-layout/LargeLayout.jsx
+++ b/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">
--- a/src/base-container/components/image-layout/MediumLayout.jsx
+++ b/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">
--- a/src/base-container/components/image-layout/SmallLayout.jsx
+++ b/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">
--- a/src/base-container/components/image-layout/messages.js
+++ b/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': {
--- a/src/base-container/components/welcome-page-layout/LargeLayout.jsx
+++ b/src/base-container/components/welcome-page-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 PropTypes from 'prop-types';

@@ -10,14 +13,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'])}
--- a/src/base-container/components/welcome-page-layout/MediumLayout.jsx
+++ b/src/base-container/components/welcome-page-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 PropTypes from 'prop-types';

@@ -12,14 +15,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'])}
--- a/src/base-container/components/welcome-page-layout/SmallLayout.jsx
+++ b/src/base-container/components/welcome-page-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 PropTypes from 'prop-types';

@@ -10,14 +13,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'])}
--- a/src/base-container/components/welcome-page-layout/messages.js
+++ b/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': {
--- a/src/base-container/index.jsx
+++ b/src/base-container/index.jsx
@@ -1,4 +1,6 @@
-import { useAppConfig } from '@openedx/frontend-base';
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
 import { breakpoints } from '@openedx/paragon';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
@@ -11,7 +13,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 (
--- a/src/base-container/tests/BaseContainer.test.jsx
+++ b/src/base-container/tests/BaseContainer.test.jsx
@@ -1,9 +1,11 @@
-import { IntlProvider, mergeAppConfig } from '@openedx/frontend-base';
+import React from 'react';
+
+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 +28,7 @@ describe('Base component tests', () => {
  });

  it('renders Image layout when ENABLE_IMAGE_LAYOUT configuration is enabled', () => {
-    mergeAppConfig(appId, {
+    mergeConfig({
      ENABLE_IMAGE_LAYOUT: true,
    });

--- a/src/common-components/EmbeddedRegistrationRoute.jsx
+++ b/src/common-components/EmbeddedRegistrationRoute.jsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import PropTypes from 'prop-types';
 import { Navigate } from 'react-router-dom';

--- a/src/common-components/EnterpriseSSO.jsx
+++ b/src/common-components/EnterpriseSSO.jsx
@@ -1,5 +1,8 @@
+import React from 'react';
+
+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 +10,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 +19,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 +50,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 +62,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>
--- a/src/common-components/FormGroup.jsx
+++ b/src/common-components/FormGroup.jsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';

 import {
  Form, TransitionReplace,
--- a/src/common-components/InstitutionLogistration.jsx
+++ b/src/common-components/InstitutionLogistration.jsx
@@ -1,4 +1,7 @@
-import { getSiteConfig, useIntl } from '@openedx/frontend-base';
+import React from 'react';
+
+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 +31,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,
--- a/src/common-components/NotFoundPage.jsx
+++ b/src/common-components/NotFoundPage.jsx
@@ -1,4 +1,6 @@
-import { FormattedMessage } from '@openedx/frontend-base';
+import React from 'react';
+
+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">
--- a/src/common-components/PasswordField.jsx
+++ b/src/common-components/PasswordField.jsx
@@ -1,6 +1,7 @@
-import { useState } from 'react';
+import React, { 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';
@@ -9,23 +10,19 @@ import {
 } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';

-import { LETTER_REGEX, NUMBER_REGEX } from '../data/constants';
-import { validatePasswordField } from '../register/data/utils';
 import messages from './messages';
-
-const noopFn = () => {};
+import { LETTER_REGEX, NUMBER_REGEX } from '../data/constants';
+import { clearRegistrationBackendError, fetchRealtimeValidations } from '../register/data/actions';
+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 {
-    validationApiRateLimited = false,
-    clearRegistrationBackendError = noopFn,
-    validateField = noopFn,
-  } = props;
-
  const handleBlur = (e) => {
    const { name, value } = e.target;
    if (name === props.name && e.relatedTarget?.name === 'passwordIcon') {
@@ -53,7 +50,7 @@ const PasswordField = (props) => {
      if (fieldError) {
        props.handleErrorChange('password', fieldError);
      } else if (!validationApiRateLimited) {
-        validateField({ password: passwordValue });
+        dispatch(fetchRealtimeValidations({ password: passwordValue }));
      }
    }
  };
@@ -68,7 +65,7 @@ const PasswordField = (props) => {
    }
    if (props.handleErrorChange) {
      props.handleErrorChange('password', '');
-      clearRegistrationBackendError('password');
+      dispatch(clearRegistrationBackendError('password'));
    }
    setTimeout(() => setShowTooltip(props.showRequirements && true), 150);
  };
@@ -158,9 +155,6 @@ PasswordField.defaultProps = {
  showRequirements: true,
  showScreenReaderText: true,
  autoComplete: null,
-  clearRegistrationBackendError: noopFn,
-  validateField: noopFn,
-  validationApiRateLimited: false,
 };

 PasswordField.propTypes = {
@@ -176,9 +170,6 @@ PasswordField.propTypes = {
  value: PropTypes.string.isRequired,
  autoComplete: PropTypes.string,
  showScreenReaderText: PropTypes.bool,
-  clearRegistrationBackendError: PropTypes.func,
-  validateField: PropTypes.func,
-  validationApiRateLimited: PropTypes.bool,
 };

 export default PasswordField;
--- a/src/common-components/RedirectLogistration.jsx
+++ b/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,6 +15,7 @@ const RedirectLogistration = (props) => {
    redirectToProgressiveProfilingPage,
    success,
    optionalFields,
+    redirectToRecommendationsPage,
    educationLevel,
    userId,
    registrationEmbedded,
@@ -28,7 +29,7 @@ const RedirectLogistration = (props) => {
    // 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 +37,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 +60,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 +90,7 @@ RedirectLogistration.defaultProps = {
  redirectUrl: '',
  redirectToProgressiveProfilingPage: false,
  optionalFields: {},
+  redirectToRecommendationsPage: false,
  userId: null,
  registrationEmbedded: false,
  host: '',
@@ -86,6 +104,7 @@ RedirectLogistration.propTypes = {
  redirectUrl: PropTypes.string,
  redirectToProgressiveProfilingPage: PropTypes.bool,
  optionalFields: PropTypes.shape({}),
+  redirectToRecommendationsPage: PropTypes.bool,
  userId: PropTypes.number,
  registrationEmbedded: PropTypes.bool,
  host: PropTypes.string,
--- a/src/common-components/SocialAuthProviders.jsx
+++ b/src/common-components/SocialAuthProviders.jsx
@@ -1,11 +1,14 @@
+import React from 'react';
+
+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 +18,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) => (
--- a/src/common-components/ThirdPartyAuth.jsx
+++ b/src/common-components/ThirdPartyAuth.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, Icon,
 } from '@openedx/paragon';
@@ -7,10 +10,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 +35,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 (
--- a/src/common-components/ThirdPartyAuthAlert.jsx
+++ b/src/common-components/ThirdPartyAuthAlert.jsx
@@ -1,14 +1,17 @@
-import { getSiteConfig, useIntl } from '@openedx/frontend-base';
+import React from 'react';
+
+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 +30,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>
--- a/src/common-components/UnAuthOnlyRoute.jsx
+++ b/src/common-components/UnAuthOnlyRoute.jsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';

-import { fetchAuthenticatedUser, getAuthenticatedUser, getSiteConfig } from '@openedx/frontend-base';
+import { getConfig } from '@edx/frontend-platform';
+import { fetchAuthenticatedUser, getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import PropTypes from 'prop-types';

 import {
@@ -24,7 +25,7 @@ const UnAuthOnlyRoute = ({ children }) => {

  if (isReady) {
    if (authUser && authUser.username) {
-      global.location.href = getSiteConfig().lmsBaseUrl.concat(DEFAULT_REDIRECT_URL);
+      global.location.href = getConfig().LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
      return null;
    }

--- a/src/common-components/Zendesk.jsx
+++ b/src/common-components/Zendesk.jsx
@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import Zendesk from 'react-zendesk';
+
+import messages from './messages';
+import { REGISTER_EMBEDDED_PAGE } from '../data/constants';
+
+const ZendeskHelp = () => {
+  const { formatMessage } = useIntl();
+  const setting = {
+    cookies: true,
+    webWidget: {
+      contactOptions: {
+        enabled: false,
+      },
+      chat: {
+        suppress: false,
+        departments: {
+          enabled: ['account settings', 'billing and payments', 'certificates', 'deadlines', 'errors and technical issues', 'other', 'proctoring'],
+        },
+      },
+      contactForm: {
+        ticketForms: [
+          {
+            id: 360003368814,
+            subject: false,
+            fields: [{ id: 'description', prefill: { '*': '' } }],
+          },
+        ],
+        selectTicketForm: {
+          '*': formatMessage(messages.selectTicketForm),
+        },
+        attachments: true,
+      },
+      helpCenter: {
+        originalArticleButton: true,
+      },
+      answerBot: {
+        suppress: false,
+        contactOnlyAfterQuery: true,
+        title: { '*': formatMessage(messages.supportTitle) },
+        avatar: {
+          url: getConfig().ZENDESK_LOGO_URL,
+          name: { '*': formatMessage(messages.supportTitle) },
+        },
+      },
+    },
+  };
+
+  if (window.location.pathname === REGISTER_EMBEDDED_PAGE) {
+    return null;
+  }
+
+  return (
+    <Zendesk defer zendeskKey={getConfig().ZENDESK_KEY} {...setting} />
+  );
+};
+
+export default ZendeskHelp;
--- a/src/common-components/components/ThirdPartyAuthContext.test.tsx
+++ b/src/common-components/components/ThirdPartyAuthContext.test.tsx
@@ -1,60 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import { ThirdPartyAuthProvider, useThirdPartyAuthContext } from './ThirdPartyAuthContext';
-
-const TestComponent = () => {
-  const {
-    fieldDescriptions,
-    optionalFields,
-    thirdPartyAuthApiStatus,
-    thirdPartyAuthContext,
-  } = useThirdPartyAuthContext();
-
-  return (
-    <div>
-      <div>{fieldDescriptions ? 'FieldDescriptions Available' : 'FieldDescriptions Not Available'}</div>
-      <div>{optionalFields ? 'OptionalFields Available' : 'OptionalFields Not Available'}</div>
-      <div>{thirdPartyAuthApiStatus !== null ? 'AuthApiStatus Available' : 'AuthApiStatus Not Available'}</div>
-      <div>{thirdPartyAuthContext ? 'AuthContext Available' : 'AuthContext Not Available'}</div>
-    </div>
-  );
-};
-
-describe('ThirdPartyAuthContext', () => {
-  it('should render children', () => {
-    render(
-      <ThirdPartyAuthProvider>
-        <div>Test Child</div>
-      </ThirdPartyAuthProvider>,
-    );
-
-    expect(screen.getByText('Test Child')).toBeTruthy();
-  });
-
-  it('should provide all context values to children', () => {
-    render(
-      <ThirdPartyAuthProvider>
-        <TestComponent />
-      </ThirdPartyAuthProvider>,
-    );
-
-    expect(screen.getByText('FieldDescriptions Available')).toBeTruthy();
-    expect(screen.getByText('OptionalFields Available')).toBeTruthy();
-    expect(screen.getByText('AuthApiStatus Not Available')).toBeTruthy(); // Initially null
-    expect(screen.getByText('AuthContext Available')).toBeTruthy();
-  });
-
-  it('should render multiple children', () => {
-    render(
-      <ThirdPartyAuthProvider>
-        <div>First Child</div>
-        <div>Second Child</div>
-        <div>Third Child</div>
-      </ThirdPartyAuthProvider>,
-    );
-
-    expect(screen.getByText('First Child')).toBeTruthy();
-    expect(screen.getByText('Second Child')).toBeTruthy();
-    expect(screen.getByText('Third Child')).toBeTruthy();
-  });
-});
--- a/src/common-components/components/ThirdPartyAuthContext.tsx
+++ b/src/common-components/components/ThirdPartyAuthContext.tsx
@@ -1,133 +0,0 @@
-import {
-  createContext, FC, ReactNode, useCallback, useContext, useMemo, useState,
-} from 'react';
-
-import { COMPLETE_STATE, FAILURE_STATE, PENDING_STATE } from '../../data/constants';
-
-interface ThirdPartyAuthContextType {
-  fieldDescriptions: any,
-  optionalFields: {
-    fields: any,
-    extended_profile: any[],
-  },
-  thirdPartyAuthApiStatus: string | null,
-  thirdPartyAuthContext: {
-    platformName: string | null,
-    autoSubmitRegForm: boolean,
-    currentProvider: string | null,
-    finishAuthUrl: string | null,
-    countryCode: string | null,
-    providers: any[],
-    secondaryProviders: any[],
-    pipelineUserDetails: any | null,
-    errorMessage: string | null,
-    welcomePageRedirectUrl: string | null,
-  },
-  setThirdPartyAuthContextBegin: () => void,
-  setThirdPartyAuthContextSuccess: (fieldDescData: any, optionalFieldsData: any, contextData: any) => void,
-  setThirdPartyAuthContextFailure: () => void,
-  clearThirdPartyAuthErrorMessage: () => void,
-}
-
-const ThirdPartyAuthContext = createContext<ThirdPartyAuthContextType | undefined>(undefined);
-
-interface ThirdPartyAuthProviderProps {
-  children: ReactNode,
-}
-
-export const ThirdPartyAuthProvider: FC<ThirdPartyAuthProviderProps> = ({ children }) => {
-  const [fieldDescriptions, setFieldDescriptions] = useState({});
-  const [optionalFields, setOptionalFields] = useState({
-    fields: {},
-    extended_profile: [],
-  });
-  const [thirdPartyAuthApiStatus, setThirdPartyAuthApiStatus] = useState<string | null>(null);
-  const [thirdPartyAuthContext, setThirdPartyAuthContext] = useState({
-    platformName: null,
-    autoSubmitRegForm: false,
-    currentProvider: null,
-    finishAuthUrl: null,
-    countryCode: null,
-    providers: [],
-    secondaryProviders: [],
-    pipelineUserDetails: null,
-    errorMessage: null,
-    welcomePageRedirectUrl: null,
-  });
-
-  // Function to handle begin state - mirrors THIRD_PARTY_AUTH_CONTEXT.BEGIN
-  const setThirdPartyAuthContextBegin = useCallback(() => {
-    setThirdPartyAuthApiStatus(PENDING_STATE);
-  }, []);
-
-  // Function to handle success - mirrors THIRD_PARTY_AUTH_CONTEXT.SUCCESS
-  const setThirdPartyAuthContextSuccess = useCallback((fieldDescData, optionalFieldsData, contextData) => {
-    setFieldDescriptions(fieldDescData?.fields || {});
-    setOptionalFields(optionalFieldsData || { fields: {}, extended_profile: [] });
-    setThirdPartyAuthContext(contextData || {
-      platformName: null,
-      autoSubmitRegForm: false,
-      currentProvider: null,
-      finishAuthUrl: null,
-      countryCode: null,
-      providers: [],
-      secondaryProviders: [],
-      pipelineUserDetails: null,
-      errorMessage: null,
-      welcomePageRedirectUrl: null,
-    });
-    setThirdPartyAuthApiStatus(COMPLETE_STATE);
-  }, []);
-
-  // Function to handle failure - mirrors THIRD_PARTY_AUTH_CONTEXT.FAILURE
-  const setThirdPartyAuthContextFailure = useCallback(() => {
-    setThirdPartyAuthApiStatus(FAILURE_STATE);
-    setThirdPartyAuthContext(prev => ({
-      ...prev,
-      errorMessage: null,
-    }));
-  }, []);
-
-  // Function to clear error message - mirrors THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG
-  const clearThirdPartyAuthErrorMessage = useCallback(() => {
-    setThirdPartyAuthApiStatus(PENDING_STATE);
-    setThirdPartyAuthContext(prev => ({
-      ...prev,
-      errorMessage: null,
-    }));
-  }, []);
-
-  const value = useMemo(() => ({
-    fieldDescriptions,
-    optionalFields,
-    thirdPartyAuthApiStatus,
-    thirdPartyAuthContext,
-    setThirdPartyAuthContextBegin,
-    setThirdPartyAuthContextSuccess,
-    setThirdPartyAuthContextFailure,
-    clearThirdPartyAuthErrorMessage,
-  }), [
-    fieldDescriptions,
-    optionalFields,
-    thirdPartyAuthApiStatus,
-    thirdPartyAuthContext,
-    setThirdPartyAuthContextBegin,
-    setThirdPartyAuthContextSuccess,
-    setThirdPartyAuthContextFailure,
-    clearThirdPartyAuthErrorMessage,
-  ]);
-
-  return (
-    <ThirdPartyAuthContext.Provider value={value}>
-      {children}
-    </ThirdPartyAuthContext.Provider>
-  );
-};
-
-export const useThirdPartyAuthContext = (): ThirdPartyAuthContextType => {
-  const context = useContext(ThirdPartyAuthContext);
-  if (context === undefined) {
-    throw new Error('useThirdPartyAuthContext must be used within a ThirdPartyAuthProvider');
-  }
-  return context;
-};
--- a/src/common-components/data/actions.js
+++ b/src/common-components/data/actions.js
@@ -0,0 +1,27 @@
+import { AsyncActionType } from '../../data/utils';
+
+export const THIRD_PARTY_AUTH_CONTEXT = new AsyncActionType('THIRD_PARTY_AUTH', 'GET_THIRD_PARTY_AUTH_CONTEXT');
+export const THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG = 'THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG';
+
+// Third party auth context
+export const getThirdPartyAuthContext = (urlParams) => ({
+  type: THIRD_PARTY_AUTH_CONTEXT.BASE,
+  payload: { urlParams },
+});
+
+export const getThirdPartyAuthContextBegin = () => ({
+  type: THIRD_PARTY_AUTH_CONTEXT.BEGIN,
+});
+
+export const getThirdPartyAuthContextSuccess = (fieldDescriptions, optionalFields, thirdPartyAuthContext) => ({
+  type: THIRD_PARTY_AUTH_CONTEXT.SUCCESS,
+  payload: { fieldDescriptions, optionalFields, thirdPartyAuthContext },
+});
+
+export const getThirdPartyAuthContextFailure = () => ({
+  type: THIRD_PARTY_AUTH_CONTEXT.FAILURE,
+});
+
+export const clearThirdPartyAuthContextErrorMessage = () => ({
+  type: THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG,
+});
--- a/src/common-components/data/apiHook.ts
+++ b/src/common-components/data/apiHook.ts
@@ -1,19 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-
-import { getThirdPartyAuthContext } from './api';
-import { ThirdPartyAuthQueryKeys } from './queryKeys';
-
-// Error constants
-export const THIRD_PARTY_AUTH_ERROR = 'third-party-auth-error';
-
-const useThirdPartyAuthHook = (pageId, payload, { enabled = true } = {}) => useQuery({
-  queryKey: ThirdPartyAuthQueryKeys.byPage(pageId, payload),
-  queryFn: () => getThirdPartyAuthContext(payload),
-  retry: false,
-  staleTime: 5 * 60 * 1000, // 5 minutes — TPA context is effectively static per session
-  enabled,
-});
-
-export {
-  useThirdPartyAuthHook,
-};
--- a/src/common-components/data/queryKeys.ts
+++ b/src/common-components/data/queryKeys.ts
@@ -1,6 +0,0 @@
-import { appId } from '../../constants';
-
-export const ThirdPartyAuthQueryKeys = {
-  all: [appId, 'ThirdPartyAuth'] as const,
-  byPage: (pageId: string, payload?: unknown) => [appId, 'ThirdPartyAuth', pageId, payload] as const,
-};
--- a/src/common-components/data/reducers.js
+++ b/src/common-components/data/reducers.js
@@ -0,0 +1,63 @@
+import { THIRD_PARTY_AUTH_CONTEXT, THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG } from './actions';
+import { COMPLETE_STATE, FAILURE_STATE, PENDING_STATE } from '../../data/constants';
+
+export const defaultState = {
+  fieldDescriptions: {},
+  optionalFields: {
+    fields: {},
+    extended_profile: [],
+  },
+  thirdPartyAuthApiStatus: null,
+  thirdPartyAuthContext: {
+    autoSubmitRegForm: false,
+    currentProvider: null,
+    finishAuthUrl: null,
+    countryCode: null,
+    providers: [],
+    secondaryProviders: [],
+    pipelineUserDetails: null,
+    errorMessage: null,
+    welcomePageRedirectUrl: null,
+  },
+};
+
+const reducer = (state = defaultState, action = {}) => {
+  switch (action.type) {
+    case THIRD_PARTY_AUTH_CONTEXT.BEGIN:
+      return {
+        ...state,
+        thirdPartyAuthApiStatus: PENDING_STATE,
+      };
+    case THIRD_PARTY_AUTH_CONTEXT.SUCCESS: {
+      return {
+        ...state,
+        fieldDescriptions: action.payload.fieldDescriptions?.fields,
+        optionalFields: action.payload.optionalFields,
+        thirdPartyAuthContext: action.payload.thirdPartyAuthContext,
+        thirdPartyAuthApiStatus: COMPLETE_STATE,
+      };
+    }
+    case THIRD_PARTY_AUTH_CONTEXT.FAILURE:
+      return {
+        ...state,
+        thirdPartyAuthApiStatus: FAILURE_STATE,
+        thirdPartyAuthContext: {
+          ...state.thirdPartyAuthContext,
+          errorMessage: null,
+        },
+      };
+    case THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG:
+      return {
+        ...state,
+        thirdPartyAuthApiStatus: PENDING_STATE,
+        thirdPartyAuthContext: {
+          ...state.thirdPartyAuthContext,
+          errorMessage: null,
+        },
+      };
+    default:
+      return state;
+  }
+};
+
+export default reducer;
--- a/src/common-components/data/sagas.js
+++ b/src/common-components/data/sagas.js
@@ -0,0 +1,32 @@
+import { logError } from '@edx/frontend-platform/logging';
+import { call, put, takeEvery } from 'redux-saga/effects';
+
+import {
+  getThirdPartyAuthContextBegin,
+  getThirdPartyAuthContextFailure,
+  getThirdPartyAuthContextSuccess,
+  THIRD_PARTY_AUTH_CONTEXT,
+} from './actions';
+import {
+  getThirdPartyAuthContext,
+} from './service';
+import { setCountryFromThirdPartyAuthContext } from '../../register/data/actions';
+
+export function* fetchThirdPartyAuthContext(action) {
+  try {
+    yield put(getThirdPartyAuthContextBegin());
+    const {
+      fieldDescriptions, optionalFields, thirdPartyAuthContext,
+    } = yield call(getThirdPartyAuthContext, action.payload.urlParams);
+
+    yield put(setCountryFromThirdPartyAuthContext(thirdPartyAuthContext.countryCode));
+    yield put(getThirdPartyAuthContextSuccess(fieldDescriptions, optionalFields, thirdPartyAuthContext));
+  } catch (e) {
+    yield put(getThirdPartyAuthContextFailure());
+    logError(e);
+  }
+}
+
+export default function* saga() {
+  yield takeEvery(THIRD_PARTY_AUTH_CONTEXT.BASE, fetchThirdPartyAuthContext);
+}
--- a/src/common-components/data/selectors.js
+++ b/src/common-components/data/selectors.js
@@ -0,0 +1,28 @@
+import { createSelector } from 'reselect';
+
+export const storeName = 'commonComponents';
+
+export const commonComponentsSelector = state => ({ ...state[storeName] });
+
+export const thirdPartyAuthContextSelector = createSelector(
+  commonComponentsSelector,
+  commonComponents => commonComponents.thirdPartyAuthContext,
+);
+
+export const fieldDescriptionSelector = createSelector(
+  commonComponentsSelector,
+  commonComponents => commonComponents.fieldDescriptions,
+);
+
+export const optionalFieldsSelector = createSelector(
+  commonComponentsSelector,
+  commonComponents => commonComponents.optionalFields,
+);
+
+export const tpaProvidersSelector = createSelector(
+  commonComponentsSelector,
+  commonComponents => ({
+    providers: commonComponents.thirdPartyAuthContext.providers,
+    secondaryProviders: commonComponents.thirdPartyAuthContext.secondaryProviders,
+  }),
+);
--- a/src/common-components/data/service.js
+++ b/src/common-components/data/service.js
@@ -1,6 +1,8 @@
-import { getAuthenticatedHttpClient, getSiteConfig } from '@openedx/frontend-base';
+import { getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';

-const getThirdPartyAuthContext = async (urlParams: string) => {
+// eslint-disable-next-line import/prefer-default-export
+export async function getThirdPartyAuthContext(urlParams) {
  const requestConfig = {
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    params: urlParams,
@@ -9,16 +11,15 @@ const getThirdPartyAuthContext = async (urlParams: string) => {

  const { data } = await getAuthenticatedHttpClient()
    .get(
-      `${getSiteConfig().lmsBaseUrl}/api/mfe_context`,
+      `${getConfig().LMS_BASE_URL}/api/mfe_context`,
      requestConfig,
-    );
+    )
+    .catch((e) => {
+      throw (e);
+    });
  return {
    fieldDescriptions: data.registrationFields || {},
    optionalFields: data.optionalFields || {},
    thirdPartyAuthContext: data.contextData || {},
  };
-};
-
-export {
-  getThirdPartyAuthContext,
-};
+}
--- a/src/common-components/data/tests/reducer.test.js
+++ b/src/common-components/data/tests/reducer.test.js
@@ -0,0 +1,82 @@
+import { PENDING_STATE } from '../../../data/constants';
+import { THIRD_PARTY_AUTH_CONTEXT, THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG } from '../actions';
+import reducer from '../reducers';
+
+describe('common components reducer', () => {
+  it('test mfe context response', () => {
+    const state = {
+      fieldDescriptions: {},
+      optionalFields: {},
+      thirdPartyAuthApiStatus: null,
+      thirdPartyAuthContext: {
+        currentProvider: null,
+        finishAuthUrl: null,
+        countryCode: null,
+        providers: [],
+        secondaryProviders: [],
+        pipelineUserDetails: null,
+        errorMessage: null,
+      },
+    };
+    const fieldDescriptions = {
+      fields: [],
+    };
+    const optionalFields = {
+      fields: [],
+      extended_profile: {},
+    };
+    const thirdPartyAuthContext = { ...state.thirdPartyAuthContext };
+    const action = {
+      type: THIRD_PARTY_AUTH_CONTEXT.SUCCESS,
+      payload: { fieldDescriptions, optionalFields, thirdPartyAuthContext },
+    };
+
+    expect(
+      reducer(state, action),
+    ).toEqual(
+      {
+        ...state,
+        fieldDescriptions: [],
+        optionalFields: {
+          fields: [],
+          extended_profile: {},
+        },
+        thirdPartyAuthApiStatus: 'complete',
+      },
+    );
+  });
+
+  it('should clear tpa context error message', () => {
+    const state = {
+      fieldDescriptions: {},
+      optionalFields: {},
+      thirdPartyAuthApiStatus: null,
+      thirdPartyAuthContext: {
+        currentProvider: null,
+        finishAuthUrl: null,
+        countryCode: null,
+        providers: [],
+        secondaryProviders: [],
+        pipelineUserDetails: null,
+        errorMessage: 'An error occurred',
+      },
+    };
+
+    const action = {
+      type: THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG,
+    };
+
+    expect(
+      reducer(state, action),
+    ).toEqual(
+      {
+        ...state,
+        thirdPartyAuthApiStatus: PENDING_STATE,
+        thirdPartyAuthContext: {
+          ...state.thirdPartyAuthContext,
+          errorMessage: null,
+        },
+      },
+    );
+  });
+});
--- a/src/common-components/data/tests/sagas.test.js
+++ b/src/common-components/data/tests/sagas.test.js
@@ -0,0 +1,71 @@
+import { runSaga } from 'redux-saga';
+
+import { setCountryFromThirdPartyAuthContext } from '../../../register/data/actions';
+import initializeMockLogging from '../../../setupTest';
+import * as actions from '../actions';
+import { fetchThirdPartyAuthContext } from '../sagas';
+import * as api from '../service';
+
+const { loggingService } = initializeMockLogging();
+
+describe('fetchThirdPartyAuthContext', () => {
+  const params = {
+    payload: { urlParams: {} },
+  };
+
+  const data = {
+    currentProvider: null,
+    providers: [],
+    secondaryProviders: [],
+    finishAuthUrl: null,
+    pipelineUserDetails: {},
+  };
+
+  beforeEach(() => {
+    loggingService.logError.mockReset();
+  });
+
+  it('should call service and dispatch success action', async () => {
+    const getThirdPartyAuthContext = jest.spyOn(api, 'getThirdPartyAuthContext')
+      .mockImplementation(() => Promise.resolve({
+        thirdPartyAuthContext: data,
+        fieldDescriptions: {},
+        optionalFields: {},
+      }));
+
+    const dispatched = [];
+    await runSaga(
+      { dispatch: (action) => dispatched.push(action) },
+      fetchThirdPartyAuthContext,
+      params,
+    );
+
+    expect(getThirdPartyAuthContext).toHaveBeenCalledTimes(1);
+    expect(dispatched).toEqual([
+      actions.getThirdPartyAuthContextBegin(),
+      setCountryFromThirdPartyAuthContext(),
+      actions.getThirdPartyAuthContextSuccess({}, {}, data),
+    ]);
+    getThirdPartyAuthContext.mockClear();
+  });
+
+  it('should call service and dispatch error action', async () => {
+    const getThirdPartyAuthContext = jest.spyOn(api, 'getThirdPartyAuthContext')
+      .mockImplementation(() => Promise.reject(new Error('something went wrong')));
+
+    const dispatched = [];
+    await runSaga(
+      { dispatch: (action) => dispatched.push(action) },
+      fetchThirdPartyAuthContext,
+      params,
+    );
+
+    expect(getThirdPartyAuthContext).toHaveBeenCalledTimes(1);
+    expect(loggingService.logError).toHaveBeenCalled();
+    expect(dispatched).toEqual([
+      actions.getThirdPartyAuthContextBegin(),
+      actions.getThirdPartyAuthContextFailure(),
+    ]);
+    getThirdPartyAuthContext.mockClear();
+  });
+});
--- a/src/common-components/index.jsx
+++ b/src/common-components/index.jsx
@@ -7,5 +7,9 @@ export { default as SocialAuthProviders } from './SocialAuthProviders';
 export { default as ThirdPartyAuthAlert } from './ThirdPartyAuthAlert';
 export { default as InstitutionLogistration } from './InstitutionLogistration';
 export { RenderInstitutionButton } from './InstitutionLogistration';
+export { default as reducer } from './data/reducers';
+export { default as saga } from './data/sagas';
+export { storeName } from './data/selectors';
 export { default as FormGroup } from './FormGroup';
 export { default as PasswordField } from './PasswordField';
+export { default as Zendesk } from './Zendesk';
--- a/src/common-components/messages.jsx
+++ b/src/common-components/messages.jsx
@@ -1,4 +1,4 @@
-import { defineMessages } from '@openedx/frontend-base';
+import { defineMessages } from '@edx/frontend-platform/i18n';

 const messages = defineMessages({
  // institution login strings
@@ -85,23 +85,33 @@ const messages = defineMessages({
  'login.third.party.auth.account.not.linked': {
    id: 'login.third.party.auth.account.not.linked',
    defaultMessage: 'You have successfully signed into {currentProvider}, but your {currentProvider} '
-      + 'account does not have a linked {platformName} account. To link your accounts, '
-      + 'sign in now using your {platformName} password.',
+                    + 'account does not have a linked {platformName} account. To link your accounts, '
+                    + 'sign in now using your {platformName} password.',
    description: 'Message that appears on login page if user has successfully authenticated with social '
-      + 'auth but no associated platform account exists',
+                  + 'auth but no associated platform account exists',
  },
  'register.third.party.auth.account.not.linked': {
    id: 'register.third.party.auth.account.not.linked',
    defaultMessage: 'You\'ve successfully signed into {currentProvider}! We just need a little more information '
-      + 'before you start learning with {platformName}.',
+                    + 'before you start learning with {platformName}.',
    description: 'Message that appears on register page if user has successfully authenticated with TPA '
-      + 'but no associated platform account exists',
+                  + 'but no associated platform account exists',
  },
  'registration.using.tpa.form.heading': {
    id: 'registration.using.tpa.form.heading',
    defaultMessage: 'Finish creating your account',
    description: 'Heading that appears above form when user is trying to create account using social auth',
  },
+  supportTitle: {
+    id: 'zendesk.supportTitle',
+    description: 'Title for the support button',
+    defaultMessage: 'edX Support',
+  },
+  selectTicketForm: {
+    id: 'zendesk.selectTicketForm',
+    description: 'Select ticket form',
+    defaultMessage: 'Please choose your request type:',
+  },
  'registration.other.options.heading': {
    id: 'registration.other.options.heading',
    defaultMessage: 'Or register with:',
--- a/src/common-components/tests/EmbeddedRegistrationRoute.test.jsx
+++ b/src/common-components/tests/EmbeddedRegistrationRoute.test.jsx
@@ -1,20 +1,22 @@
 /* eslint-disable import/no-import-module-exports */
 /* eslint-disable react/function-component-definition */
+import React from 'react';

-import { getSiteConfig } from '@openedx/frontend-base';
+import { getConfig } from '@edx/frontend-platform';
 import { render } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
-import {
-  MemoryRouter, Route, BrowserRouter as Router, Routes,
-} from 'react-router-dom';

 import { PAGE_NOT_FOUND, REGISTER_EMBEDDED_PAGE } from '../../data/constants';
 import EmbeddedRegistrationRoute from '../EmbeddedRegistrationRoute';

+import {
+  MemoryRouter, Route, BrowserRouter as Router, Routes,
+} from 'react-router-dom';
+
 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>;
+RRD.BrowserRouter = ({ children }) => <div>{ children }</div>;
 module.exports = RRD;

 const TestApp = () => (
@@ -59,7 +61,7 @@ describe('EmbeddedRegistrationRoute', () => {
  it('should render embedded register page if host query param is available in the url (embedded)', async () => {
    delete window.location;
    window.location = {
-      href: getSiteConfig().baseUrl.concat(REGISTER_EMBEDDED_PAGE),
+      href: getConfig().BASE_URL.concat(REGISTER_EMBEDDED_PAGE),
      search: '?host=http://localhost/host-websit',
    };

--- a/src/common-components/tests/FormField.test.jsx
+++ b/src/common-components/tests/FormField.test.jsx
@@ -1,11 +1,16 @@
-import { IntlProvider } from '@openedx/frontend-base';
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
 import { fireEvent, render } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';

+import { fetchRealtimeValidations } from '../../register/data/actions';
 import FormGroup from '../FormGroup';
 import PasswordField from '../PasswordField';

-
 describe('FormGroup', () => {
  const props = {
    floatingLabel: 'Email',
@@ -31,15 +36,27 @@ describe('FormGroup', () => {
 });

 describe('PasswordField', () => {
+  const mockStore = configureStore();
+  const IntlPasswordField = injectIntl(PasswordField);
  let props = {};
+  let store = {};

-  const wrapper = children => (
+  const reduxWrapper = children => (
    <IntlProvider locale="en">
-      {children}
+      <MemoryRouter>
+        <Provider store={store}>{children}</Provider>
+      </MemoryRouter>
    </IntlProvider>
  );

+  const initialState = {
+    register: {
+      validationApiRateLimited: false,
+    },
+  };
+
  beforeEach(() => {
+    store = mockStore(initialState);
    props = {
      floatingLabel: 'Password',
      name: 'password',
@@ -49,7 +66,7 @@ describe('PasswordField', () => {
  });

  it('should show/hide password on icon click', () => {
-    const { getByLabelText } = render(wrapper(<PasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
    const passwordInput = getByLabelText('Password');

    const showPasswordButton = getByLabelText('Show password');
@@ -62,7 +79,7 @@ describe('PasswordField', () => {
  });

  it('should show password requirement tooltip on focus', async () => {
-    const { getByLabelText } = render(wrapper(<PasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
    const passwordInput = getByLabelText('Password');
    jest.useFakeTimers();
    await act(async () => {
@@ -79,7 +96,7 @@ describe('PasswordField', () => {
      ...props,
      value: '',
    };
-    const { getByLabelText } = render(wrapper(<PasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
    const passwordInput = getByLabelText('Password');
    jest.useFakeTimers();
    await act(async () => {
@@ -102,7 +119,7 @@ describe('PasswordField', () => {
  });

  it('should update password requirement checks', async () => {
-    const { getByLabelText } = render(wrapper(<PasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
    const passwordInput = getByLabelText('Password');
    jest.useFakeTimers();
    await act(async () => {
@@ -125,7 +142,7 @@ describe('PasswordField', () => {
  });

  it('should not run validations when blur is fired on password icon click', () => {
-    const { container, getByLabelText } = render(wrapper(<PasswordField {...props} />));
+    const { container, getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
    const passwordInput = container.querySelector('input[name="password"]');

    const passwordIcon = getByLabelText('Show password');
@@ -146,7 +163,7 @@ describe('PasswordField', () => {
      ...props,
      handleBlur: jest.fn(),
    };
-    const { container } = render(wrapper(<PasswordField {...props} />));
+    const { container } = render(reduxWrapper(<IntlPasswordField {...props} />));
    const passwordInput = container.querySelector('input[name="password"]');

    fireEvent.blur(passwordInput, {
@@ -164,7 +181,7 @@ describe('PasswordField', () => {
      ...props,
      handleErrorChange: jest.fn(),
    };
-    const { container } = render(wrapper(<PasswordField {...props} />));
+    const { container } = render(reduxWrapper(<IntlPasswordField {...props} />));
    const passwordInput = container.querySelector('input[name="password"]');

    fireEvent.blur(passwordInput, {
@@ -187,7 +204,7 @@ describe('PasswordField', () => {
      handleErrorChange: jest.fn(),
    };

-    const { getByLabelText } = render(wrapper(<PasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));

    const passwordIcon = getByLabelText('Show password');

@@ -207,7 +224,7 @@ describe('PasswordField', () => {
      handleErrorChange: jest.fn(),
    };

-    const { getByLabelText } = render(wrapper(<PasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));

    const passwordIcon = getByLabelText('Show password');

@@ -226,13 +243,12 @@ describe('PasswordField', () => {
  });

  it('should run backend validations when frontend validations pass on blur when rendered from register page', () => {
-    const mockValidateField = jest.fn();
+    store.dispatch = jest.fn(store.dispatch);
    props = {
      ...props,
      handleErrorChange: jest.fn(),
-      validateField: mockValidateField,
    };
-    const { getByLabelText } = render(wrapper(<PasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
    const passwordField = getByLabelText('Password');
    fireEvent.blur(passwordField, {
      target: {
@@ -241,17 +257,18 @@ describe('PasswordField', () => {
      },
    });

-    expect(mockValidateField).toHaveBeenCalledWith({ password: 'password123' });
+    expect(store.dispatch).toHaveBeenCalledWith(fetchRealtimeValidations({ password: 'password123' }));
  });

  it('should use password value from prop when password icon is focused out (blur due to icon)', () => {
+    store.dispatch = jest.fn(store.dispatch);
    props = {
      ...props,
      value: 'testPassword',
      handleErrorChange: jest.fn(),
      handleBlur: jest.fn(),
    };
-    const { getByLabelText } = render(wrapper(<PasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));

    const passwordIcon = getByLabelText('Show password');

--- a/src/common-components/tests/SocialAuthProviders.test.jsx
+++ b/src/common-components/tests/SocialAuthProviders.test.jsx
@@ -1,4 +1,6 @@
-import { IntlProvider } from '@openedx/frontend-base';
+import React from 'react';
+
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import renderer from 'react-test-renderer';

 import registerIcons from '../RegisterFaIcons';
--- a/src/common-components/tests/ThirdPartyAuthAlert.test.jsx
+++ b/src/common-components/tests/ThirdPartyAuthAlert.test.jsx
@@ -1,7 +1,9 @@
-import { IntlProvider } from '@openedx/frontend-base';
+import React from 'react';
+
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import renderer from 'react-test-renderer';

-import { PENDING_STATE, REGISTER_PAGE } from '../../data/constants';
+import { REGISTER_PAGE } from '../../data/constants';
 import ThirdPartyAuthAlert from '../ThirdPartyAuthAlert';

 describe('ThirdPartyAuthAlert', () => {
@@ -36,19 +38,4 @@ describe('ThirdPartyAuthAlert', () => {
    ).toJSON();
    expect(tree).toMatchSnapshot();
  });
-
-  it('renders skeleton for pending third-party auth', () => {
-    props = {
-      ...props,
-      thirdPartyAuthApiStatus: PENDING_STATE,
-      isThirdPartyAuthActive: true,
-    };
-
-    const tree = renderer.create(
-      <IntlProvider locale="en">
-        <ThirdPartyAuthAlert {...props} />
-      </IntlProvider>,
-    ).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
 });
--- a/src/common-components/tests/UnAuthOnlyRoute.test.jsx
+++ b/src/common-components/tests/UnAuthOnlyRoute.test.jsx
@@ -1,18 +1,19 @@
 /* eslint-disable import/no-import-module-exports */
 /* eslint-disable react/function-component-definition */
+import React from 'react';

-import { fetchAuthenticatedUser, getAuthenticatedUser } from '@openedx/frontend-base';
+import { fetchAuthenticatedUser, getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { render } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
-import {
-  MemoryRouter, Route, BrowserRouter as Router, Routes,
-} from 'react-router-dom';

 import { UnAuthOnlyRoute } from '..';
 import { REGISTER_PAGE } from '../../data/constants';

-jest.mock('@openedx/frontend-base', () => ({
-  ...jest.requireActual('@openedx/frontend-base'),
+import {
+  MemoryRouter, Route, BrowserRouter as Router, Routes,
+} from 'react-router-dom';
+
+jest.mock('@edx/frontend-platform/auth', () => ({
  getAuthenticatedUser: jest.fn(),
  fetchAuthenticatedUser: jest.fn(),
 }));
--- a/src/common-components/tests/Zendesk.test.jsx
+++ b/src/common-components/tests/Zendesk.test.jsx
@@ -0,0 +1,17 @@
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import renderer from 'react-test-renderer';
+
+import Zendesk from '../Zendesk';
+
+jest.mock('react-zendesk', () => 'Zendesk');
+
+describe('Zendesk Help', () => {
+  it('should match login page third party auth alert message snapshot', () => {
+    const tree = renderer.create(
+      <IntlProvider locale="en">
+        <Zendesk />
+      </IntlProvider>,
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
--- a/src/common-components/tests/snapshots/SocialAuthProviders.test.jsx.snap
+++ b/src/common-components/tests/snapshots/SocialAuthProviders.test.jsx.snap
@@ -66,14 +66,14 @@ exports[`SocialAuthProviders should match social auth provider with iconClass sn
      data-prefix="fab"
      focusable="false"
      role="img"
-      style={{}}
+      style={Object {}}
      viewBox="0 0 488 512"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
        fill="currentColor"
-        style={{}}
+        style={Object {}}
      />
    </svg>
  </div>
@@ -93,7 +93,7 @@ exports[`SocialAuthProviders should match social auth provider with iconClass sn
 `;

 exports[`SocialAuthProviders should match social auth provider with iconImage snapshot 1`] = `
-[
+Array [
  <button
    className="btn-social btn-oa2-apple-id mr-3"
    data-provider-url="/auth/login/apple-id/?auth_entry=login&next=/dashboard"
--- a/src/common-components/tests/snapshots/ThirdPartyAuthAlert.test.jsx.snap
+++ b/src/common-components/tests/snapshots/ThirdPartyAuthAlert.test.jsx.snap
@@ -1,25 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`ThirdPartyAuthAlert renders skeleton for pending third-party auth 1`] = `
-<div
-  className="fade alert-content alert-warning mt-n2 mb-5 alert show"
-  id="tpa-alert"
-  role="alert"
->
-  <div
-    className="pgn__alert-message-wrapper"
-  >
-    <div
-      className="alert-message-content"
-    >
-      <p>
-        You have successfully signed into Google, but your Google account does not have a linked Test Site account. To link your accounts, sign in now using your Test Site password.
-      </p>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`ThirdPartyAuthAlert should match login page third party auth alert message snapshot 1`] = `
 <div
  className="fade alert-content alert-warning mt-n2 mb-5 alert show"
@@ -33,7 +13,7 @@ exports[`ThirdPartyAuthAlert should match login page third party auth alert mess
      className="alert-message-content"
    >
      <p>
-        You have successfully signed into Google, but your Google account does not have a linked Test Site account. To link your accounts, sign in now using your Test Site password.
+        You have successfully signed into Google, but your Google account does not have a linked Your Platform Name Here account. To link your accounts, sign in now using your Your Platform Name Here password.
      </p>
    </div>
  </div>
@@ -41,7 +21,7 @@ exports[`ThirdPartyAuthAlert should match login page third party auth alert mess
 `;

 exports[`ThirdPartyAuthAlert should match register page third party auth alert message snapshot 1`] = `
-[
+Array [
  <div
    className="fade alert-content alert-success mt-n2 mb-5 alert show"
    id="tpa-alert"
@@ -59,7 +39,7 @@ exports[`ThirdPartyAuthAlert should match register page third party auth alert m
          Almost done!
        </div>
        <p>
-          You've successfully signed into Google! We just need a little more information before you start learning with Test Site.
+          You've successfully signed into Google! We just need a little more information before you start learning with Your Platform Name Here.
        </p>
      </div>
    </div>
--- a/src/common-components/tests/snapshots/Zendesk.test.jsx.snap
+++ b/src/common-components/tests/snapshots/Zendesk.test.jsx.snap
@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Zendesk Help should match login page third party auth alert message snapshot 1`] = `
+<Zendesk
+  cookies={true}
+  defer={true}
+  webWidget={
+    Object {
+      "answerBot": Object {
+        "avatar": Object {
+          "name": Object {
+            "*": "edX Support",
+          },
+          "url": undefined,
+        },
+        "contactOnlyAfterQuery": true,
+        "suppress": false,
+        "title": Object {
+          "*": "edX Support",
+        },
+      },
+      "chat": Object {
+        "departments": Object {
+          "enabled": Array [
+            "account settings",
+            "billing and payments",
+            "certificates",
+            "deadlines",
+            "errors and technical issues",
+            "other",
+            "proctoring",
+          ],
+        },
+        "suppress": false,
+      },
+      "contactForm": Object {
+        "attachments": true,
+        "selectTicketForm": Object {
+          "*": "Please choose your request type:",
+        },
+        "ticketForms": Array [
+          Object {
+            "fields": Array [
+              Object {
+                "id": "description",
+                "prefill": Object {
+                  "*": "",
+                },
+              },
+            ],
+            "id": 360003368814,
+            "subject": false,
+          },
+        ],
+      },
+      "contactOptions": Object {
+        "enabled": false,
+      },
+      "helpCenter": Object {
+        "originalArticleButton": true,
+      },
+    }
+  }
+/>
+`;
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -0,0 +1,40 @@
+const configuration = {
+  // Cookies related configs
+  SESSION_COOKIE_DOMAIN: process.env.SESSION_COOKIE_DOMAIN,
+  USER_RETENTION_COOKIE_NAME: process.env.USER_RETENTION_COOKIE_NAME || '',
+  // Features
+  DISABLE_ENTERPRISE_LOGIN: process.env.DISABLE_ENTERPRISE_LOGIN || '',
+  ENABLE_AUTO_GENERATED_USERNAME: process.env.ENABLE_AUTO_GENERATED_USERNAME || false,
+  ENABLE_DYNAMIC_REGISTRATION_FIELDS: process.env.ENABLE_DYNAMIC_REGISTRATION_FIELDS || false,
+  ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN: process.env.ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN || false,
+  ENABLE_POST_REGISTRATION_RECOMMENDATIONS: process.env.ENABLE_POST_REGISTRATION_RECOMMENDATIONS || false,
+  MARKETING_EMAILS_OPT_IN: process.env.MARKETING_EMAILS_OPT_IN || '',
+  SHOW_CONFIGURABLE_EDX_FIELDS: process.env.SHOW_CONFIGURABLE_EDX_FIELDS || false,
+  SHOW_REGISTRATION_LINKS: process.env.SHOW_REGISTRATION_LINKS !== 'false',
+  ENABLE_IMAGE_LAYOUT: process.env.ENABLE_IMAGE_LAYOUT || false,
+  // Links
+  ACTIVATION_EMAIL_SUPPORT_LINK: process.env.ACTIVATION_EMAIL_SUPPORT_LINK || null,
+  AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: process.env.AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK || null,
+  LOGIN_ISSUE_SUPPORT_LINK: process.env.LOGIN_ISSUE_SUPPORT_LINK || null,
+  PASSWORD_RESET_SUPPORT_LINK: process.env.PASSWORD_RESET_SUPPORT_LINK || null,
+  POST_REGISTRATION_REDIRECT_URL: process.env.POST_REGISTRATION_REDIRECT_URL || '',
+  PRIVACY_POLICY: process.env.PRIVACY_POLICY || null,
+  SEARCH_CATALOG_URL: process.env.SEARCH_CATALOG_URL || null,
+  TOS_AND_HONOR_CODE: process.env.TOS_AND_HONOR_CODE || null,
+  TOS_LINK: process.env.TOS_LINK || null,
+  // Base container images
+  BANNER_IMAGE_LARGE: process.env.BANNER_IMAGE_LARGE || '',
+  BANNER_IMAGE_MEDIUM: process.env.BANNER_IMAGE_MEDIUM || '',
+  BANNER_IMAGE_SMALL: process.env.BANNER_IMAGE_SMALL || '',
+  BANNER_IMAGE_EXTRA_SMALL: process.env.BANNER_IMAGE_EXTRA_SMALL || '',
+  // Recommendation constants
+  GENERAL_RECOMMENDATIONS: process.env.GENERAL_RECOMMENDATIONS || '[]',
+  // Miscellaneous
+  INFO_EMAIL: process.env.INFO_EMAIL || '',
+  ZENDESK_KEY: process.env.ZENDESK_KEY,
+  ZENDESK_LOGO_URL: process.env.ZENDESK_LOGO_URL,
+  ALGOLIA_APP_ID: process.env.ALGOLIA_APP_ID || '',
+  ALGOLIA_SEARCH_API_KEY: process.env.ALGOLIA_SEARCH_API_KEY || '',
+};
+
+export default configuration;
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1 +0,0 @@
-export const appId = 'org.openedx.frontend.app.authn';
--- a/src/data/algolia.js
+++ b/src/data/algolia.js
@@ -0,0 +1,20 @@
+import { getConfig } from '@edx/frontend-platform';
+import algoliasearch from 'algoliasearch';
+
+// initialize Algolia workers
+const initializeSearchClient = () => algoliasearch(
+  getConfig().ALGOLIA_APP_ID,
+  getConfig().ALGOLIA_SEARCH_API_KEY,
+);
+
+const getLocationRestrictionFilter = (userCountry) => {
+  if (userCountry) {
+    return `NOT blocked_in:"${userCountry}" AND (allowed_in:"null" OR allowed_in:"${userCountry}")`;
+  }
+  return '';
+};
+
+export {
+  initializeSearchClient,
+  getLocationRestrictionFilter,
+};
--- a/src/data/configureStore.js
+++ b/src/data/configureStore.js
@@ -0,0 +1,33 @@
+import { getConfig } from '@edx/frontend-platform';
+import { composeWithDevTools } from '@redux-devtools/extension';
+import { applyMiddleware, compose, createStore } from 'redux';
+import { createLogger } from 'redux-logger';
+import createSagaMiddleware from 'redux-saga';
+import thunkMiddleware from 'redux-thunk';
+
+import createRootReducer from './reducers';
+import rootSaga from './sagas';
+
+const sagaMiddleware = createSagaMiddleware();
+
+function composeMiddleware() {
+  if (getConfig().ENVIRONMENT === 'development') {
+    const loggerMiddleware = createLogger({
+      collapsed: true,
+    });
+    return composeWithDevTools(applyMiddleware(thunkMiddleware, sagaMiddleware, loggerMiddleware));
+  }
+
+  return compose(applyMiddleware(thunkMiddleware, sagaMiddleware));
+}
+
+export default function configureStore(initialState = {}) {
+  const store = createStore(
+    createRootReducer(),
+    initialState,
+    composeMiddleware(),
+  );
+  sagaMiddleware.run(rootSaga);
+
+  return store;
+}
--- a/src/data/constants.js
+++ b/src/data/constants.js
@@ -5,6 +5,7 @@ export const REGISTER_EMBEDDED_PAGE = '/register-embedded';
 export const RESET_PAGE = '/reset';
 export const AUTHN_PROGRESSIVE_PROFILING = '/welcome';
 export const DEFAULT_REDIRECT_URL = '/dashboard';
+export const RECOMMENDATIONS = '/recommendations';
 export const PASSWORD_RESET_CONFIRM = '/password_reset_confirm/:token/';
 export const PAGE_NOT_FOUND = '/notfound';
 export const ENTERPRISE_LOGIN_URL = '/enterprise/login';
@@ -28,9 +29,9 @@ export const EMBEDDED = 'embedded';
 export const LETTER_REGEX = /[a-zA-Z]/;
 export const NUMBER_REGEX = /\d/;
 export const VALID_EMAIL_REGEX = '(^[-!#$%&\'*+/=?^_`{}|~0-9A-Z]+(\\.[-!#$%&\'*+/=?^_`{}|~0-9A-Z]+)*'
-  + '|^"([\\001-\\010\\013\\014\\016-\\037!#-\\[\\]-\\177]|\\\\[\\001-\\011\\013\\014\\016-\\177])*"'
-  + ')@((?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?\\.)+)(?:[A-Z0-9-]{2,63})'
-  + '|\\[(25[0-5]|2[0-4]\\d|[0-1]?\\d?\\d)(\\.(25[0-5]|2[0-4]\\d|[0-1]?\\d?\\d)){3}\\]$';
+                                 + '|^"([\\001-\\010\\013\\014\\016-\\037!#-\\[\\]-\\177]|\\\\[\\001-\\011\\013\\014\\016-\\177])*"'
+                                 + ')@((?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?\\.)+)(?:[A-Z0-9-]{2,63})'
+                                 + '|\\[(25[0-5]|2[0-4]\\d|[0-1]?\\d?\\d)(\\.(25[0-5]|2[0-4]\\d|[0-1]?\\d?\\d)){3}\\]$';

 // Query string parameters that can be passed to LMS to manage
 // things like auto-enrollment upon login and registration.
--- a/src/data/countries.ts
+++ b/src/data/countries.ts
@@ -1,59 +0,0 @@
-import { getPrimaryLanguageSubtag } from '@openedx/frontend-base';
-import COUNTRIES, { langs as countryLangs } from 'i18n-iso-countries';
-import arLocale from 'i18n-iso-countries/langs/ar.json';
-import caLocale from 'i18n-iso-countries/langs/ca.json';
-import enLocale from 'i18n-iso-countries/langs/en.json';
-import esLocale from 'i18n-iso-countries/langs/es.json';
-import frLocale from 'i18n-iso-countries/langs/fr.json';
-import heLocale from 'i18n-iso-countries/langs/he.json';
-import idLocale from 'i18n-iso-countries/langs/id.json';
-import koLocale from 'i18n-iso-countries/langs/ko.json';
-import plLocale from 'i18n-iso-countries/langs/pl.json';
-import ptLocale from 'i18n-iso-countries/langs/pt.json';
-import ruLocale from 'i18n-iso-countries/langs/ru.json';
-import ukLocale from 'i18n-iso-countries/langs/uk.json';
-import zhLocale from 'i18n-iso-countries/langs/zh.json';
-
-COUNTRIES.registerLocale(arLocale);
-COUNTRIES.registerLocale(enLocale);
-COUNTRIES.registerLocale(esLocale);
-COUNTRIES.registerLocale(frLocale);
-COUNTRIES.registerLocale(zhLocale);
-COUNTRIES.registerLocale(caLocale);
-COUNTRIES.registerLocale(heLocale);
-COUNTRIES.registerLocale(idLocale);
-COUNTRIES.registerLocale(koLocale);
-COUNTRIES.registerLocale(plLocale);
-COUNTRIES.registerLocale(ptLocale);
-COUNTRIES.registerLocale(ruLocale);
-COUNTRIES.registerLocale(ukLocale);
-
-/**
- * Provides a lookup table of country IDs to country names for the current locale.
- *
- * @memberof module:I18n
- */
-export function getCountryMessages(locale) {
-  const primaryLanguageSubtag = getPrimaryLanguageSubtag(locale);
-  const languageCode = countryLangs().includes(primaryLanguageSubtag) ? primaryLanguageSubtag : 'en';
-
-  return COUNTRIES.getNames(languageCode);
-}
-
-/**
- * Provides a list of countries represented as objects of the following shape:
- *
- * {
- *   key, // The ID of the country
- *   name // The localized name of the country
- * }
- *
- * TODO: ARCH-878: The list should be sorted alphabetically in the current locale.
- * This is useful for populating dropdowns.
- *
- * @memberof module:I18n
- */
-export function getCountryList(locale) {
-  const countryMessages = getCountryMessages(locale);
-  return Object.entries(countryMessages).map(([code, name]) => ({ code, name }));
-}
--- a/src/data/optimizely.js
+++ b/src/data/optimizely.js
@@ -0,0 +1,17 @@
+import {
+  createInstance,
+} from '@optimizely/react-sdk';
+
+const OPTIMIZELY_SDK_KEY = process.env.OPTIMIZELY_FULL_STACK_SDK_KEY;
+
+const getOptimizelyInstance = () => {
+  if (OPTIMIZELY_SDK_KEY) {
+    return createInstance({
+      sdkKey: OPTIMIZELY_SDK_KEY,
+    });
+  }
+
+  return null;
+};
+
+export default getOptimizelyInstance();
--- a/src/data/reducers.js
+++ b/src/data/reducers.js
@@ -0,0 +1,36 @@
+import { combineReducers } from 'redux';
+
+import {
+  reducer as commonComponentsReducer,
+  storeName as commonComponentsStoreName,
+} from '../common-components';
+import {
+  reducer as forgotPasswordReducer,
+  storeName as forgotPasswordStoreName,
+} from '../forgot-password';
+import {
+  reducer as loginReducer,
+  storeName as loginStoreName,
+} from '../login';
+import {
+  reducer as authnProgressiveProfilingReducers,
+  storeName as authnProgressiveProfilingStoreName,
+} from '../progressive-profiling';
+import {
+  reducer as registerReducer,
+  storeName as registerStoreName,
+} from '../register';
+import {
+  reducer as resetPasswordReducer,
+  storeName as resetPasswordStoreName,
+} from '../reset-password';
+
+const createRootReducer = () => combineReducers({
+  [loginStoreName]: loginReducer,
+  [registerStoreName]: registerReducer,
+  [commonComponentsStoreName]: commonComponentsReducer,
+  [forgotPasswordStoreName]: forgotPasswordReducer,
+  [resetPasswordStoreName]: resetPasswordReducer,
+  [authnProgressiveProfilingStoreName]: authnProgressiveProfilingReducers,
+});
+export default createRootReducer;
--- a/src/data/sagas.js
+++ b/src/data/sagas.js
@@ -0,0 +1,19 @@
+import { all } from 'redux-saga/effects';
+
+import { saga as commonComponentsSaga } from '../common-components';
+import { saga as forgotPasswordSaga } from '../forgot-password';
+import { saga as loginSaga } from '../login';
+import { saga as authnProgressiveProfilingSaga } from '../progressive-profiling';
+import { saga as registrationSaga } from '../register';
+import { saga as resetPasswordSaga } from '../reset-password';
+
+export default function* rootSaga() {
+  yield all([
+    loginSaga(),
+    registrationSaga(),
+    commonComponentsSaga(),
+    forgotPasswordSaga(),
+    resetPasswordSaga(),
+    authnProgressiveProfilingSaga(),
+  ]);
+}
--- a/src/data/tests/algolia.test.js
+++ b/src/data/tests/algolia.test.js
@@ -0,0 +1,16 @@
+import { getLocationRestrictionFilter } from '../algolia';
+
+describe('algoliaUtilsTests', () => {
+  it('test getLocationRestrictionFilter returns filter if country is passed', () => {
+    const countryCode = 'PK';
+    const filter = getLocationRestrictionFilter(countryCode);
+    const expectedFilter = `NOT blocked_in:"${countryCode}" AND (allowed_in:"null" OR allowed_in:"${countryCode}")`;
+    expect(filter).toEqual(expectedFilter);
+  });
+  it('test getLocationRestrictionFilter returns empty string if country is not passed', () => {
+    const countryCode = '';
+    const filter = getLocationRestrictionFilter(countryCode);
+    const expectedFilter = '';
+    expect(filter).toEqual(expectedFilter);
+  });
+});
--- a/src/data/tests/cookies.test.js
+++ b/src/data/tests/cookies.test.js
@@ -1,7 +1,13 @@
+import { getConfig } from '@edx/frontend-platform';
 import Cookies from 'universal-cookie';

 import { setCookie } from '../utils';

+// Mock getConfig function
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: jest.fn(),
+}));
+
 // Mock Cookies class
 jest.mock('universal-cookie');

@@ -11,7 +17,9 @@ describe('setCookie function', () => {
  });

  it('should set a cookie with default options', () => {
-    setCookie('testCookie', 'testValue', 'example.com');
+    getConfig.mockReturnValue({ SESSION_COOKIE_DOMAIN: 'example.com' });
+
+    setCookie('testCookie', 'testValue');

    expect(Cookies).toHaveBeenCalled();
    expect(Cookies).toHaveBeenCalledWith();
@@ -22,8 +30,10 @@ describe('setCookie function', () => {
  });

  it('should set a cookie with specified expiry', () => {
+    getConfig.mockReturnValue({ SESSION_COOKIE_DOMAIN: 'example.com' });
+
    const expiry = new Date('2023-12-31');
-    setCookie('testCookie', 'testValue', 'example.com', expiry);
+    setCookie('testCookie', 'testValue', expiry);

    expect(Cookies).toHaveBeenCalled();
    expect(Cookies).toHaveBeenCalledWith();
@@ -35,7 +45,7 @@ describe('setCookie function', () => {
  });

  it('should not set a cookie if cookieName is undefined', () => {
-    setCookie(undefined, 'testValue', 'example.com');
+    setCookie(undefined, 'testValue');

    expect(Cookies).not.toHaveBeenCalled();
  });
--- a/src/data/tests/reduxUtils.test.js
+++ b/src/data/tests/reduxUtils.test.js
@@ -0,0 +1,14 @@
+import AsyncActionType from '../utils/reduxUtils';
+
+describe('AsyncActionType', () => {
+  it('should return well formatted action strings', () => {
+    const actionType = new AsyncActionType('HOUSE_CATS', 'START_THE_RACE');
+
+    expect(actionType.BASE).toBe('HOUSE_CATS__START_THE_RACE');
+    expect(actionType.BEGIN).toBe('HOUSE_CATS__START_THE_RACE__BEGIN');
+    expect(actionType.SUCCESS).toBe('HOUSE_CATS__START_THE_RACE__SUCCESS');
+    expect(actionType.FAILURE).toBe('HOUSE_CATS__START_THE_RACE__FAILURE');
+    expect(actionType.RESET).toBe('HOUSE_CATS__START_THE_RACE__RESET');
+    expect(actionType.FORBIDDEN).toBe('HOUSE_CATS__START_THE_RACE__FORBIDDEN');
+  });
+});
--- a/src/data/utils/cookies.js
+++ b/src/data/utils/cookies.js
@@ -1,9 +1,10 @@
+import { getConfig } from '@edx/frontend-platform';
 import Cookies from 'universal-cookie';

-export default function setCookie(cookieName, cookieValue, cookieDomain, cookieExpiry) {
+export default function setCookie(cookieName, cookieValue, cookieExpiry) {
  if (cookieName) { // To avoid setting getting exception when setting cookie with undefined names.
    const cookies = new Cookies();
-    const options = { domain: cookieDomain, path: '/' };
+    const options = { domain: getConfig().SESSION_COOKIE_DOMAIN, path: '/' };
    if (cookieExpiry) {
      options.expires = cookieExpiry;
    }
--- a/src/data/utils/dataUtils.js
+++ b/src/data/utils/dataUtils.js
@@ -40,8 +40,10 @@ export const updatePathWithQueryParams = (path) => {
    return path;
  }

-  if (queryParams.includes('track=pwreset')) {
-    queryParams = queryParams.replace('?track=pwreset&', '?',).replace('?track=pwreset', '').replace('&track=pwreset', '').replace('?&', '?');
+  if (queryParams.indexOf('track=pwreset') > -1) {
+    queryParams = queryParams.replace(
+      '?track=pwreset&', '?',
+    ).replace('?track=pwreset', '').replace('&track=pwreset', '').replace('?&', '?');
  }

  return `${path}${queryParams}`;
@@ -51,7 +53,7 @@ export const getAllPossibleQueryParams = (locationURl = null) => {
  const urlParams = locationURl ? QueryString.parseUrl(locationURl).query : QueryString.parse(window.location.search);
  const params = {};
  Object.entries(urlParams).forEach(([key, value]) => {
-    if (AUTH_PARAMS.includes(key)) {
+    if (AUTH_PARAMS.indexOf(key) > -1) {
      params[key] = value;
    }
  });
--- a/src/data/utils/index.js
+++ b/src/data/utils/index.js
@@ -7,4 +7,5 @@ export {
  updatePathWithQueryParams,
  windowScrollTo,
 } from './dataUtils';
+export { default as AsyncActionType } from './reduxUtils';
 export { default as setCookie } from './cookies';
--- a/Show More
+++ b/Show More
				`@@ -1 +0,0 @@`
				`export const appId = 'org.openedx.frontend.app.authn';`