Merge branch 'master' into embeddable-registration-form

feat: final changes
fix: apply frontend validations (#1041 )
2023-09-11 10:26:29 +05:00 · 2023-09-07 12:15:48 +05:00 · 2023-09-07 11:57:10 +05:00 · 2023-09-07 11:55:41 +05:00
248 changed files with 21825 additions and 28571 deletions
--- a/.env
+++ b/.env
@@ -15,7 +15,7 @@ SEGMENT_KEY=''
 SITE_NAME=null
 INFO_EMAIL=''
 # ***** Cookies *****
-USER_RETENTION_COOKIE_NAME=null
+REGISTER_CONVERSION_COOKIE_NAME=null
 # ***** Links *****
 LOGIN_ISSUE_SUPPORT_LINK=''
 AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK=null
@@ -23,13 +23,11 @@ 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=''
@@ -41,5 +39,3 @@ BANNER_IMAGE_EXTRA_SMALL=''
 # ***** Miscellaneous *****
 APP_ID=''
 MFE_CONFIG_API_URL=''
-# Fallback in local style files
-PARAGON_THEME_URLS={}
--- a/.env.development
+++ b/.env.development
@@ -19,10 +19,8 @@ REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEGMENT_KEY=''
 SITE_NAME='Your Platform Name Here'
 INFO_EMAIL='info@example.com'
-# ***** Features *****
-ENABLE_DYNAMIC_REGISTRATION_FIELDS='true'
-ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN='true'
 # ***** Cookies *****
+REGISTER_CONVERSION_COOKIE_NAME='openedx-user-register-conversion'
 SESSION_COOKIE_DOMAIN='localhost'
 USER_INFO_COOKIE_NAME='edx-user-info'
 # ***** Links *****
@@ -41,5 +39,3 @@ APP_ID=''
 MFE_CONFIG_API_URL=''
 ZENDESK_KEY=''
 ZENDESK_LOGO_URL=''
-# Fallback in local style files
-PARAGON_THEME_URLS={}
--- a/.env.test
+++ b/.env.test
@@ -16,6 +16,6 @@ ORDER_HISTORY_URL='http://localhost:1996/orders'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEGMENT_KEY=''
 SITE_NAME='Your Platform Name Here'
+REGISTER_CONVERSION_COOKIE_NAME='openedx-user-register-conversion'
 APP_ID=''
 MFE_CONFIG_API_URL=''
-PARAGON_THEME_URLS={}
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,12 +1,12 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-const { createConfig } = require('@openedx/frontend-build');
+const { createConfig } = require('@edx/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:
+    // @edx/frontend-build from v3 to v5:
    // - TypeError: Cannot read property 'range' of null
    indent: [
      'error',
--- 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/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
@@ -18,4 +18,3 @@ temp/babel-plugin-react-intl
 *~
 /temp
 /.vscode
-src/i18n/messages
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-24
+18
--- a/.tx/config
+++ b/.tx/config
@@ -0,0 +1,9 @@
+[main]
+host = https://www.transifex.com
+
+[o:open-edx:p:edx-platform:r:frontend-app-authn]
+file_filter = src/i18n/messages/<lang>.json
+source_file = src/i18n/transifex_input.json
+source_lang = en
+type        = KEYVALUEJSON
+
--- a/2
+++ b/2
@@ -0,0 +1,2 @@
+# The following users are the owners of all frontend-app-authn files
+*       @openedx/vanguards
--- a/30
+++ b/30
@@ -1,17 +1,20 @@
+export TRANSIFEX_RESOURCE = frontend-app-authn
+transifex_langs = "ar,de,de_DE,es_419,fa_IR,fr,fr_CA,hi,it,it_IT,pt,pt_PT,ru,uk,zh_CN"
+
 intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json

 # This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-formatjs
+transifex_temp = ./temp/babel-plugin-react-intl

 precommit:
 	npm run lint
 	npm audit

 requirements:
-	npm ci
+	npm install

 i18n.extract:
 	# Pulling display strings from .jsx files into .json files...
@@ -29,16 +32,33 @@ detect_changed_source_translations:
 	# Checking for changed translations...
 	git diff --exit-code $(i18n)

+# Pushes translations to Transifex.  You must run make extract_translations first.
+push_translations:
+	# Pushing strings to Transifex...
+	tx push -s
+	# Fetching hashes from Transifex...
+	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
+	# Writing out comments to file...
+	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
+	# Pushing comments to Transifex...
+	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
+
+ifeq ($(OPENEDX_ATLAS_PULL),)
+# Pulls translations from Transifex.
+pull_translations:
+	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
+else
+# Experimental: OEP-58 Pulls translations using atlas
 pull_translations:
 	rm -rf src/i18n/messages
 	mkdir src/i18n/messages
 	cd src/i18n/messages \
-	  && atlas pull $(ATLAS_OPTIONS) \
+	  && atlas pull --filter=$(transifex_langs) \
 	           translations/paragon/src/i18n/messages:paragon \
-	           translations/frontend-platform/src/i18n/messages:frontend-platform \
 	           translations/frontend-app-authn/src/i18n/messages:frontend-app-authn

-	$(intl_imports) paragon frontend-platform frontend-app-authn
+	$(intl_imports) paragon frontend-app-authn
+endif

 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:
--- a/README.rst
+++ b/README.rst
@@ -1,12 +1,12 @@
-##################
-frontend-app-authn
-##################
-
 |Build Status| |ci-badge| |Codecov| |semantic-release|

-********
-Purpose
-********
+frontend-app-authn
+====================
+
+Please tag **@openedx/vanguards** on any PRs or issues.  Thanks!
+
+Introduction
+------------

 This is a micro-frontend application responsible for the login, registration and password reset functionality.

@@ -22,57 +22,33 @@ This is a micro-frontend application responsible for the login, registration and

 - Progressive profiling page

-***************
-Getting Started
-***************

-Prerequisites
-=============
+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.

-Cloning and Startup
-===================
+2. Start up LMS, if it's not already started.

-1. Clone your new repo:
+4. Within this project (frontend-app-authn), install requirements and start the development server:

-.. code-block:: bash
+   .. code-block::

-   git clone https://github.com/edx/frontend-app-authn.git
+      npm install
+      npm start # The server will run on port 1999

-2. Use the version of Node specified in the ``.nvmrc`` file.
+5. Once the dev server is up, visit http://localhost:1999 to access the MFE

-   The current version of the micro-frontend build scripts supports the version of Node found in ``.nvmrc``.
-   Using other major versions of node *may* work, but this is unsupported.  For
-   convenience, this repository includes a ``.nvmrc`` file to help in setting the
-   correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
-
-3. Install npm dependencies:
-
-.. code-block:: bash
-
-   cd frontend-app-authn && npm install
-
-4. Update the application port to use for local development:
-
-   The default port is 1999. If this does not work for you, update the line
-   ``PORT=1999`` to your port in all ``.env.*`` files
-
-5. Start the devserver. The app will be running at ``localhost:1999``, or whatever port you change it too.
-
-   .. code-block:: bash
-
-      npm run dev
+   .. 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:

@@ -130,19 +106,15 @@ The authentication micro-frontend also requires the following additional variabl

   * - ``MFE_CONFIG_API_URL``
     - Link of the API to get runtime mfe configuration variables from the site configuration or django settings.
-     - ``/api/v1/mfe_config`` | ``''`` (empty strings are falsy)
+     - ``/api/v1/mfe_config`` | ``''`` (empty strings are falsy)  

   * - ``APP_ID``
     - Name of MFE, this will be used by the API to get runtime configurations for the specific micro frontend. For a frontend repo `frontend-app-appName`, use `appName` as APP_ID.
     - ``authn`` | ``''``

-   * - ``ENABLE_IMAGE_LAYOUT``
-     - Enables the image layout feature within the authn. When set to True, this feature allows the inclusion of images in the base container layout. For more details on configuring this feature, please refer to the `Modifying base container <docs/how_tos/modifying_base_container.rst>`_.
-     - ``true`` | ``''`` (empty strings are falsy)
-

 edX-specific Environment Variables
-==================================
+**********************************

 Furthermore, there are several edX-specific environment variables that enable integrations with closed-source services private to the edX organization, and might be unsupported in Open edX.

@@ -160,16 +132,15 @@ Furthermore, there are several edX-specific environment variables that enable in

   * - ``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)
+     - ``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.

@@ -178,58 +149,34 @@ can find it it at `PULL_REQUEST_TEMPLATE.md <https://github.com/openedx/frontend

 This project is currently accepting all types of contributions, bug fixes and security fixes.

-Getting Help
-============
-
-If you're having trouble, we have discussion forums at
-https://discuss.openedx.org where you can connect with others in the community.
-
-Our real-time conversations are on Slack. You can request a `Slack
-invitation`_, then join our `community Slack workspace`_.  Because this is a
-frontend repository, the best place to discuss it would be in the `#wg-frontend
-channel`_.
-
-For anything non-trivial, the best path is to open an issue in this repository
-with as many details about the issue you are facing as you can provide.
-
-https://github.com/openedx/frontend-app-authn/issues
-
-For more information about these options, see the `Getting Help`_ page.
-
-.. _Slack invitation: https://openedx.org/slack
-.. _community Slack workspace: https://openedx.slack.com/
-.. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6
-.. _Getting Help: https://openedx.org/community/connect
-
-The Open edX Code of Conduct
-============================
+Open edX Code of Conduct
+------------------------
 All community members are expected to follow the `Open edX Code of Conduct <https://openedx.org/code-of-conduct/>`_.

 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/vanguards>`_. Backstage pulls this data from the ``catalog-info.yaml``
 file in this repo.

 Reporting Security Issues
-=========================
+-------------------------

-Please do not report security issues in public. Please email security@openedx.org.
+Please do not report security issues in public. Please email security@edx.org.

 Known Issues
-============
+------------

 None

 License
-=======
+-------

 The code in this repository is licensed under the GNU Affero General Public License v3.0, unless
 otherwise noted.

 Please see `LICENSE <https://github.com/openedx/frontend-app-authn/blob/master/LICENSE>`_ for details.

-
 ==============================

 .. |Build Status| image:: https://api.travis-ci.com/edx/frontend-app-authn.svg?branch=master
--- 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: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/docs/how_tos/modifying_base_container.rst
+++ b/docs/how_tos/modifying_base_container.rst
@@ -1,39 +0,0 @@
-========================================
-Modifying the Base Container in Authn
-========================================
-
-The base container in Authn serves as the fundamental layout structure for rendering different components based on configurations. This document outlines the process for modifying the base container to accommodate changes or customize layouts as needed.
-
-Understanding Base Container Versions
--------------------------------------
-
-The base container supports two main versions:
-
- **Default Layout:** The default layout is the standard layout used when specific configurations do not dictate otherwise.
-.. image:: ../images/default_layout.png
- **Image Layout:** The image layout is an alternative layout option that can be enabled based on configurations.
-.. image:: ../images/image_layout.png
-
-Enabling the Image Layout
---------------------------
-
-To activate the image layout feature, navigate to your .env file and update the configurations:
-
-**Update Configuration**
-
-Locate the ``ENABLE_IMAGE_LAYOUT`` parameter and set its value to  ``true``. Additionally, ensure that the Image configuration settings are provided. Your overall configurations should resemble the following:
-
-
-   .. code-block::
-
-      # ***** Image Layout Configuration *****
-      ENABLE_IMAGE_LAYOUT = True  # Set to True to enable image layout feature
-
-      # ***** Base Container Images *****
-      BANNER_IMAGE_LARGE='' # Path to the large banner image
-      BANNER_IMAGE_MEDIUM='' # Path to the medium-sized banner image
-      BANNER_IMAGE_SMALL=''  # Path to the small banner image
-      BANNER_IMAGE_EXTRA_SMALL=''  # Path to the extra-small banner image
-
-
-This allows for the customization and adaptation of the base container layout according to specific requirements.
--- a/docs/images/default_layout.png
+++ b/docs/images/default_layout.png
--- a/docs/images/image_layout.png
+++ b/docs/images/image_layout.png
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,4 +1,4 @@
-const { createConfig } = require('@openedx/frontend-build');
+const { createConfig } = require('@edx/frontend-build');

 module.exports = createConfig('jest', {
  setupFiles: [
--- 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/vanguards
+openedx-release:
+  ref: master
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -11,14 +11,17 @@
  ],
  "scripts": {
    "build": "fedx-scripts webpack",
-    "i18n_extract": "fedx-scripts formatjs extract",
+    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
-    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
    "snapshot": "fedx-scripts jest --updateSnapshot",
    "start": "fedx-scripts webpack-dev-server --progress",
-    "dev": "PUBLIC_PATH=/authn/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
    "test": "fedx-scripts jest --coverage --passWithNoTests"
  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint"
+    }
+  },
  "author": "edX",
  "license": "AGPL-3.0",
  "homepage": "https://github.com/openedx/frontend-app-authn#readme",
@@ -29,48 +32,55 @@
    "url": "https://github.com/openedx/frontend-app-authn/issues"
  },
  "dependencies": {
-    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-platform": "^8.3.1",
-    "@edx/openedx-atlas": "^0.6.0",
-    "@fortawesome/fontawesome-svg-core": "6.7.2",
-    "@fortawesome/free-brands-svg-icons": "6.7.2",
-    "@fortawesome/free-solid-svg-icons": "6.7.2",
-    "@fortawesome/react-fontawesome": "0.2.6",
-    "@openedx/frontend-plugin-framework": "^1.7.0",
-    "@openedx/paragon": "^23.4.2",
+    "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
+    "@edx/frontend-platform": "^5.0.0",
+    "@edx/paragon": "20.46.2",
+    "@fortawesome/fontawesome-svg-core": "6.4.2",
+    "@fortawesome/free-brands-svg-icons": "6.4.2",
+    "@fortawesome/free-solid-svg-icons": "6.4.2",
+    "@fortawesome/react-fontawesome": "0.2.0",
    "@optimizely/react-sdk": "^2.9.1",
-    "@tanstack/react-query": "^5.90.19",
-    "@testing-library/react": "^16.2.0",
+    "@redux-devtools/extension": "3.2.5",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
    "algoliasearch": "^4.14.3",
-    "algoliasearch-helper": "^3.26.0",
-    "classnames": "2.5.1",
-    "core-js": "3.43.0",
+    "algoliasearch-helper": "^3.14.0",
+    "classnames": "2.3.2",
+    "core-js": "3.32.0",
    "fastest-levenshtein": "1.0.16",
-    "form-urlencoded": "6.1.6",
+    "form-urlencoded": "6.1.0",
    "prop-types": "15.8.1",
    "query-string": "7.1.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
    "react-helmet": "6.1.0",
-    "react-loading-skeleton": "3.5.0",
+    "react-loading-skeleton": "3.3.1",
+    "react-redux": "7.2.9",
    "react-responsive": "8.2.0",
-    "react-router": "6.30.3",
-    "react-router-dom": "6.30.3",
+    "react-router": "6.15.0",
+    "react-router-dom": "6.15.0",
    "react-zendesk": "^0.1.13",
-    "regenerator-runtime": "0.14.1",
-    "universal-cookie": "7.2.2"
+    "redux": "4.2.0",
+    "redux-logger": "3.0.6",
+    "redux-mock-store": "1.5.4",
+    "redux-saga": "1.2.3",
+    "redux-thunk": "2.4.2",
+    "regenerator-runtime": "0.14.0",
+    "reselect": "4.1.8",
+    "universal-cookie": "4.0.4"
  },
  "devDependencies": {
    "@edx/browserslist-config": "^1.1.1",
-    "@edx/typescript-config": "^1.1.0",
-    "@openedx/frontend-build": "^14.6.2",
-    "@testing-library/jest-dom": "^6.9.1",
-    "babel-plugin-formatjs": "10.5.41",
-    "eslint-plugin-import": "2.32.0",
+    "@edx/frontend-build": "12.9.8",
+    "@edx/reactifex": "1.1.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
+    "babel-plugin-formatjs": "10.5.3",
+    "enzyme": "3.11.0",
+    "eslint-plugin-import": "2.28.0",
    "glob": "7.2.3",
    "history": "5.3.0",
-    "jest": "30.3.0",
-    "react-test-renderer": "^18.3.1",
-    "ts-jest": "^29.4.0"
+    "husky": "7.0.4",
+    "jest": "29.6.2",
+    "react-test-renderer": "^17.0.2"
  }
 }
--- a/public/index.html
+++ b/public/index.html
@@ -1,12 +1,11 @@
 <!doctype html>
 <html lang="en-us">
  <head>
-      <title><%= (process.env.SITE_NAME && process.env.SITE_NAME != 'null') ? 'Authentication | ' + process.env.SITE_NAME : 'Authentication' %></title>    
+      <title>Authn | <%= process.env.SITE_NAME %></title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon"/>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.4.4/iframeResizer.contentWindow.min.js"
-              integrity="sha512-IWwZFBvHzN41wNI6etRLLuLrDDj/6AwJcPt7cmKJAzluYTIHHQ1PF8wh0rSy05jxEvvjflVvH2MxeV6riyEEXg=="
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.6/iframeResizer.contentWindow.min.js"
+              integrity="sha512-R7Piufj0/o6jG9ZKrAvS2dblFr2kkuG4XVQwStX+/4P+KwOLUXn2DXy0l1AJDxxqGhkM/FJllZHG2PKOAheYzg=="
              crossorigin="anonymous"
              referrerpolicy="no-referrer">
      </script>
--- a/src/MainApp.jsx
+++ b/src/MainApp.jsx
@@ -1,12 +1,14 @@
+import React from 'react';
+
 import { getConfig } from '@edx/frontend-platform';
 import { AppProvider } from '@edx/frontend-platform/react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Helmet } from 'react-helmet';
 import { Navigate, Route, Routes } from 'react-router-dom';

 import {
  EmbeddedRegistrationRoute, NotFoundPage, registerIcons, UnAuthOnlyRoute, Zendesk,
 } from './common-components';
+import configureStore from './data/configureStore';
 import {
  AUTHN_PROGRESSIVE_PROFILING,
  LOGIN_PAGE,
@@ -22,55 +24,40 @@ import { ForgotPasswordPage } from './forgot-password';
 import Logistration from './logistration/Logistration';
 import { ProgressiveProfiling } from './progressive-profiling';
 import { RecommendationsPage } from './recommendations';
-import { RegistrationPage } from './register';
+import { EmbeddableRegistrationPage } from './register';
 import { ResetPasswordPage } from './reset-password';

 import './index.scss';

 registerIcons();

-const queryClient = new QueryClient({
-  defaultOptions: {
-    mutations: {
-      retry: false,
-    },
-  },
-});
-
 const MainApp = () => (
-  <QueryClientProvider client={queryClient}>
-    <AppProvider>
-      <Helmet>
-        <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
-      </Helmet>
-      {getConfig().ZENDESK_KEY && <Zendesk />}
-      <Routes>
-        <Route path="/" element={<Navigate replace to={updatePathWithQueryParams(REGISTER_PAGE)} />} />
-        <Route
-          path={REGISTER_EMBEDDED_PAGE}
-          element={<EmbeddedRegistrationRoute><RegistrationPage /></EmbeddedRegistrationRoute>}
-        />
-        <Route
-          path={LOGIN_PAGE}
-          element={
-            <UnAuthOnlyRoute><Logistration selectedPage={LOGIN_PAGE} /></UnAuthOnlyRoute>
-          }
-        />
-        <Route
-          path={REGISTER_PAGE}
-          element={
-            <UnAuthOnlyRoute><Logistration selectedPage={REGISTER_PAGE} /></UnAuthOnlyRoute>
-          }
-        />
-        <Route path={RESET_PAGE} element={<UnAuthOnlyRoute><ForgotPasswordPage /></UnAuthOnlyRoute>} />
-        <Route path={PASSWORD_RESET_CONFIRM} element={<ResetPasswordPage />} />
-        <Route path={AUTHN_PROGRESSIVE_PROFILING} element={<ProgressiveProfiling />} />
-        <Route path={RECOMMENDATIONS} element={<RecommendationsPage />} />
-        <Route path={PAGE_NOT_FOUND} element={<NotFoundPage />} />
-        <Route path="*" element={<Navigate replace to={PAGE_NOT_FOUND} />} />
-      </Routes>
-    </AppProvider>
-  </QueryClientProvider>
+  <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><EmbeddableRegistrationPage /></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/base-container/components/default-layout/DefaultLayout.test.jsx
+++ b/src/base-container/components/default-layout/DefaultLayout.test.jsx
@@ -1,48 +1,50 @@
+import React from 'react';
+
 import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { render, screen } from '@testing-library/react';
+import { mount } from 'enzyme';

 import { DefaultLargeLayout, DefaultMediumLayout, DefaultSmallLayout } from './index';

 describe('Default Layout tests', () => {
  it('should display the form passed as a child in SmallScreenLayout', () => {
-    render(
+    const smallScreen = mount(
      <IntlProvider locale="en">
        <div>
          <DefaultSmallLayout />
-          <form aria-label="form">
+          <form>
            <input type="text" />
          </form>
        </div>
      </IntlProvider>,
    );
-    expect(screen.getByRole('form')).toBeDefined();
+    expect(smallScreen.find('form').exists()).toEqual(true);
  });

  it('should display the form passed as a child in MediumScreenLayout', () => {
-    render(
+    const mediumScreen = mount(
      <IntlProvider locale="en">
        <div>
          <DefaultMediumLayout />
-          <form aria-label="form">
+          <form>
            <input type="text" />
          </form>
        </div>
      </IntlProvider>,
    );
-    expect(screen.getByRole('form')).toBeDefined();
+    expect(mediumScreen.find('form').exists()).toEqual(true);
  });

  it('should display the form passed as a child in LargeScreenLayout', () => {
-    render(
+    const largeScreen = mount(
      <IntlProvider locale="en">
        <div>
          <DefaultLargeLayout />
-          <form aria-label="form">
+          <form>
            <input type="text" />
          </form>
        </div>
      </IntlProvider>,
    );
-    expect(screen.getByRole('form')).toBeDefined();
+    expect(largeScreen.find('form').exists()).toEqual(true);
  });
 });
--- a/src/base-container/components/default-layout/LargeLayout.jsx
+++ b/src/base-container/components/default-layout/LargeLayout.jsx
@@ -1,6 +1,8 @@
+import React from 'react';
+
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@openedx/paragon';
+import { Hyperlink, Image } from '@edx/paragon';
 import classNames from 'classnames';

 import messages from './messages';
--- a/src/base-container/components/default-layout/MediumLayout.jsx
+++ b/src/base-container/components/default-layout/MediumLayout.jsx
@@ -1,6 +1,8 @@
+import React from 'react';
+
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@openedx/paragon';
+import { Hyperlink, Image } from '@edx/paragon';
 import classNames from 'classnames';

 import messages from './messages';
@@ -21,15 +23,13 @@ const MediumLayout = () => {
            <div>
              <h1
                className={classNames(
-                  'display-1 text-white mt-5 mb-5 mr-2 main-heading',
+                  'display-1 text-white mt-5 mb-5 mr-2',
                  { '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: getConfig().SITE_NAME })}
-                  </span>
+                <span className="mr-2">{formatMessage(messages['start.learning'])}</span>
+                <span className="text-accent-a d-inline-block">
+                  {formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
                </span>
              </h1>
            </div>
--- a/src/base-container/components/default-layout/SmallLayout.jsx
+++ b/src/base-container/components/default-layout/SmallLayout.jsx
@@ -1,6 +1,8 @@
+import React from 'react';
+
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@openedx/paragon';
+import { Hyperlink, Image } from '@edx/paragon';
 import classNames from 'classnames';

 import messages from './messages';
@@ -15,18 +17,17 @@ const SmallLayout = () => {
        <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="d-flex align-items-center mb-3 mt-3 mr-3">
          <div className={classNames({ 'small-yellow-line mr-n2.5': getConfig().SITE_NAME === 'edX' })} />
          <h1
            className={classNames(
              'text-white mt-3.5 mb-3.5',
+              { '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: getConfig().SITE_NAME })}
-              </span>
+            <span className="mr-1">{formatMessage(messages['start.learning'])}</span>
+            <span className="text-accent-a d-inline-block">
+              {formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
            </span>
          </h1>
        </div>
--- a/src/base-container/components/image-layout/ExtraSmallLayout.jsx
+++ b/src/base-container/components/image-layout/ExtraSmallLayout.jsx
@@ -2,7 +2,7 @@ import React from 'react';

 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@openedx/paragon';
+import { Hyperlink, Image } from '@edx/paragon';

 import messages from './messages';

--- a/src/base-container/components/image-layout/LargeLayout.jsx
+++ b/src/base-container/components/image-layout/LargeLayout.jsx
@@ -2,7 +2,7 @@ import React from 'react';

 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@openedx/paragon';
+import { Hyperlink, Image } from '@edx/paragon';

 import './index.scss';
 import messages from './messages';
--- a/src/base-container/components/image-layout/MediumLayout.jsx
+++ b/src/base-container/components/image-layout/MediumLayout.jsx
@@ -2,7 +2,7 @@ import React from 'react';

 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@openedx/paragon';
+import { Hyperlink, Image } from '@edx/paragon';

 import './index.scss';
 import messages from './messages';
--- a/src/base-container/components/image-layout/SmallLayout.jsx
+++ b/src/base-container/components/image-layout/SmallLayout.jsx
@@ -2,7 +2,7 @@ import React from 'react';

 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@openedx/paragon';
+import { Hyperlink, Image } from '@edx/paragon';

 import messages from './messages';

--- a/src/base-container/components/welcome-page-layout/LargeLayout.jsx
+++ b/src/base-container/components/welcome-page-layout/LargeLayout.jsx
@@ -1,11 +1,13 @@
+import React from 'react';
+
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@openedx/paragon';
+import { Hyperlink, Image } from '@edx/paragon';
 import PropTypes from 'prop-types';

 import messages from './messages';

-const LargeLayout = ({ fullName }) => {
+const LargeLayout = ({ username }) => {
  const { formatMessage } = useIntl();

  return (
@@ -18,7 +20,7 @@ const LargeLayout = ({ fullName }) => {
          <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: getConfig().SITE_NAME, fullName })}
+              {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username })}
            </h1>
            <h2 className="complete-your-profile">
              {formatMessage(messages['complete.your.profile.1'])}
@@ -41,7 +43,7 @@ const LargeLayout = ({ fullName }) => {
 };

 LargeLayout.propTypes = {
-  fullName: PropTypes.string.isRequired,
+  username: PropTypes.string.isRequired,
 };

 export default LargeLayout;
--- a/src/base-container/components/welcome-page-layout/MediumLayout.jsx
+++ b/src/base-container/components/welcome-page-layout/MediumLayout.jsx
@@ -1,11 +1,13 @@
+import React from 'react';
+
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@openedx/paragon';
+import { Hyperlink, Image } from '@edx/paragon';
 import PropTypes from 'prop-types';

 import messages from './messages';

-const MediumLayout = ({ fullName }) => {
+const MediumLayout = ({ username }) => {
  const { formatMessage } = useIntl();

  return (
@@ -20,7 +22,7 @@ const MediumLayout = ({ fullName }) => {
            <div className="medium-yellow-line mt-5 mr-n2" />
            <div>
              <h1 className="h3 data-hj-suppress mw-320">
-                {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, fullName })}
+                {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username })}
              </h1>
              <h2 className="display-1">
                {formatMessage(messages['complete.your.profile.1'])}
@@ -44,7 +46,7 @@ const MediumLayout = ({ fullName }) => {
 };

 MediumLayout.propTypes = {
-  fullName: PropTypes.string.isRequired,
+  username: PropTypes.string.isRequired,
 };

 export default MediumLayout;
--- a/src/base-container/components/welcome-page-layout/SmallLayout.jsx
+++ b/src/base-container/components/welcome-page-layout/SmallLayout.jsx
@@ -1,11 +1,13 @@
+import React from 'react';
+
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@openedx/paragon';
+import { Hyperlink, Image } from '@edx/paragon';
 import PropTypes from 'prop-types';

 import messages from './messages';

-const SmallLayout = ({ fullName }) => {
+const SmallLayout = ({ username }) => {
  const { formatMessage } = useIntl();

  return (
@@ -14,11 +16,11 @@ const SmallLayout = ({ fullName }) => {
      <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="d-flex align-items-center mb-3 mt-3 mr-3">
        <div className="small-yellow-line mt-4.5" />
        <div>
          <h1 className="h5 data-hj-suppress">
-            {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, fullName })}
+            {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username })}
          </h1>
          <h2 className="h1">
            {formatMessage(messages['complete.your.profile.1'])}
@@ -33,7 +35,7 @@ const SmallLayout = ({ fullName }) => {
 };

 SmallLayout.propTypes = {
-  fullName: PropTypes.string.isRequired,
+  username: PropTypes.string.isRequired,
 };

 export default SmallLayout;
--- a/src/base-container/components/welcome-page-layout/messages.js
+++ b/src/base-container/components/welcome-page-layout/messages.js
@@ -3,7 +3,7 @@ import { defineMessages } from '@edx/frontend-platform/i18n';
 const messages = defineMessages({
  'welcome.to.platform': {
    id: 'welcome.to.platform',
-    defaultMessage: 'Welcome to {siteName}, {fullName}!',
+    defaultMessage: 'Welcome to {siteName}, {username}!',
    description: 'Welcome message that appears on progressive profile page',
  },
  'complete.your.profile.1': {
--- a/src/base-container/data/constants.js
+++ b/src/base-container/data/constants.js
@@ -0,0 +1,4 @@
+const IMAGE_LAYOUT = 'image-layout';
+const DEFAULT_LAYOUT = 'default-layout';
+
+export { DEFAULT_LAYOUT, IMAGE_LAYOUT };
--- a/src/base-container/index.jsx
+++ b/src/base-container/index.jsx
@@ -1,5 +1,6 @@
-import { getConfig } from '@edx/frontend-platform';
-import { breakpoints } from '@openedx/paragon';
+import React, { useEffect, useState } from 'react';
+
+import { breakpoints } from '@edx/paragon';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import MediaQuery from 'react-responsive';
@@ -9,24 +10,40 @@ import {
  ImageExtraSmallLayout, ImageLargeLayout, ImageMediumLayout, ImageSmallLayout,
 } from './components/image-layout';
 import { AuthLargeLayout, AuthMediumLayout, AuthSmallLayout } from './components/welcome-page-layout';
+import { DEFAULT_LAYOUT, IMAGE_LAYOUT } from './data/constants';

-const BaseContainer = ({ children, showWelcomeBanner, fullName }) => {
-  const enableImageLayout = getConfig().ENABLE_IMAGE_LAYOUT;
+const BaseContainer = ({ children, showWelcomeBanner, username }) => {
+  const [baseContainerVersion, setBaseContainerVersion] = useState(DEFAULT_LAYOUT);

-  if (enableImageLayout) {
+  useEffect(() => {
+    const initRebrandExperiment = () => {
+      if (window.experiments?.rebrandExperiment) {
+        setBaseContainerVersion(window.experiments?.rebrandExperiment?.variation);
+      } else {
+        window.experiments = window.experiments || {};
+        window.experiments.rebrandExperiment = {};
+        window.experiments.rebrandExperiment.handleLoaded = () => {
+          setBaseContainerVersion(window.experiments?.rebrandExperiment?.variation);
+        };
+      }
+    };
+    initRebrandExperiment();
+  }, []);
+
+  if (baseContainerVersion === IMAGE_LAYOUT) {
    return (
      <div className="layout">
        <MediaQuery maxWidth={breakpoints.extraSmall.maxWidth - 1}>
-          {showWelcomeBanner ? <AuthSmallLayout fullName={fullName} /> : <ImageExtraSmallLayout />}
+          {showWelcomeBanner ? <AuthSmallLayout username={username} /> : <ImageExtraSmallLayout />}
        </MediaQuery>
        <MediaQuery minWidth={breakpoints.small.minWidth} maxWidth={breakpoints.small.maxWidth - 1}>
-          {showWelcomeBanner ? <AuthSmallLayout fullName={fullName} /> : <ImageSmallLayout />}
+          {showWelcomeBanner ? <AuthSmallLayout username={username} /> : <ImageSmallLayout />}
        </MediaQuery>
        <MediaQuery minWidth={breakpoints.medium.minWidth} maxWidth={breakpoints.large.maxWidth - 1}>
-          {showWelcomeBanner ? <AuthMediumLayout fullName={fullName} /> : <ImageMediumLayout />}
+          {showWelcomeBanner ? <AuthMediumLayout username={username} /> : <ImageMediumLayout />}
        </MediaQuery>
        <MediaQuery minWidth={breakpoints.extraLarge.minWidth}>
-          {showWelcomeBanner ? <AuthLargeLayout fullName={fullName} /> : <ImageLargeLayout />}
+          {showWelcomeBanner ? <AuthLargeLayout username={username} /> : <ImageLargeLayout />}
        </MediaQuery>
        <div className={classNames('content', { 'align-items-center mt-0': showWelcomeBanner })}>
          {children}
@@ -40,13 +57,13 @@ const BaseContainer = ({ children, showWelcomeBanner, fullName }) => {
      <div className="col-md-12 extra-large-screen-top-stripe" />
      <div className="layout">
        <MediaQuery maxWidth={breakpoints.small.maxWidth - 1}>
-          {showWelcomeBanner ? <AuthSmallLayout fullName={fullName} /> : <DefaultSmallLayout />}
+          {showWelcomeBanner ? <AuthSmallLayout username={username} /> : <DefaultSmallLayout />}
        </MediaQuery>
        <MediaQuery minWidth={breakpoints.medium.minWidth} maxWidth={breakpoints.large.maxWidth - 1}>
-          {showWelcomeBanner ? <AuthMediumLayout fullName={fullName} /> : <DefaultMediumLayout />}
+          {showWelcomeBanner ? <AuthMediumLayout username={username} /> : <DefaultMediumLayout />}
        </MediaQuery>
        <MediaQuery minWidth={breakpoints.extraLarge.minWidth}>
-          {showWelcomeBanner ? <AuthLargeLayout fullName={fullName} /> : <DefaultLargeLayout />}
+          {showWelcomeBanner ? <AuthLargeLayout username={username} /> : <DefaultLargeLayout />}
        </MediaQuery>
        <div className={classNames('content', { 'align-items-center mt-0': showWelcomeBanner })}>
          {children}
@@ -58,13 +75,13 @@ const BaseContainer = ({ children, showWelcomeBanner, fullName }) => {

 BaseContainer.defaultProps = {
  showWelcomeBanner: false,
-  fullName: null,
+  username: null,
 };

 BaseContainer.propTypes = {
  children: PropTypes.node.isRequired,
  showWelcomeBanner: PropTypes.bool,
-  fullName: PropTypes.string,
+  username: PropTypes.string,
 };

 export default BaseContainer;
--- a/src/base-container/tests/BaseContainer.test.jsx
+++ b/src/base-container/tests/BaseContainer.test.jsx
@@ -1,6 +1,7 @@
-import { mergeConfig } from '@edx/frontend-platform';
+import React from 'react';
+
 import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { render } from '@testing-library/react';
+import { mount } from 'enzyme';
 import { Context as ResponsiveContext } from 'react-responsive';

 import BaseContainer from '../index';
@@ -11,34 +12,32 @@ const LargeScreen = {
 };

 describe('Base component tests', () => {
-  it('should show default layout', () => {
-    const { container } = render(
+  it('should should default layout', () => {
+    const baseContainer = mount(
      <IntlProvider locale="en">
-        <BaseContainer>
-          <div>Test Content</div>
-        </BaseContainer>
+        <BaseContainer />
      </IntlProvider>,
      LargeScreen,
    );

-    expect(container.querySelector('.banner__image')).toBeNull();
-    expect(container.querySelector('.large-screen-svg-primary')).toBeDefined();
+    expect(baseContainer.find('.banner__image').exists()).toBeFalsy();
+    expect(baseContainer.find('.large-screen-svg-primary').exists()).toBeTruthy();
  });

-  it('renders Image layout when ENABLE_IMAGE_LAYOUT configuration is enabled', () => {
-    mergeConfig({
-      ENABLE_IMAGE_LAYOUT: true,
-    });
+  it('[experiment] should show image layout for treatment group', () => {
+    window.experiments = {
+      rebrandExperiment: {
+        variation: 'image-layout',
+      },
+    };

-    const { container } = render(
+    const baseContainer = mount(
      <IntlProvider locale="en">
-        <BaseContainer showWelcomeBanner={false}>
-          <div>Test Content</div>
-        </BaseContainer>
+        <BaseContainer />
      </IntlProvider>,
      LargeScreen,
    );

-    expect(container.querySelector('.banner__image')).toBeDefined();
+    expect(baseContainer.find('.banner__image').exists()).toBeTruthy();
  });
 });
--- 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,11 +1,13 @@
+import React from 'react';
+
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
  Button, Form,
  Icon,
-} from '@openedx/paragon';
-import { Login } from '@openedx/paragon/icons';
+} from '@edx/paragon';
+import { Login } from '@edx/paragon/icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';

 import messages from './messages';
@@ -17,8 +19,7 @@ import { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';
 const EnterpriseSSO = (props) => {
  const { formatMessage } = useIntl();
  const tpaProvider = props.provider;
-  const hideRegistrationLink = getConfig().ALLOW_PUBLIC_ACCOUNT_CREATION === false
-    || getConfig().SHOW_REGISTRATION_LINKS === false;
+  const disablePublicAccountCreation = getConfig().ALLOW_PUBLIC_ACCOUNT_CREATION === false;

  const handleSubmit = (e, url) => {
    e.preventDefault();
@@ -73,7 +74,7 @@ const EnterpriseSSO = (props) => {
                className="w-100"
                onClick={(e) => handleClick(e)}
              >
-                {hideRegistrationLink
+                {disablePublicAccountCreation
                  ? formatMessage(messages['enterprisetpa.login.button.text.public.account.creation.disabled'])
                  : formatMessage(messages['enterprisetpa.login.button.text'])}
              </Button>
--- a/src/common-components/FormGroup.jsx
+++ b/src/common-components/FormGroup.jsx
@@ -1,8 +1,8 @@
-import { useState } from 'react';
+import React, { useState } from 'react';

 import {
  Form, TransitionReplace,
-} from '@openedx/paragon';
+} from '@edx/paragon';
 import PropTypes from 'prop-types';

 const FormGroup = (props) => {
--- a/src/common-components/InstitutionLogistration.jsx
+++ b/src/common-components/InstitutionLogistration.jsx
@@ -1,7 +1,9 @@
+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 { Button, Hyperlink, Icon } from '@edx/paragon';
+import { Institution } from '@edx/paragon/icons';
 import PropTypes from 'prop-types';

 import messages from './messages';
--- a/src/common-components/NotFoundPage.jsx
+++ b/src/common-components/NotFoundPage.jsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { FormattedMessage } from '@edx/frontend-platform/i18n';

 const NotFoundPage = () => (
--- a/src/common-components/PasswordField.jsx
+++ b/src/common-components/PasswordField.jsx
@@ -1,41 +1,28 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';

 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
  Form, Icon, IconButton, OverlayTrigger, Tooltip, useToggle,
-} from '@openedx/paragon';
+} from '@edx/paragon';
 import {
  Check, Remove, Visibility, VisibilityOff,
-} from '@openedx/paragon/icons';
+} from '@edx/paragon/icons';
 import PropTypes from 'prop-types';

 import messages from './messages';
 import { LETTER_REGEX, NUMBER_REGEX } from '../data/constants';
-import { useRegisterContext } from '../register/components/RegisterContext';
-import { useFieldValidations } from '../register/data/apiHook';
+import { 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 {
-    setValidationsSuccess,
-    setValidationsFailure,
-    validationApiRateLimited,
-    clearRegistrationBackendError,
-  } = useRegisterContext();
-
-  const fieldValidationsMutation = useFieldValidations({
-    onSuccess: (data) => {
-      setValidationsSuccess(data);
-    },
-    onError: () => {
-      setValidationsFailure();
-    },
-  });
-
  const handleBlur = (e) => {
    const { name, value } = e.target;
    if (name === props.name && e.relatedTarget?.name === 'passwordIcon') {
@@ -63,7 +50,7 @@ const PasswordField = (props) => {
      if (fieldError) {
        props.handleErrorChange('password', fieldError);
      } else if (!validationApiRateLimited) {
-        fieldValidationsMutation.mutate({ password: passwordValue });
+        dispatch(fetchRealtimeValidations({ password: passwordValue }));
      }
    }
  };
@@ -78,7 +65,7 @@ const PasswordField = (props) => {
    }
    if (props.handleErrorChange) {
      props.handleErrorChange('password', '');
-      clearRegistrationBackendError('password');
+      dispatch(clearRegistrationBackendError('password'));
    }
    setTimeout(() => setShowTooltip(props.showRequirements && true), 150);
  };
@@ -151,7 +138,7 @@ const PasswordField = (props) => {
      {props.errorMessage !== '' && (
        <Form.Control.Feedback key="error" className="form-text-size" hasIcon={false} feedback-for={props.name} type="invalid">
          {props.errorMessage}
-          {props.showScreenReaderText && <span className="sr-only">{formatMessage(messages['password.sr.only.helping.text'])}</span>}
+          <span className="sr-only">{formatMessage(messages['password.sr.only.helping.text'])}</span>
        </Form.Control.Feedback>
      )}
    </Form.Group>
@@ -166,7 +153,6 @@ PasswordField.defaultProps = {
  handleChange: () => {},
  handleErrorChange: null,
  showRequirements: true,
-  showScreenReaderText: true,
  autoComplete: null,
 };

@@ -182,7 +168,6 @@ PasswordField.propTypes = {
  showRequirements: PropTypes.bool,
  value: PropTypes.string.isRequired,
  autoComplete: PropTypes.string,
-  showScreenReaderText: PropTypes.bool,
 };

 export default PasswordField;
--- a/src/common-components/RedirectLogistration.jsx
+++ b/src/common-components/RedirectLogistration.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Navigate } from 'react-router-dom';

 import {
-  AUTHN_PROGRESSIVE_PROFILING, RECOMMENDATIONS, REDIRECT,
+  AUTHN_PROGRESSIVE_PROFILING, RECOMMENDATIONS,
 } from '../data/constants';
 import { setCookie } from '../data/utils';

@@ -18,10 +18,9 @@ const RedirectLogistration = (props) => {
    redirectToRecommendationsPage,
    educationLevel,
    userId,
-    registrationEmbedded,
-    host,
  } = props;
  let finalRedirectUrl = '';
+
  if (success) {
    // If we're in a third party auth pipeline, we must complete the pipeline
    // once user has successfully logged in. Otherwise, redirect to the specified redirect url.
@@ -38,13 +37,6 @@ const RedirectLogistration = (props) => {
      // TODO: Do we still need this cookie?
      setCookie('van-504-returning-user', true);

-      if (registrationEmbedded) {
-        window.parent.postMessage({
-          action: REDIRECT,
-          redirectUrl: getConfig().POST_REGISTRATION_REDIRECT_URL,
-        }, host);
-        return null;
-      }
      const registrationResult = { redirectUrl: finalRedirectUrl, success };
      return (
        <Navigate
@@ -91,8 +83,6 @@ RedirectLogistration.defaultProps = {
  optionalFields: {},
  redirectToRecommendationsPage: false,
  userId: null,
-  registrationEmbedded: false,
-  host: '',
 };

 RedirectLogistration.propTypes = {
@@ -105,8 +95,6 @@ RedirectLogistration.propTypes = {
  optionalFields: PropTypes.shape({}),
  redirectToRecommendationsPage: PropTypes.bool,
  userId: PropTypes.number,
-  registrationEmbedded: PropTypes.bool,
-  host: PropTypes.string,
 };

 export default RedirectLogistration;
--- a/src/common-components/SocialAuthProviders.jsx
+++ b/src/common-components/SocialAuthProviders.jsx
@@ -1,8 +1,10 @@
+import React from 'react';
+
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { Icon } from '@edx/paragon';
+import { Login } from '@edx/paragon/icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Icon } from '@openedx/paragon';
-import { Login } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';

 import messages from './messages';
--- a/src/common-components/ThirdPartyAuthAlert.jsx
+++ b/src/common-components/ThirdPartyAuthAlert.jsx
@@ -1,6 +1,8 @@
+import React from 'react';
+
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Alert } from '@openedx/paragon';
+import { Alert } from '@edx/paragon';
 import PropTypes from 'prop-types';

 import messages from './messages';
--- a/src/common-components/Zendesk.jsx
+++ b/src/common-components/Zendesk.jsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import Zendesk from 'react-zendesk';
--- a/src/common-components/components/ThirdPartyAuthContext.test.tsx
+++ b/src/common-components/components/ThirdPartyAuthContext.test.tsx
@@ -1,61 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import '@testing-library/jest-dom';
-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')).toBeInTheDocument();
-  });
-
-  it('should provide all context values to children', () => {
-    render(
-      <ThirdPartyAuthProvider>
-        <TestComponent />
-      </ThirdPartyAuthProvider>,
-    );
-
-    expect(screen.getByText('FieldDescriptions Available')).toBeInTheDocument();
-    expect(screen.getByText('OptionalFields Available')).toBeInTheDocument();
-    expect(screen.getByText('AuthApiStatus Not Available')).toBeInTheDocument(); // Initially null
-    expect(screen.getByText('AuthContext Available')).toBeInTheDocument();
-  });
-
-  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')).toBeInTheDocument();
-    expect(screen.getByText('Second Child')).toBeInTheDocument();
-    expect(screen.getByText('Third Child')).toBeInTheDocument();
-  });
-});
--- 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,17 +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) => useQuery({
-  queryKey: ThirdPartyAuthQueryKeys.byPage(pageId),
-  queryFn: () => getThirdPartyAuthContext(payload),
-  retry: false,
-});
-
-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) => [appId, 'ThirdPartyAuth', pageId] as const,
-};
--- a/src/common-components/data/reducers.js
+++ b/src/common-components/data/reducers.js
@@ -0,0 +1,65 @@
+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: {
+    fields: {},
+  },
+  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,7 +1,8 @@
 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,
@@ -12,14 +13,13 @@ const getThirdPartyAuthContext = async (urlParams : string) => {
    .get(
      `${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,6 +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
@@ -112,26 +112,6 @@ const messages = defineMessages({
    description: 'Select ticket form',
    defaultMessage: 'Please choose your request type:',
  },
-  'registration.other.options.heading': {
-    id: 'registration.other.options.heading',
-    defaultMessage: 'Or register with:',
-    description: 'A message that appears above third party auth providers i.e saml, google, facebook etc',
-  },
-  'institution.login.button': {
-    id: 'institution.login.button',
-    defaultMessage: 'Institution/campus credentials',
-    description: 'shows institutions list',
-  },
-  'login.other.options.heading': {
-    id: 'login.other.options.heading',
-    defaultMessage: 'Or sign in with:',
-    description: 'Text that appears above other sign in options like social auth buttons',
-  },
-  'enterprise.login.btn.text': {
-    id: 'enterprise.login.btn.text',
-    defaultMessage: 'Company or school credentials',
-    description: 'Company or school login link text.',
-  },
 });

 export default messages;
--- a/src/common-components/tests/EmbeddedRegistrationRoute.test.jsx
+++ b/src/common-components/tests/EmbeddedRegistrationRoute.test.jsx
@@ -3,15 +3,16 @@
 import React from 'react';

 import { getConfig } from '@edx/frontend-platform';
-import { render } from '@testing-library/react';
+import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
+
+import { REGISTER_EMBEDDED_PAGE } from '../../data/constants';
+import EmbeddedRegistrationRoute from '../EmbeddedRegistrationRoute';
+
 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';
-
 const RRD = require('react-router-dom');
 // Just render plain div with its children
 // eslint-disable-next-line react/prop-types
@@ -26,10 +27,6 @@ const TestApp = () => (
          path={REGISTER_EMBEDDED_PAGE}
          element={<EmbeddedRegistrationRoute><span>Embedded Register Page</span></EmbeddedRegistrationRoute>}
        />
-        <Route
-          path={PAGE_NOT_FOUND}
-          element={<span>Page not found</span>}
-        />
      </Routes>
    </div>
  </Router>
@@ -48,13 +45,12 @@ describe('EmbeddedRegistrationRoute', () => {

  it('should not render embedded register page if host query param is not available in the url', async () => {
    let embeddedRegistrationPage = null;
+
    await act(async () => {
-      const { container } = await render(routerWrapper());
-      embeddedRegistrationPage = container;
+      embeddedRegistrationPage = await mount(routerWrapper());
    });

-    const renderedPage = embeddedRegistrationPage.querySelector('span');
-    expect(renderedPage.textContent).toBe('Page not found');
+    expect(embeddedRegistrationPage.find('span').exists()).toBeFalsy();
  });

  it('should render embedded register page if host query param is available in the url (embedded)', async () => {
@@ -65,13 +61,12 @@ describe('EmbeddedRegistrationRoute', () => {
    };

    let embeddedRegistrationPage = null;
+
    await act(async () => {
-      const { container } = await render(routerWrapper());
-      embeddedRegistrationPage = container;
+      embeddedRegistrationPage = await mount(routerWrapper());
    });

-    const renderedPage = embeddedRegistrationPage.querySelector('span');
-    expect(renderedPage).toBeTruthy();
-    expect(renderedPage.textContent).toBe('Embedded Register Page');
+    expect(embeddedRegistrationPage.find('span').exists()).toBeTruthy();
+    expect(embeddedRegistrationPage.find('span').text()).toBe('Embedded Register Page');
  });
 });
--- a/src/common-components/tests/FormField.test.jsx
+++ b/src/common-components/tests/FormField.test.jsx
@@ -1,21 +1,16 @@
 import React from 'react';
+import { Provider } from 'react-redux';

-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { fireEvent, render } from '@testing-library/react';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';

-import { RegisterProvider } from '../../register/components/RegisterContext';
-import { useFieldValidations } from '../../register/data/apiHook';
+import { fetchRealtimeValidations } from '../../register/data/actions';
 import FormGroup from '../FormGroup';
 import PasswordField from '../PasswordField';

-// Mock the useFieldValidations hook
-jest.mock('../../register/data/apiHook', () => ({
-  useFieldValidations: jest.fn(),
-}));
-
 describe('FormGroup', () => {
  const props = {
    floatingLabel: 'Email',
@@ -26,89 +21,64 @@ describe('FormGroup', () => {
  };

  it('should show help text on field focus', () => {
-    const { queryByText, getByLabelText } = render(<FormGroup {...props} />);
-    const emailInput = getByLabelText('Email');
+    const formGroup = mount(<FormGroup {...props} />);
+    expect(formGroup.find('.pgn-transition-replace-group').find('div#email-1').exists()).toBeFalsy();

-    expect(queryByText('Email field help text')).toBeNull();
-
-    fireEvent.focus(emailInput);
-
-    const helpText = queryByText('Email field help text');
-
-    expect(helpText).toBeTruthy();
-    expect(helpText.textContent).toEqual('Email field help text');
+    formGroup.find('input#email').simulate('focus');
+    expect(formGroup.find('.pgn-transition-replace-group').find('div#email-1').text()).toEqual('Email field help text');
  });
 });

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

-  const renderWrapper = (children) => (
-    <QueryClientProvider client={queryClient}>
-      <IntlProvider locale="en">
-        <MemoryRouter>
-          <RegisterProvider>
-            {children}
-          </RegisterProvider>
-        </MemoryRouter>
-      </IntlProvider>
-    </QueryClientProvider>
+  const reduxWrapper = children => (
+    <IntlProvider locale="en">
+      <MemoryRouter>
+        <Provider store={store}>{children}</Provider>
+      </MemoryRouter>
+    </IntlProvider>
  );

+  const initialState = {
+    register: {
+      validationApiRateLimited: false,
+    },
+  };
+
  beforeEach(() => {
-    queryClient = new QueryClient({
-      defaultOptions: {
-        queries: {
-          retry: false,
-        },
-        mutations: {
-          retry: false,
-        },
-      },
-    });
-
-    mockMutate = jest.fn();
-    useFieldValidations.mockReturnValue({
-      mutate: mockMutate,
-      isPending: false,
-    });
-
+    store = mockStore(initialState);
    props = {
      floatingLabel: 'Password',
      name: 'password',
      value: 'password123',
      handleFocus: jest.fn(),
    };
-
-    jest.clearAllMocks();
  });

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

-    const showPasswordButton = getByLabelText('Show password');
-    fireEvent.click(showPasswordButton);
-    expect(passwordInput.type).toBe('text');
+    passwordField.find('button[aria-label="Show password"]').simulate('click');
+    expect(passwordField.find('input').prop('type')).toEqual('text');

-    const hidePasswordButton = getByLabelText('Hide password');
-    fireEvent.click(hidePasswordButton);
-    expect(passwordInput.type).toBe('password');
+    passwordField.find('button[aria-label="Hide password"]').simulate('click');
+    expect(passwordField.find('input').prop('type')).toEqual('password');
  });

  it('should show password requirement tooltip on focus', async () => {
-    const { getByLabelText } = render(renderWrapper(<PasswordField {...props} />));
-    const passwordInput = getByLabelText('Password');
+    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
    jest.useFakeTimers();
    await act(async () => {
-      fireEvent.focus(passwordInput);
+      passwordField.find('input').simulate('focus');
      jest.runAllTimers();
    });
-    const passwordRequirementTooltip = document.querySelector('#password-requirement-left');
+    passwordField.update();

-    expect(passwordRequirementTooltip).toBeTruthy();
+    expect(passwordField.find('#password-requirement-left').exists()).toBeTruthy();
  });

  it('should show all password requirement checks as failed', async () => {
@@ -116,66 +86,48 @@ describe('PasswordField', () => {
      ...props,
      value: '',
    };
-    const { getByLabelText } = render(renderWrapper(<PasswordField {...props} />));
-    const passwordInput = getByLabelText('Password');
+
    jest.useFakeTimers();
+    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
    await act(async () => {
-      fireEvent.focus(passwordInput);
+      passwordField.find('input').simulate('focus');
      jest.runAllTimers();
    });
+    passwordField.update();

-    const letterCheckIcon = document.querySelector('#letter-check span');
-    const numberCheckIcon = document.querySelector('#number-check span');
-    const charactersCheckIcon = document.querySelector('#characters-check span');
-
-    expect(letterCheckIcon).toBeTruthy();
-    expect(letterCheckIcon.className).toContain('pgn__icon mr-1 text-light-700');
-
-    expect(numberCheckIcon).toBeTruthy();
-    expect(numberCheckIcon.className).toContain('pgn__icon mr-1 text-light-700');
-
-    expect(charactersCheckIcon).toBeTruthy();
-    expect(charactersCheckIcon.className).toContain('pgn__icon mr-1 text-light-700');
+    expect(passwordField.find('#letter-check span').prop('className')).toEqual('pgn__icon mr-1 text-light-700');
+    expect(passwordField.find('#number-check span').prop('className')).toEqual('pgn__icon mr-1 text-light-700');
+    expect(passwordField.find('#characters-check span').prop('className')).toEqual('pgn__icon mr-1 text-light-700');
  });

  it('should update password requirement checks', async () => {
-    const { getByLabelText } = render(renderWrapper(<PasswordField {...props} />));
-    const passwordInput = getByLabelText('Password');
+    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
    jest.useFakeTimers();
    await act(async () => {
-      fireEvent.focus(passwordInput);
+      passwordField.find('input').simulate('focus');
      jest.runAllTimers();
    });
+    passwordField.update();

-    const letterCheckIcon = document.querySelector('#letter-check span');
-    const numberCheckIcon = document.querySelector('#number-check span');
-    const charactersCheckIcon = document.querySelector('#characters-check span');
-
-    expect(letterCheckIcon).toBeTruthy();
-    expect(letterCheckIcon.className).toContain('pgn__icon text-success mr-1');
-
-    expect(numberCheckIcon).toBeTruthy();
-    expect(numberCheckIcon.className).toContain('pgn__icon text-success mr-1');
-
-    expect(charactersCheckIcon).toBeTruthy();
-    expect(charactersCheckIcon.className).toContain('pgn__icon text-success mr-1');
+    expect(passwordField.find('#letter-check span').prop('className')).toEqual('pgn__icon text-success mr-1');
+    expect(passwordField.find('#number-check span').prop('className')).toEqual('pgn__icon text-success mr-1');
+    expect(passwordField.find('#characters-check span').prop('className')).toEqual('pgn__icon text-success mr-1');
  });

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

-    const passwordIcon = getByLabelText('Show password');
-
-    fireEvent.blur(passwordInput, {
+    passwordField.find('button[aria-label="Show password"]').simulate('blur', {
      target: {
        name: 'password',
        value: 'invalid',
      },
-      relatedTarget: passwordIcon,
+      relatedTarget: {
+        name: 'passwordIcon',
+      },
    });

-    expect(container.querySelector('div[feedback-for="password"]')).toBeNull();
+    expect(passwordField.find('div[feedback-for="password"]').exists()).toBeFalsy();
  });

  it('should call props handle blur if available', () => {
@@ -183,10 +135,9 @@ describe('PasswordField', () => {
      ...props,
      handleBlur: jest.fn(),
    };
-    const { container } = render(renderWrapper(<PasswordField {...props} />));
-    const passwordInput = container.querySelector('input[name="password"]');
+    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));

-    fireEvent.blur(passwordInput, {
+    passwordField.find('input#password').simulate('blur', {
      target: {
        name: 'password',
        value: '',
@@ -201,10 +152,9 @@ describe('PasswordField', () => {
      ...props,
      handleErrorChange: jest.fn(),
    };
-    const { container } = render(renderWrapper(<PasswordField {...props} />));
-    const passwordInput = container.querySelector('input[name="password"]');
+    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));

-    fireEvent.blur(passwordInput, {
+    passwordField.find('input#password').simulate('blur', {
      target: {
        name: 'password',
        value: '',
@@ -224,11 +174,9 @@ describe('PasswordField', () => {
      handleErrorChange: jest.fn(),
    };

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

-    const passwordIcon = getByLabelText('Show password');
-
-    fireEvent.focus(passwordIcon, {
+    passwordField.find('button[aria-label="Show password"]').simulate('focus', {
      target: {
        name: 'passwordIcon',
        value: '',
@@ -244,11 +192,9 @@ describe('PasswordField', () => {
      handleErrorChange: jest.fn(),
    };

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

-    const passwordIcon = getByLabelText('Show password');
-
-    fireEvent.focus(passwordIcon, {
+    passwordField.find('button[aria-label="Show password"]').simulate('focus', {
      target: {
        name: 'password',
        value: 'invalid',
@@ -263,34 +209,34 @@ describe('PasswordField', () => {
  });

  it('should run backend validations when frontend validations pass on blur when rendered from register page', () => {
+    store.dispatch = jest.fn(store.dispatch);
    props = {
      ...props,
      handleErrorChange: jest.fn(),
    };
-    const { getByLabelText } = render(renderWrapper(<PasswordField {...props} />));
-    const passwordField = getByLabelText('Password');
-    fireEvent.blur(passwordField, {
+    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
+
+    passwordField.find('button[aria-label="Show password"]').simulate('blur', {
      target: {
        name: 'password',
        value: 'password123',
      },
    });

-    expect(mockMutate).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(renderWrapper(<PasswordField {...props} />));
+    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));

-    const passwordIcon = getByLabelText('Show password');
-
-    fireEvent.blur(passwordIcon, {
+    passwordField.find('button[aria-label="Show password"]').simulate('blur', {
      target: {
        name: 'passwordIcon',
        value: undefined,
--- a/src/common-components/tests/SocialAuthProviders.test.jsx
+++ b/src/common-components/tests/SocialAuthProviders.test.jsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import renderer from 'react-test-renderer';

--- a/src/common-components/tests/ThirdPartyAuthAlert.test.jsx
+++ b/src/common-components/tests/ThirdPartyAuthAlert.test.jsx
@@ -1,7 +1,9 @@
+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,15 +1,18 @@
 /* eslint-disable import/no-import-module-exports */
 /* eslint-disable react/function-component-definition */
+import React from 'react';
+
 import { fetchAuthenticatedUser, getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { render } from '@testing-library/react';
+import { mount } from 'enzyme';
 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';

+import {
+  MemoryRouter, Route, BrowserRouter as Router, Routes,
+} from 'react-router-dom';
+
 jest.mock('@edx/frontend-platform/auth', () => ({
  getAuthenticatedUser: jest.fn(),
  fetchAuthenticatedUser: jest.fn(),
@@ -52,7 +55,7 @@ describe('UnAuthOnlyRoute', () => {
    fetchAuthenticatedUser.mockReturnValueOnce(Promise.resolve(user));

    await act(async () => {
-      await render(routerWrapper());
+      await mount(routerWrapper());
    });

    expect(fetchAuthenticatedUser).toBeCalledWith({ forceRefresh: true });
@@ -63,7 +66,7 @@ describe('UnAuthOnlyRoute', () => {
    fetchAuthenticatedUser.mockReturnValueOnce(Promise.resolve(null));

    await act(async () => {
-      await render(routerWrapper());
+      await mount(routerWrapper());
    });

    expect(fetchAuthenticatedUser).toBeCalledWith({ forceRefresh: false });
--- 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 Your Platform Name Here account. To link your accounts, sign in now using your Your Platform Name Here 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"
@@ -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"
--- a/src/common-components/tests/snapshots/Zendesk.test.jsx.snap
+++ b/src/common-components/tests/snapshots/Zendesk.test.jsx.snap
@@ -5,23 +5,23 @@ exports[`Zendesk Help should match login page third party auth alert message sna
  cookies={true}
  defer={true}
  webWidget={
-    {
-      "answerBot": {
-        "avatar": {
-          "name": {
+    Object {
+      "answerBot": Object {
+        "avatar": Object {
+          "name": Object {
            "*": "edX Support",
          },
          "url": undefined,
        },
        "contactOnlyAfterQuery": true,
        "suppress": false,
-        "title": {
+        "title": Object {
          "*": "edX Support",
        },
      },
-      "chat": {
-        "departments": {
-          "enabled": [
+      "chat": Object {
+        "departments": Object {
+          "enabled": Array [
            "account settings",
            "billing and payments",
            "certificates",
@@ -33,17 +33,17 @@ exports[`Zendesk Help should match login page third party auth alert message sna
        },
        "suppress": false,
      },
-      "contactForm": {
+      "contactForm": Object {
        "attachments": true,
-        "selectTicketForm": {
+        "selectTicketForm": Object {
          "*": "Please choose your request type:",
        },
-        "ticketForms": [
-          {
-            "fields": [
-              {
+        "ticketForms": Array [
+          Object {
+            "fields": Array [
+              Object {
                "id": "description",
-                "prefill": {
+                "prefill": Object {
                  "*": "",
                },
              },
@@ -53,10 +53,10 @@ exports[`Zendesk Help should match login page third party auth alert message sna
          },
        ],
      },
-      "contactOptions": {
+      "contactOptions": Object {
        "enabled": false,
      },
-      "helpCenter": {
+      "helpCenter": Object {
        "originalArticleButton": true,
      },
    }
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -1,17 +1,14 @@
 const configuration = {
  // Cookies related configs
  SESSION_COOKIE_DOMAIN: process.env.SESSION_COOKIE_DOMAIN,
-  USER_RETENTION_COOKIE_NAME: process.env.USER_RETENTION_COOKIE_NAME || '',
+  REGISTER_CONVERSION_COOKIE_NAME: process.env.REGISTER_CONVERSION_COOKIE_NAME || null,
  // 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,
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1 +0,0 @@
-export const appId = 'org.openedx.frontend.app.authn';
--- 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/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/cookies.test.js
+++ b/src/data/tests/cookies.test.js
@@ -1,52 +0,0 @@
-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');
-
-describe('setCookie function', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('should set a cookie with default options', () => {
-    getConfig.mockReturnValue({ SESSION_COOKIE_DOMAIN: 'example.com' });
-
-    setCookie('testCookie', 'testValue');
-
-    expect(Cookies).toHaveBeenCalled();
-    expect(Cookies).toHaveBeenCalledWith();
-    expect(Cookies.prototype.set).toHaveBeenCalledWith('testCookie', 'testValue', {
-      domain: 'example.com',
-      path: '/',
-    });
-  });
-
-  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', expiry);
-
-    expect(Cookies).toHaveBeenCalled();
-    expect(Cookies).toHaveBeenCalledWith();
-    expect(Cookies.prototype.set).toHaveBeenCalledWith('testCookie', 'testValue', {
-      domain: 'example.com',
-      path: '/',
-      expires: expiry,
-    });
-  });
-
-  it('should not set a cookie if cookieName is undefined', () => {
-    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
@@ -2,12 +2,10 @@ import { getConfig } from '@edx/frontend-platform';
 import Cookies from 'universal-cookie';

 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: getConfig().SESSION_COOKIE_DOMAIN, path: '/' };
-    if (cookieExpiry) {
-      options.expires = cookieExpiry;
-    }
-    cookies.set(cookieName, cookieValue, options);
+  const cookies = new Cookies();
+  const options = { domain: getConfig().SESSION_COOKIE_DOMAIN, path: '/' };
+  if (cookieExpiry) {
+    options.expires = cookieExpiry;
  }
+  cookies.set(cookieName, cookieValue, options);
 }
--- 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/src/data/utils/reduxUtils.js
+++ b/src/data/utils/reduxUtils.js
@@ -0,0 +1,34 @@
+/**
+ * Helper class to save time when writing out action types for asynchronous methods.  Also helps
+ * ensure that actions are namespaced.
+ */
+export default class AsyncActionType {
+  constructor(topic, name) {
+    this.topic = topic;
+    this.name = name;
+  }
+
+  get BASE() {
+    return `${this.topic}__${this.name}`;
+  }
+
+  get BEGIN() {
+    return `${this.topic}__${this.name}__BEGIN`;
+  }
+
+  get SUCCESS() {
+    return `${this.topic}__${this.name}__SUCCESS`;
+  }
+
+  get FAILURE() {
+    return `${this.topic}__${this.name}__FAILURE`;
+  }
+
+  get RESET() {
+    return `${this.topic}__${this.name}__RESET`;
+  }
+
+  get FORBIDDEN() {
+    return `${this.topic}__${this.name}__FORBIDDEN`;
+  }
+}
--- a/src/data/utils/useMobileResponsive.js
+++ b/src/data/utils/useMobileResponsive.js
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';

-import { breakpoints } from '@openedx/paragon';
+import { breakpoints } from '@edx/paragon';

 /**
 * A react hook used to determine if the current window is mobile or not.
--- a/src/field-renderer/FieldRenderer.jsx
+++ b/src/field-renderer/FieldRenderer.jsx
@@ -1,5 +1,7 @@
-import { Form, Icon } from '@openedx/paragon';
-import { ExpandMore } from '@openedx/paragon/icons';
+import React from 'react';
+
+import { Form, Icon } from '@edx/paragon';
+import { ExpandMore } from '@edx/paragon/icons';
 import PropTypes from 'prop-types';

 const FormFieldRenderer = (props) => {
--- a/src/field-renderer/tests/FieldRenderer.test.jsx
+++ b/src/field-renderer/tests/FieldRenderer.test.jsx
@@ -1,5 +1,7 @@
+import React from 'react';
+
 import { getConfig } from '@edx/frontend-platform';
-import { fireEvent, render } from '@testing-library/react';
+import { mount } from 'enzyme';

 import FieldRenderer from '../FieldRenderer';

@@ -26,14 +28,13 @@ describe('FieldRendererTests', () => {
      options: [['1997', '1997'], ['1998', '1998']],
    };

-    const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
-    const input = container.querySelector('select#yob-field');
-    const label = container.querySelector('label');
-    fireEvent.change(input, { target: { value: 1997 } });
+    const fieldRenderer = mount(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
+    const field = fieldRenderer.find('select#yob-field');
+    field.simulate('change', { target: { value: 1997 } });

-    expect(input.type).toEqual('select-one');
-    expect(label.textContent).toContain(fieldData.label);
-    expect(value).toEqual('1997');
+    expect(field.type()).toEqual('select');
+    expect(fieldRenderer.find('label').text()).toEqual('Year of Birth');
+    expect(value).toEqual(1997);
  });

  it('should return null if no options are provided for select field', () => {
@@ -43,8 +44,8 @@ describe('FieldRendererTests', () => {
      name: 'yob-field',
    };

-    const { container } = render(<FieldRenderer fieldData={fieldData} onChangeHandler={() => {}} />);
-    expect(container.innerHTML).toEqual('');
+    const fieldRenderer = mount(<FieldRenderer fieldData={fieldData} onChangeHandler={() => {}} />);
+    expect(fieldRenderer.html()).toBeNull();
  });

  it('should render textarea field', () => {
@@ -54,13 +55,12 @@ describe('FieldRendererTests', () => {
      name: 'goals-field',
    };

-    const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
-    const input = container.querySelector('#goals-field');
-    const label = container.querySelector('label');
-    fireEvent.change(input, { target: { value: 'These are my goals.' } });
+    const fieldRenderer = mount(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
+    const field = fieldRenderer.find('#goals-field').last();
+    field.simulate('change', { target: { value: 'These are my goals.' } });

-    expect(input.type).toEqual(fieldData.type);
-    expect(label.textContent).toContain('Why do you want to join this platform?');
+    expect(field.type()).toEqual('textarea');
+    expect(fieldRenderer.find('label').text()).toEqual('Why do you want to join this platform?');
    expect(value).toEqual('These are my goals.');
  });

@@ -71,13 +71,12 @@ describe('FieldRendererTests', () => {
      name: 'company-field',
    };

-    const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
-    const input = container.querySelector('input#company-field');
-    const label = container.querySelector('label');
-    fireEvent.change(input, { target: { value: 'ABC' } });
+    const fieldRenderer = mount(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
+    const field = fieldRenderer.find('#company-field').last();
+    field.simulate('change', { target: { value: 'ABC' } });

-    expect(input.type).toEqual(fieldData.type);
-    expect(label.textContent).toContain(fieldData.label);
+    expect(field.type()).toEqual('input');
+    expect(fieldRenderer.find('label').text()).toEqual('Company');
    expect(value).toEqual('ABC');
  });

@@ -88,13 +87,12 @@ describe('FieldRendererTests', () => {
      name: 'marketing-emails-opt-in-field',
    };

-    const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
-    const input = container.querySelector('input#marketing-emails-opt-in-field');
-    const label = container.querySelector('label');
-    fireEvent.click(input);
+    const fieldRenderer = mount(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
+    const field = fieldRenderer.find('input#marketing-emails-opt-in-field');
+    field.simulate('change', { target: { checked: true, type: 'checkbox' } });

-    expect(input.type).toEqual(fieldData.type);
-    expect(label.textContent).toContain(fieldData.label);
+    expect(field.prop('type')).toEqual('checkbox');
+    expect(fieldRenderer.find('label').text()).toEqual(fieldData.label);
    expect(value).toEqual(true);
  });

@@ -103,8 +101,8 @@ describe('FieldRendererTests', () => {
      type: 'unknown',
    };

-    const { container } = render(<FieldRenderer fieldData={fieldData} onChangeHandler={() => {}} />);
-    expect(container.innerHTML).toContain('');
+    const fieldRenderer = mount(<FieldRenderer fieldData={fieldData} onChangeHandler={() => {}} />);
+    expect(fieldRenderer.html()).toBeNull();
  });

  it('should run onBlur and onFocus functions for a field if given', () => {
@@ -119,7 +117,7 @@ describe('FieldRendererTests', () => {
      functionValue = `${e.target.name} focussed`;
    };

-    const { container } = render(
+    const fieldRenderer = mount(
      <FieldRenderer
        handleFocus={onFocus}
        handleBlur={onBlur}
@@ -128,19 +126,19 @@ describe('FieldRendererTests', () => {
        onChangeHandler={changeHandler}
      />,
    );
-    const input = container.querySelector('#test-field');
+    const field = fieldRenderer.find('#test-field').last();

-    fireEvent.focus(input);
+    field.simulate('focus');
    expect(functionValue).toEqual('test-field focussed');

-    fireEvent.blur(input);
+    field.simulate('blur');
    expect(functionValue).toEqual('test-field blurred');
  });

  it('should render error message for required text fields', () => {
    const fieldData = { type: 'text', label: 'First Name', name: 'first-name-field' };

-    const { container } = render(
+    const fieldRenderer = mount(
      <FieldRenderer
        isRequired
        fieldData={fieldData}
@@ -149,7 +147,7 @@ describe('FieldRendererTests', () => {
      />,
    );

-    expect(container.querySelector(`#${fieldData.name}-error`).textContent).toEqual('Enter your first name');
+    expect(fieldRenderer.find('.form-text-size').last().text()).toEqual('Enter your first name');
  });

  it('should render error message for required select fields', () => {
@@ -157,7 +155,7 @@ describe('FieldRendererTests', () => {
      type: 'select', label: 'Preference', name: 'preference-field', options: [['a', 'Opt 1'], ['b', 'Opt 2']],
    };

-    const { container } = render(
+    const fieldRenderer = mount(
      <FieldRenderer
        isRequired
        fieldData={fieldData}
@@ -166,13 +164,13 @@ describe('FieldRendererTests', () => {
      />,
    );

-    expect(container.querySelector(`#${fieldData.name}-error`).textContent).toEqual('Select your preference');
+    expect(fieldRenderer.find('.form-text-size').last().text()).toEqual('Select your preference');
  });

  it('should render error message for required textarea fields', () => {
    const fieldData = { type: 'textarea', label: 'Goals', name: 'goals-field' };

-    const { container } = render(
+    const fieldRenderer = mount(
      <FieldRenderer
        isRequired
        fieldData={fieldData}
@@ -181,13 +179,13 @@ describe('FieldRendererTests', () => {
      />,
    );

-    expect(container.querySelector(`#${fieldData.name}-error`).textContent).toEqual('Tell us your goals');
+    expect(fieldRenderer.find('.form-text-size').last().text()).toEqual('Tell us your goals');
  });

  it('should render error message for required checkbox fields', () => {
    const fieldData = { type: 'checkbox', label: 'Honor Code', name: 'honor-code-field' };

-    const { container } = render(
+    const fieldRenderer = mount(
      <FieldRenderer
        isRequired
        fieldData={fieldData}
@@ -196,6 +194,6 @@ describe('FieldRendererTests', () => {
      />,
    );

-    expect(container.querySelector(`#${fieldData.name}-error`).textContent).toEqual('You must agree to our Honor Code');
+    expect(fieldRenderer.find('.form-text-size').last().text()).toEqual('You must agree to our Honor Code');
  });
 });
--- a/src/forgot-password/ForgotPasswordAlert.jsx
+++ b/src/forgot-password/ForgotPasswordAlert.jsx
@@ -1,7 +1,9 @@
+import React from 'react';
+
 import { getConfig } from '@edx/frontend-platform';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
-import { Alert } from '@openedx/paragon';
-import { CheckCircle, Error } from '@openedx/paragon/icons';
+import { Alert } from '@edx/paragon';
+import { CheckCircle, Error } from '@edx/paragon/icons';
 import PropTypes from 'prop-types';

 import messages from './messages';
@@ -41,7 +43,7 @@ const ForgotPasswordAlert = (props) => {
          }}
        />
      );
-      break;
+     break;
    case INTERNAL_SERVER_ERROR:
      message = formatMessage(messages['internal.server.error']);
      break;
--- a/src/forgot-password/ForgotPasswordPage.jsx
+++ b/src/forgot-password/ForgotPasswordPage.jsx
@@ -1,4 +1,5 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import { connect } from 'react-redux';

 import { getConfig } from '@edx/frontend-platform';
 import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
@@ -10,41 +11,44 @@ import {
  StatefulButton,
  Tab,
  Tabs,
-} from '@openedx/paragon';
-import { ChevronLeft } from '@openedx/paragon/icons';
+} from '@edx/paragon';
+import { ChevronLeft } from '@edx/paragon/icons';
+import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';

-import { useForgotPassword } from './data/apiHook';
+import { forgotPassword, setForgotPasswordFormData } from './data/actions';
+import { forgotPasswordResultSelector } from './data/selectors';
 import ForgotPasswordAlert from './ForgotPasswordAlert';
 import messages from './messages';
 import BaseContainer from '../base-container';
 import { FormGroup } from '../common-components';
-import { LOGIN_PAGE, VALID_EMAIL_REGEX } from '../data/constants';
+import { DEFAULT_STATE, LOGIN_PAGE, VALID_EMAIL_REGEX } from '../data/constants';
 import { updatePathWithQueryParams, windowScrollTo } from '../data/utils';

-const ForgotPasswordPage = () => {
+const ForgotPasswordPage = (props) => {
  const platformName = getConfig().SITE_NAME;
  const emailRegex = new RegExp(VALID_EMAIL_REGEX, 'i');
+  const {
+    status, submitState, emailValidationError,
+  } = props;
+
  const { formatMessage } = useIntl();
-  const navigate = useNavigate();
-  const location = useLocation();
-  const [email, setEmail] = useState('');
+  const [email, setEmail] = useState(props.email);
  const [bannerEmail, setBannerEmail] = useState('');
  const [formErrors, setFormErrors] = useState('');
-  const [validationError, setValidationError] = useState('');
-  const [status, setStatus] = useState(location.state?.status || null);
-
-  // React Query hook for forgot password
-  const { mutate: sendForgotPassword, isPending: isSending } = useForgotPassword();
-
-  const submitState = isSending ? 'pending' : 'default';
+  const [validationError, setValidationError] = useState(emailValidationError);
+  const navigate = useNavigate();

  useEffect(() => {
    sendPageEvent('login_and_registration', 'reset');
    sendTrackEvent('edx.bi.password_reset_form.viewed', { category: 'user-engagement' });
  }, []);

+  useEffect(() => {
+    setValidationError(emailValidationError);
+  }, [emailValidationError]);
+
  useEffect(() => {
    if (status === 'complete') {
      setEmail('');
@@ -64,38 +68,22 @@ const ForgotPasswordPage = () => {
  };

  const handleBlur = () => {
-    setValidationError(getValidationMessage(email));
+    props.setForgotPasswordFormData({ email, emailValidationError: getValidationMessage(email) });
  };

-  const handleFocus = () => {
-    setValidationError('');
-  };
+  const handleFocus = () => props.setForgotPasswordFormData({ emailValidationError: '' });

  const handleSubmit = (e) => {
    e.preventDefault();
    setBannerEmail(email);

-    const validateError = getValidationMessage(email);
-    if (validateError) {
-      setFormErrors(validateError);
-      setValidationError(validateError);
+    const error = getValidationMessage(email);
+    if (error) {
+      setFormErrors(error);
+      props.setForgotPasswordFormData({ email, emailValidationError: error });
      windowScrollTo({ left: 0, top: 0, behavior: 'smooth' });
    } else {
-      setFormErrors('');
-      sendForgotPassword(email, {
-        onSuccess: (data, emailUsed) => {
-          setStatus('complete');
-          setBannerEmail(emailUsed);
-          setFormErrors('');
-        },
-        onError: (error) => {
-          if (error.response && error.response.status === 403) {
-            setStatus('forbidden');
-          } else {
-            setStatus('server-error');
-          }
-        },
-      });
+      props.forgotPassword(email);
    }
  };

@@ -165,7 +153,7 @@ const ForgotPasswordPage = () => {
            )}
            <p className="mt-5.5 small text-gray-700">
              {formatMessage(messages['additional.help.text'], { platformName })}
-              <span className="mx-1">
+              <span>
                <Hyperlink isInline destination={`mailto:${getConfig().INFO_EMAIL}`}>{getConfig().INFO_EMAIL}</Hyperlink>
              </span>
            </p>
@@ -176,4 +164,26 @@ const ForgotPasswordPage = () => {
  );
 };

-export default ForgotPasswordPage;
+ForgotPasswordPage.propTypes = {
+  email: PropTypes.string,
+  emailValidationError: PropTypes.string,
+  forgotPassword: PropTypes.func.isRequired,
+  setForgotPasswordFormData: PropTypes.func.isRequired,
+  status: PropTypes.string,
+  submitState: PropTypes.string,
+};
+
+ForgotPasswordPage.defaultProps = {
+  email: '',
+  emailValidationError: '',
+  status: null,
+  submitState: DEFAULT_STATE,
+};
+
+export default connect(
+  forgotPasswordResultSelector,
+  {
+    forgotPassword,
+    setForgotPasswordFormData,
+  },
+)(ForgotPasswordPage);
--- a/src/forgot-password/data/actions.js
+++ b/src/forgot-password/data/actions.js
@@ -0,0 +1,32 @@
+import { AsyncActionType } from '../../data/utils';
+
+export const FORGOT_PASSWORD = new AsyncActionType('FORGOT', 'PASSWORD');
+export const FORGOT_PASSWORD_PERSIST_FORM_DATA = 'FORGOT_PASSWORD_PERSIST_FORM_DATA';
+
+// Forgot Password
+export const forgotPassword = email => ({
+  type: FORGOT_PASSWORD.BASE,
+  payload: { email },
+});
+
+export const forgotPasswordBegin = () => ({
+  type: FORGOT_PASSWORD.BEGIN,
+});
+
+export const forgotPasswordSuccess = email => ({
+  type: FORGOT_PASSWORD.SUCCESS,
+  payload: { email },
+});
+
+export const forgotPasswordForbidden = () => ({
+  type: FORGOT_PASSWORD.FORBIDDEN,
+});
+
+export const forgotPasswordServerError = () => ({
+  type: FORGOT_PASSWORD.FAILURE,
+});
+
+export const setForgotPasswordFormData = (forgotPasswordFormData) => ({
+  type: FORGOT_PASSWORD_PERSIST_FORM_DATA,
+  payload: { forgotPasswordFormData },
+});
--- a/src/forgot-password/data/api.test.ts
+++ b/src/forgot-password/data/api.test.ts
@@ -1,144 +0,0 @@
-import { getConfig } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import formurlencoded from 'form-urlencoded';
-
-import { forgotPassword } from './api';
-
-// Mock the platform dependencies
-jest.mock('@edx/frontend-platform', () => ({
-  getConfig: jest.fn(),
-}));
-
-jest.mock('@edx/frontend-platform/auth', () => ({
-  getAuthenticatedHttpClient: jest.fn(),
-}));
-
-jest.mock('form-urlencoded', () => jest.fn());
-
-const mockGetConfig = getConfig as jest.MockedFunction<typeof getConfig>;
-const mockGetAuthenticatedHttpClient = getAuthenticatedHttpClient as
-jest.MockedFunction<typeof getAuthenticatedHttpClient>;
-const mockFormurlencoded = formurlencoded as jest.MockedFunction<typeof formurlencoded>;
-
-describe('forgot-password api', () => {
-  const mockHttpClient = {
-    post: jest.fn(),
-  };
-
-  const mockConfig = {
-    LMS_BASE_URL: 'http://localhost:18000',
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    mockGetConfig.mockReturnValue(mockConfig);
-    mockGetAuthenticatedHttpClient.mockReturnValue(mockHttpClient as any);
-    mockFormurlencoded.mockImplementation((data) => `encoded=${JSON.stringify(data)}`);
-  });
-
-  describe('forgotPassword', () => {
-    const testEmail = 'test@example.com';
-    const expectedUrl = `${mockConfig.LMS_BASE_URL}/account/password`;
-    const expectedConfig = {
-      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-      isPublic: true,
-    };
-
-    it('should send forgot password request successfully', async () => {
-      const mockResponse = {
-        data: {
-          message: 'Password reset email sent successfully',
-          success: true,
-        },
-      };
-      mockHttpClient.post.mockResolvedValueOnce(mockResponse);
-
-      const result = await forgotPassword(testEmail);
-
-      expect(mockGetAuthenticatedHttpClient).toHaveBeenCalled();
-      expect(mockFormurlencoded).toHaveBeenCalledWith({ email: testEmail });
-      expect(mockHttpClient.post).toHaveBeenCalledWith(
-        expectedUrl,
-        `encoded=${JSON.stringify({ email: testEmail })}`,
-        expectedConfig
-      );
-      expect(result).toEqual(mockResponse.data);
-    });
-
-    it('should handle empty email address', async () => {
-      const emptyEmail = '';
-      const mockResponse = {
-        data: {
-          message: 'Email is required',
-          success: false,
-        }
-      };
-      mockHttpClient.post.mockResolvedValueOnce(mockResponse);
-
-      const result = await forgotPassword(emptyEmail);
-
-      expect(mockFormurlencoded).toHaveBeenCalledWith({ email: emptyEmail });
-      expect(mockHttpClient.post).toHaveBeenCalledWith(
-        expectedUrl,
-        `encoded=${JSON.stringify({ email: emptyEmail })}`,
-        expectedConfig,
-      );
-      expect(result).toEqual(mockResponse.data);
-    });
-
-    it('should handle network errors without response', async () => {
-      const networkError = new Error('Network Error');
-      networkError.name = 'NetworkError';
-      mockHttpClient.post.mockRejectedValueOnce(networkError);
-
-      await expect(forgotPassword(testEmail)).rejects.toThrow('Network Error');
-
-      expect(mockHttpClient.post).toHaveBeenCalledWith(
-        expectedUrl,
-        expect.any(String),
-        expectedConfig
-      );
-    });
-
-    it('should handle timeout errors', async () => {
-      const timeoutError = new Error('Request timeout');
-      timeoutError.name = 'TimeoutError';
-      mockHttpClient.post.mockRejectedValueOnce(timeoutError);
-
-      await expect(forgotPassword(testEmail)).rejects.toThrow('Request timeout');
-    });
-
-    it('should handle response with no data field', async () => {
-      const mockResponse = {
-        // No data field
-        status: 200,
-        statusText: 'OK',
-      };
-      mockHttpClient.post.mockResolvedValueOnce(mockResponse);
-
-      const result = await forgotPassword(testEmail);
-
-      expect(result).toBeUndefined();
-    });
-
-    it('should return exactly the data field from response', async () => {
-      const expectedData = {
-        message: 'Password reset email sent successfully',
-        success: true,
-        timestamp: '2026-02-05T10:00:00Z',
-      };
-      const mockResponse = {
-        data: expectedData,
-        status: 200,
-        headers: {},
-      };
-      mockHttpClient.post.mockResolvedValueOnce(mockResponse);
-
-      const result = await forgotPassword(testEmail);
-
-      expect(result).toEqual(expectedData);
-      expect(result).not.toHaveProperty('status');
-      expect(result).not.toHaveProperty('headers');
-    });
-  });
-});
--- a/src/forgot-password/data/apiHook.test.ts
+++ b/src/forgot-password/data/apiHook.test.ts
@@ -1,175 +0,0 @@
-import React from 'react';
-
-import { logError, logInfo } from '@edx/frontend-platform/logging';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { renderHook, waitFor } from '@testing-library/react';
-
-import * as api from './api';
-import { useForgotPassword } from './apiHook';
-
-// Mock the logging functions
-jest.mock('@edx/frontend-platform/logging', () => ({
-  logError: jest.fn(),
-  logInfo: jest.fn(),
-}));
-
-// Mock the API function
-jest.mock('./api', () => ({
-  forgotPassword: jest.fn(),
-}));
-
-const mockForgotPassword = api.forgotPassword as jest.MockedFunction<typeof api.forgotPassword>;
-const mockLogError = logError as jest.MockedFunction<typeof logError>;
-const mockLogInfo = logInfo as jest.MockedFunction<typeof logInfo>;
-
-// Test wrapper component
-const createWrapper = () => {
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: { retry: false },
-      mutations: { retry: false },
-    },
-  });
-
-  return function TestWrapper({ children }: { children: React.ReactNode }) {
-    return React.createElement(QueryClientProvider, { client: queryClient }, children);
-  };
-};
-
-describe('useForgotPassword', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('should initialize with default state', () => {
-    const { result } = renderHook(() => useForgotPassword(), {
-      wrapper: createWrapper(),
-    });
-
-    expect(result.current.isPending).toBe(false);
-    expect(result.current.isError).toBe(false);
-    expect(result.current.isSuccess).toBe(false);
-    expect(result.current.error).toBe(null);
-  });
-
-  it('should send forgot password email successfully and log success', async () => {
-    const testEmail = 'test@example.com';
-    const mockResponse = {
-      message: 'Password reset email sent successfully',
-      success: true,
-    };
-
-    mockForgotPassword.mockResolvedValueOnce(mockResponse);
-
-    const { result } = renderHook(() => useForgotPassword(), {
-      wrapper: createWrapper(),
-    });
-
-    result.current.mutate(testEmail);
-
-    await waitFor(() => {
-      expect(result.current.isSuccess).toBe(true);
-    });
-
-    expect(mockForgotPassword).toHaveBeenCalledWith(testEmail);
-    expect(result.current.data).toEqual(mockResponse);
-  });
-
-  it('should handle 403 forbidden error and log as info', async () => {
-    const testEmail = 'blocked@example.com';
-    const mockError = {
-      response: {
-        status: 403,
-        data: {
-          detail: 'Too many password reset attempts',
-        },
-      },
-      message: 'Forbidden',
-    };
-
-    mockForgotPassword.mockRejectedValueOnce(mockError);
-
-    const { result } = renderHook(() => useForgotPassword(), {
-      wrapper: createWrapper(),
-    });
-
-    result.current.mutate(testEmail);
-
-    await waitFor(() => {
-      expect(result.current.isError).toBe(true);
-    });
-
-    expect(mockForgotPassword).toHaveBeenCalledWith(testEmail);
-    expect(mockLogInfo).toHaveBeenCalledWith(mockError);
-    expect(mockLogError).not.toHaveBeenCalled();
-    expect(result.current.error).toEqual(mockError);
-  });
-
-  it('should handle network errors without response and log as error', async () => {
-    const testEmail = 'test@example.com';
-    const networkError = new Error('Network Error');
-    networkError.name = 'NetworkError';
-
-    mockForgotPassword.mockRejectedValueOnce(networkError);
-
-    const { result } = renderHook(() => useForgotPassword(), {
-      wrapper: createWrapper(),
-    });
-
-    result.current.mutate(testEmail);
-
-    await waitFor(() => {
-      expect(result.current.isError).toBe(true);
-    });
-
-    expect(mockForgotPassword).toHaveBeenCalledWith(testEmail);
-    expect(mockLogError).toHaveBeenCalledWith(networkError);
-    expect(mockLogInfo).not.toHaveBeenCalled();
-    expect(result.current.error).toEqual(networkError);
-  });
-
-  it('should handle empty email address', async () => {
-    const testEmail = '';
-    const mockResponse = {
-      message: 'Email sent',
-      success: true,
-    };
-
-    mockForgotPassword.mockResolvedValueOnce(mockResponse);
-
-    const { result } = renderHook(() => useForgotPassword(), {
-      wrapper: createWrapper(),
-    });
-
-    result.current.mutate(testEmail);
-
-    await waitFor(() => {
-      expect(result.current.isSuccess).toBe(true);
-    });
-
-    expect(mockForgotPassword).toHaveBeenCalledWith('');
-  });
-
-  it('should handle email with special characters', async () => {
-    const testEmail = 'user+test@example-domain.co.uk';
-    const mockResponse = {
-      message: 'Password reset email sent',
-      success: true,
-    };
-
-    mockForgotPassword.mockResolvedValueOnce(mockResponse);
-
-    const { result } = renderHook(() => useForgotPassword(), {
-      wrapper: createWrapper(),
-    });
-
-    result.current.mutate(testEmail);
-
-    await waitFor(() => {
-      expect(result.current.isSuccess).toBe(true);
-    });
-
-    expect(mockForgotPassword).toHaveBeenCalledWith(testEmail);
-    expect(result.current.data).toEqual(mockResponse);
-  });
-});
--- a/src/forgot-password/data/apiHook.ts
+++ b/src/forgot-password/data/apiHook.ts
@@ -1,47 +0,0 @@
-import { logError, logInfo } from '@edx/frontend-platform/logging';
-import { useMutation } from '@tanstack/react-query';
-
-import { forgotPassword } from './api';
-
-interface ForgotPasswordResult {
-  success: boolean;
-  message?: string;
-}
-
-interface UseForgotPasswordOptions {
-  onSuccess?: (data: ForgotPasswordResult, email: string) => void;
-  onError?: (error: Error) => void;
-}
-
-interface ApiError {
-  response?: {
-    status: number;
-    data: Record<string, unknown>;
-  };
-}
-
-const useForgotPassword = (options: UseForgotPasswordOptions = {}) => useMutation({
-  mutationFn: (email: string) => (
-    forgotPassword(email)
-  ),
-  onSuccess: (data: ForgotPasswordResult, email: string) => {
-    if (options.onSuccess) {
-      options.onSuccess(data, email);
-    }
-  },
-  onError: (error: ApiError) => {
-    // Handle different error types like the saga did
-    if (error.response && error.response.status === 403) {
-      logInfo(error);
-    } else {
-      logError(error);
-    }
-    if (options.onError) {
-      options.onError(error as Error);
-    }
-  },
-});
-
-export {
-  useForgotPassword,
-};
--- a/src/forgot-password/data/reducers.js
+++ b/src/forgot-password/data/reducers.js
@@ -0,0 +1,58 @@
+import { FORGOT_PASSWORD, FORGOT_PASSWORD_PERSIST_FORM_DATA } from './actions';
+import { INTERNAL_SERVER_ERROR, PENDING_STATE } from '../../data/constants';
+import { PASSWORD_RESET_FAILURE } from '../../reset-password/data/actions';
+
+export const defaultState = {
+  status: '',
+  submitState: '',
+  email: '',
+  emailValidationError: '',
+};
+
+const reducer = (state = defaultState, action = null) => {
+  if (action !== null) {
+    switch (action.type) {
+      case FORGOT_PASSWORD.BEGIN:
+        return {
+          email: state.email,
+          status: 'pending',
+          submitState: PENDING_STATE,
+        };
+      case FORGOT_PASSWORD.SUCCESS:
+        return {
+          ...defaultState,
+          status: 'complete',
+        };
+      case FORGOT_PASSWORD.FORBIDDEN:
+        return {
+          email: state.email,
+          status: 'forbidden',
+        };
+      case FORGOT_PASSWORD.FAILURE:
+        return {
+          email: state.email,
+          status: INTERNAL_SERVER_ERROR,
+        };
+      case PASSWORD_RESET_FAILURE:
+        return {
+          status: action.payload.errorCode,
+        };
+      case FORGOT_PASSWORD_PERSIST_FORM_DATA: {
+        const { forgotPasswordFormData } = action.payload;
+        return {
+          ...state,
+          ...forgotPasswordFormData,
+        };
+      }
+      default:
+        return {
+          ...defaultState,
+          email: state.email,
+          emailValidationError: state.emailValidationError,
+        };
+    }
+  }
+  return state;
+};
+
+export default reducer;
--- a/src/forgot-password/data/sagas.js
+++ b/src/forgot-password/data/sagas.js
@@ -0,0 +1,35 @@
+import { logError, logInfo } from '@edx/frontend-platform/logging';
+import { call, put, takeEvery } from 'redux-saga/effects';
+
+// Actions
+import {
+  FORGOT_PASSWORD,
+  forgotPasswordBegin,
+  forgotPasswordForbidden,
+  forgotPasswordServerError,
+  forgotPasswordSuccess,
+} from './actions';
+import { forgotPassword } from './service';
+
+// Services
+export function* handleForgotPassword(action) {
+  try {
+    yield put(forgotPasswordBegin());
+
+    yield call(forgotPassword, action.payload.email);
+
+    yield put(forgotPasswordSuccess(action.payload.email));
+  } catch (e) {
+    if (e.response && e.response.status === 403) {
+      yield put(forgotPasswordForbidden());
+      logInfo(e);
+    } else {
+      yield put(forgotPasswordServerError());
+      logError(e);
+    }
+  }
+}
+
+export default function* saga() {
+  yield takeEvery(FORGOT_PASSWORD.BASE, handleForgotPassword);
+}
--- a/src/forgot-password/data/selectors.js
+++ b/src/forgot-password/data/selectors.js
@@ -0,0 +1,10 @@
+import { createSelector } from 'reselect';
+
+export const storeName = 'forgotPassword';
+
+export const forgotPasswordSelector = state => ({ ...state[storeName] });
+
+export const forgotPasswordResultSelector = createSelector(
+  forgotPasswordSelector,
+  forgotPassword => forgotPassword,
+);
--- a/src/forgot-password/data/service.js
+++ b/src/forgot-password/data/service.js
@@ -2,7 +2,8 @@ import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import formurlencoded from 'form-urlencoded';

-const forgotPassword = async (email: string) => {
+// eslint-disable-next-line import/prefer-default-export
+export async function forgotPassword(email) {
  const requestConfig = {
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    isPublic: true,
@@ -19,8 +20,4 @@ const forgotPassword = async (email: string) => {
    });

  return data;
-};
-
-export {
-  forgotPassword,
-};
+}
--- a/src/forgot-password/data/tests/reducers.test.js
+++ b/src/forgot-password/data/tests/reducers.test.js
@@ -0,0 +1,34 @@
+import {
+  FORGOT_PASSWORD_PERSIST_FORM_DATA,
+} from '../actions';
+import reducer from '../reducers';
+
+describe('forgot password reducer', () => {
+  it('should set email and emailValidationError', () => {
+    const state = {
+      status: '',
+      submitState: '',
+      email: '',
+      emailValidationError: '',
+    };
+    const forgotPasswordFormData = {
+      email: 'test@gmail',
+      emailValidationError: 'Enter a valid email address',
+    };
+    const action = {
+      type: FORGOT_PASSWORD_PERSIST_FORM_DATA,
+      payload: { forgotPasswordFormData },
+    };
+
+    expect(
+      reducer(state, action),
+    ).toEqual(
+      {
+        status: '',
+        submitState: '',
+        email: 'test@gmail',
+        emailValidationError: 'Enter a valid email address',
+      },
+    );
+  });
+});
--- a/src/forgot-password/data/tests/sagas.test.js
+++ b/src/forgot-password/data/tests/sagas.test.js
@@ -0,0 +1,67 @@
+import { runSaga } from 'redux-saga';
+
+import initializeMockLogging from '../../../setupTest';
+import * as actions from '../actions';
+import { handleForgotPassword } from '../sagas';
+import * as api from '../service';
+
+const { loggingService } = initializeMockLogging();
+
+describe('handleForgotPassword', () => {
+  const params = {
+    payload: {
+      forgotPasswordFormData: {
+        email: 'test@test.com',
+      },
+    },
+  };
+
+  beforeEach(() => {
+    loggingService.logError.mockReset();
+    loggingService.logInfo.mockReset();
+  });
+
+  it('should handle 500 error code', async () => {
+    const passwordErrorResponse = { response: { status: 500 } };
+
+    const forgotPasswordRequest = jest.spyOn(api, 'forgotPassword').mockImplementation(
+      () => Promise.reject(passwordErrorResponse),
+    );
+
+    const dispatched = [];
+    await runSaga(
+      { dispatch: (action) => dispatched.push(action) },
+      handleForgotPassword,
+      params,
+    );
+
+    expect(loggingService.logError).toHaveBeenCalled();
+    expect(dispatched).toEqual([
+      actions.forgotPasswordBegin(),
+      actions.forgotPasswordServerError(),
+    ]);
+    forgotPasswordRequest.mockClear();
+  });
+
+  it('should handle rate limit error', async () => {
+    const forbiddenErrorResponse = { response: { status: 403 } };
+
+    const forbiddenPasswordRequest = jest.spyOn(api, 'forgotPassword').mockImplementation(
+      () => Promise.reject(forbiddenErrorResponse),
+    );
+
+    const dispatched = [];
+    await runSaga(
+      { dispatch: (action) => dispatched.push(action) },
+      handleForgotPassword,
+      params,
+    );
+
+    expect(loggingService.logInfo).toHaveBeenCalled();
+    expect(dispatched).toEqual([
+      actions.forgotPasswordBegin(),
+      actions.forgotPasswordForbidden(null),
+    ]);
+    forbiddenPasswordRequest.mockClear();
+  });
+});
--- a/src/forgot-password/index.js
+++ b/src/forgot-password/index.js
@@ -1 +1,5 @@
 export { default as ForgotPasswordPage } from './ForgotPasswordPage';
+export { default as reducer } from './data/reducers';
+export { FORGOT_PASSWORD } from './data/actions';
+export { default as saga } from './data/sagas';
+export { storeName, forgotPasswordResultSelector } from './data/selectors';
--- a/src/forgot-password/messages.js
+++ b/src/forgot-password/messages.js
@@ -74,7 +74,7 @@ const messages = defineMessages({
  },
  'additional.help.text': {
    id: 'additional.help.text',
-    defaultMessage: 'For additional help, contact {platformName} support at',
+    defaultMessage: 'For additional help, contact {platformName} support at ',
    description: 'additional help text on forgot password page',
  },
  'sign.in.text': {
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Syed Sajjad Hussain Shah	a378462480	Merge branch 'master' into embeddable-registration-form	2023-09-11 10:26:29 +05:00
Syed Sajjad Hussain Shah	0e7e748bc4	feat: final changes	2023-09-07 12:15:48 +05:00
Blue	68be7c65d5	fix: apply frontend validations (#1041 ) Description: Applied frontend validations on all the fields VAN-1614	2023-09-07 11:57:10 +05:00
Blue	80e940f44e	fix: embedded registration form (#1026 ) Description: Adding embedded registration form VAN-1574	2023-09-07 11:55:41 +05:00
				`@@ -1 +0,0 @@`
				`export const appId = 'org.openedx.frontend.app.authn';`