chore(deps): update dependency glob to v10 [security]

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

.env

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

.env.development

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

.env.test

@@ -18,3 +18,4 @@ SEGMENT_KEY=''
 SITE_NAME='Your Platform Name Here'
 APP_ID=''
 MFE_CONFIG_API_URL=''
+PARAGON_THEME_URLS={}

.nvmrc

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

CODEOWNERS

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

README.rst

@@ -26,31 +26,46 @@ This is a micro-frontend application responsible for the login, registration and
 Getting Started
 ***************
 
-Installation
-============
+Prerequisites
+=============
 
 `Tutor`_ is currently recommended as a development environment for your new MFE. Please refer to the `relevant tutor-mfe documentation`_ to get started using it.
 
 .. _Tutor: https://github.com/overhangio/tutor
 .. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development
 
-Devstack (Deprecated) instructions
-==================================
+Cloning and Startup
+===================
 
-1. Install Devstack using the `Getting Started <https://github.com/openedx/devstack#getting-started>`_ instructions.
+1. Clone your new repo:
 
-2. Start up LMS, if it's not already started.
+.. code-block:: bash
 
-4. Within this project (frontend-app-authn), install requirements and start the development server:
+   git clone https://github.com/edx/frontend-app-authn.git
 
-   .. code-block::
+2. Use the version of Node specified in the ``.nvmrc`` file.
 
-      npm install
-      npm start # The server will run on port 1999
+   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>`_.
 
-5. Once the dev server is up, visit http://localhost:1999 to access the MFE
+3. Install npm dependencies:
 
-   .. image:: ./docs/images/frontend-app-authn-localhost-preview.png
+.. code-block:: bash
+
+   cd frontend-app-authn && npm install
+
+4. Update the application port to use for local development:
+
+   The default port is 1999. If this does not work for you, update the line
+   ``PORT=1999`` to your port in all ``.env.*`` files
+
+5. Start the devserver. The app will be running at ``localhost:1999``, or whatever port you change it too.
+
+   .. code-block:: bash
+
+      npm run dev
 
    **Note:** Follow `Enable social auth locally <docs/how_tos/enable_social_auth.rst>`_ for enabling Social Sign-on Buttons (SSO) locally
 
@@ -115,7 +130,7 @@ The authentication micro-frontend also requires the following additional variabl
 
    * - ``MFE_CONFIG_API_URL``
      - Link of the API to get runtime mfe configuration variables from the site configuration or django settings.
-     - ``/api/v1/mfe_config`` | ``''`` (empty strings are falsy)  
+     - ``/api/v1/mfe_config`` | ``''`` (empty strings are falsy)
 
    * - ``APP_ID``
      - Name of MFE, this will be used by the API to get runtime configurations for the specific micro frontend. For a frontend repo `frontend-app-appName`, use `appName` as APP_ID.
@@ -145,7 +160,7 @@ 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>`__.

package.json

@@ -35,46 +35,42 @@
     "@fortawesome/fontawesome-svg-core": "6.7.2",
     "@fortawesome/free-brands-svg-icons": "6.7.2",
     "@fortawesome/free-solid-svg-icons": "6.7.2",
-    "@fortawesome/react-fontawesome": "0.2.2",
-    "@openedx/paragon": "^22.16.0",
+    "@fortawesome/react-fontawesome": "0.2.6",
+    "@openedx/frontend-plugin-framework": "^1.7.0",
+    "@openedx/paragon": "^23.4.2",
     "@optimizely/react-sdk": "^2.9.1",
-    "@redux-devtools/extension": "3.3.0",
+    "@tanstack/react-query": "^5.90.19",
     "@testing-library/react": "^16.2.0",
     "algoliasearch": "^4.14.3",
-    "algoliasearch-helper": "^3.14.0",
+    "algoliasearch-helper": "^3.26.0",
     "classnames": "2.5.1",
-    "core-js": "3.41.0",
+    "core-js": "3.43.0",
     "fastest-levenshtein": "1.0.16",
-    "form-urlencoded": "6.1.5",
+    "form-urlencoded": "6.1.6",
     "prop-types": "15.8.1",
     "query-string": "7.1.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet": "6.1.0",
     "react-loading-skeleton": "3.5.0",
-    "react-redux": "7.2.9",
     "react-responsive": "8.2.0",
-    "react-router": "6.30.0",
-    "react-router-dom": "6.30.0",
+    "react-router": "6.30.3",
+    "react-router-dom": "6.30.3",
     "react-zendesk": "^0.1.13",
-    "redux": "4.2.1",
-    "redux-logger": "3.0.6",
-    "redux-mock-store": "1.5.5",
-    "redux-saga": "1.3.0",
-    "redux-thunk": "2.4.2",
     "regenerator-runtime": "0.14.1",
-    "reselect": "5.1.1",
     "universal-cookie": "7.2.2"
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/reactifex": "1.1.0",
-    "@openedx/frontend-build": "^14.4.2",
-    "babel-plugin-formatjs": "10.5.37",
-    "eslint-plugin-import": "2.31.0",
-    "glob": "7.2.3",
+    "@edx/typescript-config": "^1.1.0",
+    "@openedx/frontend-build": "^14.6.2",
+    "@testing-library/jest-dom": "^6.9.1",
+    "babel-plugin-formatjs": "10.5.41",
+    "eslint-plugin-import": "2.32.0",
+    "glob": "10.5.0",
     "history": "5.3.0",
-    "jest": "29.7.0",
-    "react-test-renderer": "^18.3.1"
+    "jest": "30.3.0",
+    "react-test-renderer": "^18.3.1",
+    "ts-jest": "^29.4.0"
   }
 }

src/MainApp.jsx

@@ -1,14 +1,12 @@
-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,
@@ -31,33 +29,48 @@ import './index.scss';
 
 registerIcons();
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    mutations: {
+      retry: false,
+    },
+  },
+});
+
 const MainApp = () => (
-  <AppProvider store={configureStore()}>
-    <Helmet>
-      <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
-    </Helmet>
-    {getConfig().ZENDESK_KEY && <Zendesk />}
-    <Routes>
-      <Route path="/" element={<Navigate replace to={updatePathWithQueryParams(REGISTER_PAGE)} />} />
-      <Route
-        path={REGISTER_EMBEDDED_PAGE}
-        element={<EmbeddedRegistrationRoute><RegistrationPage /></EmbeddedRegistrationRoute>}
-      />
-      <Route
-        path={LOGIN_PAGE}
-        element={
-          <UnAuthOnlyRoute><Logistration selectedPage={LOGIN_PAGE} /></UnAuthOnlyRoute>
-        }
-      />
-      <Route path={REGISTER_PAGE} element={<UnAuthOnlyRoute><Logistration /></UnAuthOnlyRoute>} />
-      <Route path={RESET_PAGE} element={<UnAuthOnlyRoute><ForgotPasswordPage /></UnAuthOnlyRoute>} />
-      <Route path={PASSWORD_RESET_CONFIRM} element={<ResetPasswordPage />} />
-      <Route path={AUTHN_PROGRESSIVE_PROFILING} element={<ProgressiveProfiling />} />
-      <Route path={RECOMMENDATIONS} element={<RecommendationsPage />} />
-      <Route path={PAGE_NOT_FOUND} element={<NotFoundPage />} />
-      <Route path="*" element={<Navigate replace to={PAGE_NOT_FOUND} />} />
-    </Routes>
-  </AppProvider>
+  <QueryClientProvider client={queryClient}>
+    <AppProvider>
+      <Helmet>
+        <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
+      </Helmet>
+      {getConfig().ZENDESK_KEY && <Zendesk />}
+      <Routes>
+        <Route path="/" element={<Navigate replace to={updatePathWithQueryParams(REGISTER_PAGE)} />} />
+        <Route
+          path={REGISTER_EMBEDDED_PAGE}
+          element={<EmbeddedRegistrationRoute><RegistrationPage /></EmbeddedRegistrationRoute>}
+        />
+        <Route
+          path={LOGIN_PAGE}
+          element={
+            <UnAuthOnlyRoute><Logistration selectedPage={LOGIN_PAGE} /></UnAuthOnlyRoute>
+          }
+        />
+        <Route
+          path={REGISTER_PAGE}
+          element={
+            <UnAuthOnlyRoute><Logistration selectedPage={REGISTER_PAGE} /></UnAuthOnlyRoute>
+          }
+        />
+        <Route path={RESET_PAGE} element={<UnAuthOnlyRoute><ForgotPasswordPage /></UnAuthOnlyRoute>} />
+        <Route path={PASSWORD_RESET_CONFIRM} element={<ResetPasswordPage />} />
+        <Route path={AUTHN_PROGRESSIVE_PROFILING} element={<ProgressiveProfiling />} />
+        <Route path={RECOMMENDATIONS} element={<RecommendationsPage />} />
+        <Route path={PAGE_NOT_FOUND} element={<NotFoundPage />} />
+        <Route path="*" element={<Navigate replace to={PAGE_NOT_FOUND} />} />
+      </Routes>
+    </AppProvider>
+  </QueryClientProvider>
 );
 
 export default MainApp;

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

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { render, screen } from '@testing-library/react';
 

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

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

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

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

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

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

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

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

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

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

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

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

src/base-container/index.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { getConfig } from '@edx/frontend-platform';
 import { breakpoints } from '@openedx/paragon';
 import classNames from 'classnames';

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

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { mergeConfig } from '@edx/frontend-platform';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { render } from '@testing-library/react';

src/common-components/EmbeddedRegistrationRoute.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import PropTypes from 'prop-types';
 import { Navigate } from 'react-router-dom';
 

src/common-components/EnterpriseSSO.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

src/common-components/FormGroup.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import {
   Form, TransitionReplace,

src/common-components/InstitutionLogistration.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button, Hyperlink, Icon } from '@openedx/paragon';

src/common-components/NotFoundPage.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 const NotFoundPage = () => (

src/common-components/PasswordField.jsx

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

src/common-components/RedirectLogistration.jsx

@@ -22,7 +22,6 @@ const RedirectLogistration = (props) => {
     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.

src/common-components/SocialAuthProviders.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

src/common-components/ThirdPartyAuth.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {

src/common-components/ThirdPartyAuthAlert.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Alert } from '@openedx/paragon';

src/common-components/Zendesk.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import Zendesk from 'react-zendesk';

src/common-components/components/ThirdPartyAuthContext.test.tsx

@@ -0,0 +1,61 @@
+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();
+  });
+});

src/common-components/components/ThirdPartyAuthContext.tsx

@@ -0,0 +1,133 @@
+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;
+};

src/common-components/data/actions.js

@@ -1,27 +0,0 @@
-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,
-});

src/common-components/data/api.ts

@@ -1,8 +1,7 @@
 import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
-// eslint-disable-next-line import/prefer-default-export
-export async function getThirdPartyAuthContext(urlParams) {
+const getThirdPartyAuthContext = async (urlParams : string) => {
   const requestConfig = {
     headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
     params: urlParams,
@@ -13,13 +12,14 @@ export async function getThirdPartyAuthContext(urlParams) {
     .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,
+};

src/common-components/data/apiHook.ts

@@ -0,0 +1,17 @@
+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,
+};

src/common-components/data/queryKeys.ts

@@ -0,0 +1,6 @@
+import { appId } from '../../constants';
+
+export const ThirdPartyAuthQueryKeys = {
+  all: [appId, 'ThirdPartyAuth'] as const,
+  byPage: (pageId: string) => [appId, 'ThirdPartyAuth', pageId] as const,
+};

src/common-components/data/reducers.js

@@ -1,63 +0,0 @@
-import { THIRD_PARTY_AUTH_CONTEXT, THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG } from './actions';
-import { COMPLETE_STATE, FAILURE_STATE, PENDING_STATE } from '../../data/constants';
-
-export const defaultState = {
-  fieldDescriptions: {},
-  optionalFields: {
-    fields: {},
-    extended_profile: [],
-  },
-  thirdPartyAuthApiStatus: null,
-  thirdPartyAuthContext: {
-    autoSubmitRegForm: false,
-    currentProvider: null,
-    finishAuthUrl: null,
-    countryCode: null,
-    providers: [],
-    secondaryProviders: [],
-    pipelineUserDetails: null,
-    errorMessage: null,
-    welcomePageRedirectUrl: null,
-  },
-};
-
-const reducer = (state = defaultState, action = {}) => {
-  switch (action.type) {
-    case THIRD_PARTY_AUTH_CONTEXT.BEGIN:
-      return {
-        ...state,
-        thirdPartyAuthApiStatus: PENDING_STATE,
-      };
-    case THIRD_PARTY_AUTH_CONTEXT.SUCCESS: {
-      return {
-        ...state,
-        fieldDescriptions: action.payload.fieldDescriptions?.fields,
-        optionalFields: action.payload.optionalFields,
-        thirdPartyAuthContext: action.payload.thirdPartyAuthContext,
-        thirdPartyAuthApiStatus: COMPLETE_STATE,
-      };
-    }
-    case THIRD_PARTY_AUTH_CONTEXT.FAILURE:
-      return {
-        ...state,
-        thirdPartyAuthApiStatus: FAILURE_STATE,
-        thirdPartyAuthContext: {
-          ...state.thirdPartyAuthContext,
-          errorMessage: null,
-        },
-      };
-    case THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG:
-      return {
-        ...state,
-        thirdPartyAuthApiStatus: PENDING_STATE,
-        thirdPartyAuthContext: {
-          ...state.thirdPartyAuthContext,
-          errorMessage: null,
-        },
-      };
-    default:
-      return state;
-  }
-};
-
-export default reducer;

src/common-components/data/sagas.js

@@ -1,32 +0,0 @@
-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);
-}

src/common-components/data/selectors.js

@@ -1,28 +0,0 @@
-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,
-  }),
-);

src/common-components/data/tests/reducer.test.js

@@ -1,82 +0,0 @@
-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,
-        },
-      },
-    );
-  });
-});

src/common-components/data/tests/sagas.test.js

@@ -1,71 +0,0 @@
-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();
-  });
-});

src/common-components/index.jsx

@@ -7,9 +7,6 @@ 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';

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

@@ -1,16 +1,21 @@
 import React from 'react';
-import { Provider } from 'react-redux';
 
-import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { fireEvent, render } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter } from 'react-router-dom';
-import configureStore from 'redux-mock-store';
 
-import { fetchRealtimeValidations } from '../../register/data/actions';
+import { RegisterProvider } from '../../register/components/RegisterContext';
+import { useFieldValidations } from '../../register/data/apiHook';
 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',
@@ -36,37 +41,52 @@ describe('FormGroup', () => {
 });
 
 describe('PasswordField', () => {
-  const mockStore = configureStore();
-  const IntlPasswordField = injectIntl(PasswordField);
   let props = {};
-  let store = {};
+  let queryClient;
+  let mockMutate;
 
-  const reduxWrapper = children => (
-    <IntlProvider locale="en">
-      <MemoryRouter>
-        <Provider store={store}>{children}</Provider>
-      </MemoryRouter>
-    </IntlProvider>
+  const renderWrapper = (children) => (
+    <QueryClientProvider client={queryClient}>
+      <IntlProvider locale="en">
+        <MemoryRouter>
+          <RegisterProvider>
+            {children}
+          </RegisterProvider>
+        </MemoryRouter>
+      </IntlProvider>
+    </QueryClientProvider>
   );
 
-  const initialState = {
-    register: {
-      validationApiRateLimited: false,
-    },
-  };
-
   beforeEach(() => {
-    store = mockStore(initialState);
+    queryClient = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+        },
+        mutations: {
+          retry: false,
+        },
+      },
+    });
+
+    mockMutate = jest.fn();
+    useFieldValidations.mockReturnValue({
+      mutate: mockMutate,
+      isPending: false,
+    });
+
     props = {
       floatingLabel: 'Password',
       name: 'password',
       value: 'password123',
       handleFocus: jest.fn(),
     };
+
+    jest.clearAllMocks();
   });
 
   it('should show/hide password on icon click', () => {
-    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const { getByLabelText } = render(renderWrapper(<PasswordField {...props} />));
     const passwordInput = getByLabelText('Password');
 
     const showPasswordButton = getByLabelText('Show password');
@@ -79,7 +99,7 @@ describe('PasswordField', () => {
   });
 
   it('should show password requirement tooltip on focus', async () => {
-    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const { getByLabelText } = render(renderWrapper(<PasswordField {...props} />));
     const passwordInput = getByLabelText('Password');
     jest.useFakeTimers();
     await act(async () => {
@@ -96,7 +116,7 @@ describe('PasswordField', () => {
       ...props,
       value: '',
     };
-    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const { getByLabelText } = render(renderWrapper(<PasswordField {...props} />));
     const passwordInput = getByLabelText('Password');
     jest.useFakeTimers();
     await act(async () => {
@@ -119,7 +139,7 @@ describe('PasswordField', () => {
   });
 
   it('should update password requirement checks', async () => {
-    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const { getByLabelText } = render(renderWrapper(<PasswordField {...props} />));
     const passwordInput = getByLabelText('Password');
     jest.useFakeTimers();
     await act(async () => {
@@ -142,7 +162,7 @@ describe('PasswordField', () => {
   });
 
   it('should not run validations when blur is fired on password icon click', () => {
-    const { container, getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const { container, getByLabelText } = render(renderWrapper(<PasswordField {...props} />));
     const passwordInput = container.querySelector('input[name="password"]');
 
     const passwordIcon = getByLabelText('Show password');
@@ -163,7 +183,7 @@ describe('PasswordField', () => {
       ...props,
       handleBlur: jest.fn(),
     };
-    const { container } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const { container } = render(renderWrapper(<PasswordField {...props} />));
     const passwordInput = container.querySelector('input[name="password"]');
 
     fireEvent.blur(passwordInput, {
@@ -181,7 +201,7 @@ describe('PasswordField', () => {
       ...props,
       handleErrorChange: jest.fn(),
     };
-    const { container } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const { container } = render(renderWrapper(<PasswordField {...props} />));
     const passwordInput = container.querySelector('input[name="password"]');
 
     fireEvent.blur(passwordInput, {
@@ -204,7 +224,7 @@ describe('PasswordField', () => {
       handleErrorChange: jest.fn(),
     };
 
-    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const { getByLabelText } = render(renderWrapper(<PasswordField {...props} />));
 
     const passwordIcon = getByLabelText('Show password');
 
@@ -224,7 +244,7 @@ describe('PasswordField', () => {
       handleErrorChange: jest.fn(),
     };
 
-    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const { getByLabelText } = render(renderWrapper(<PasswordField {...props} />));
 
     const passwordIcon = getByLabelText('Show password');
 
@@ -243,12 +263,11 @@ 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(reduxWrapper(<IntlPasswordField {...props} />));
+    const { getByLabelText } = render(renderWrapper(<PasswordField {...props} />));
     const passwordField = getByLabelText('Password');
     fireEvent.blur(passwordField, {
       target: {
@@ -257,18 +276,17 @@ describe('PasswordField', () => {
       },
     });
 
-    expect(store.dispatch).toHaveBeenCalledWith(fetchRealtimeValidations({ password: 'password123' }));
+    expect(mockMutate).toHaveBeenCalledWith({ 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(reduxWrapper(<IntlPasswordField {...props} />));
+    const { getByLabelText } = render(renderWrapper(<PasswordField {...props} />));
 
     const passwordIcon = getByLabelText('Show password');
 

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

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import renderer from 'react-test-renderer';
 

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

@@ -1,9 +1,7 @@
-import React from 'react';
-
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import renderer from 'react-test-renderer';
 
-import { REGISTER_PAGE } from '../../data/constants';
+import { PENDING_STATE, REGISTER_PAGE } from '../../data/constants';
 import ThirdPartyAuthAlert from '../ThirdPartyAuthAlert';
 
 describe('ThirdPartyAuthAlert', () => {
@@ -38,4 +36,19 @@ 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();
+  });
 });

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

@@ -1,7 +1,5 @@
 /* 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 { act } from 'react-dom/test-utils';

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

@@ -1,5 +1,25 @@
 // 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"

src/constants.ts

@@ -0,0 +1 @@
+export const appId = 'org.openedx.frontend.app.authn';

src/data/configureStore.js

@@ -1,33 +0,0 @@
-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;
-}

src/data/reducers.js

@@ -1,36 +0,0 @@
-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;

src/data/sagas.js

@@ -1,19 +0,0 @@
-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(),
-  ]);
-}