@openedx/frontend-app-authn 1.0.0-alpha.0

package/src/register/components/tests/ThirdPartyAuth.test.jsx

@@ -0,0 +1,439 @@
+import { Provider } from 'react-redux';
+
+import {
+  configureI18n, getSiteConfig, getLocale, injectIntl, IntlProvider, mergeAppConfig
+} from '@openedx/frontend-base';
+import { fireEvent, render } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+
+import {
+  COMPLETE_STATE, LOGIN_PAGE, PENDING_STATE, REGISTER_PAGE,
+} from '../../../data/constants';
+import { appId } from '../../../constants';
+import RegistrationPage from '../../RegistrationPage';
+
+jest.mock('@openedx/frontend-base', () => ({
+  ...jest.requireActual('@openedx/frontend-base'),
+  sendPageEvent: jest.fn(),
+  sendTrackEvent: jest.fn(),
+  getLocale: jest.fn(),
+}));
+
+const IntlRegistrationPage = injectIntl(RegistrationPage);
+const mockStore = configureStore();
+
+jest.mock('react-router-dom', () => {
+  const mockNavigation = jest.fn();
+
+  // eslint-disable-next-line react/prop-types
+  const Navigate = ({ to }) => {
+    mockNavigation(to);
+    return <div />;
+  };
+
+  return {
+    ...jest.requireActual('react-router-dom'),
+    Navigate,
+    mockNavigate: mockNavigation,
+  };
+});
+
+describe('ThirdPartyAuth', () => {
+  mergeAppConfig(appId, {
+    PRIVACY_POLICY: 'https://privacy-policy.com',
+    TOS_AND_HONOR_CODE: 'https://tos-and-honot-code.com',
+    USER_RETENTION_COOKIE_NAME: 'authn-returning-user',
+  });
+
+  let props = {};
+  let store = {};
+  const registrationFormData = {
+    configurableFormFields: {
+      marketingEmailsOptIn: true,
+    },
+    formFields: {
+      name: '', email: '', username: '', password: '',
+    },
+    emailSuggestion: {
+      suggestion: '', type: '',
+    },
+    errors: {
+      name: '', email: '', username: '', password: '',
+    },
+  };
+
+  const reduxWrapper = children => (
+    <IntlProvider locale="en">
+      <Provider store={store}>{children}</Provider>
+    </IntlProvider>
+  );
+
+  const routerWrapper = children => (
+    <Router>
+      {children}
+    </Router>
+  );
+
+  const thirdPartyAuthContext = {
+    currentProvider: null,
+    finishAuthUrl: null,
+    providers: [],
+    secondaryProviders: [],
+    pipelineUserDetails: null,
+    countryCode: null,
+  };
+
+  const initialState = {
+    register: {
+      registrationResult: { success: false, redirectUrl: '' },
+      registrationError: {},
+      registrationFormData,
+      usernameSuggestions: [],
+    },
+    commonComponents: {
+      thirdPartyAuthApiStatus: null,
+      thirdPartyAuthContext,
+      fieldDescriptions: {},
+      optionalFields: {
+        fields: {},
+        extended_profile: [],
+      },
+    },
+  };
+
+  beforeEach(() => {
+    store = mockStore(initialState);
+    configureI18n({
+      messages: { 'es-419': {}, de: {}, 'en-us': {} },
+    });
+    props = {
+      handleInstitutionLogin: jest.fn(),
+      institutionLogin: false,
+    };
+    window.location = { search: '' };
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const ssoProvider = {
+    id: 'oa2-apple-id',
+    name: 'Apple',
+    iconClass: 'apple',
+    iconImage: 'https://openedx.devstack.lms/logo.png',
+    loginUrl: '/auth/login/apple-id/?auth_entry=login&next=/dashboard',
+  };
+
+  describe('Test Third Party Auth', () => {
+    getLocale.mockImplementation(() => ('en-us'));
+
+    const secondaryProviders = {
+      id: 'saml-test', name: 'Test University', loginUrl: '/dummy-auth', registerUrl: '/dummy_auth',
+    };
+
+    it('should not display password field when current provider is present', () => {
+      store = mockStore({
+        ...initialState,
+        commonComponents: {
+          ...initialState.commonComponents,
+          thirdPartyAuthContext: {
+            ...initialState.commonComponents.thirdPartyAuthContext,
+            currentProvider: ssoProvider.name,
+          },
+        },
+      });
+
+      const { queryByLabelText } = render(
+        routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />, { store })),
+      );
+
+      const passwordField = queryByLabelText('Password');
+
+      expect(passwordField).toBeNull();
+    });
+
+    it('should render tpa button for tpa_hint id matching one of the primary providers', () => {
+      store = mockStore({
+        ...initialState,
+        commonComponents: {
+          ...initialState.commonComponents,
+          thirdPartyAuthContext: {
+            ...initialState.commonComponents.thirdPartyAuthContext,
+            providers: [ssoProvider],
+          },
+          thirdPartyAuthApiStatus: COMPLETE_STATE,
+        },
+      });
+
+      delete window.location;
+      window.location = { href: getSiteConfig().baseUrl.concat(LOGIN_PAGE), search: `?next=/dashboard&tpa_hint=${ssoProvider.id}` };
+
+      const { container } = render(
+        routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)),
+      );
+      const tpaButton = container.querySelector(`button#${ssoProvider.id}`);
+
+      expect(tpaButton).toBeTruthy();
+      expect(tpaButton.textContent).toEqual(ssoProvider.name);
+      expect(tpaButton.classList.contains('btn-tpa')).toBe(true);
+      expect(tpaButton.classList.contains(`btn-${ssoProvider.id}`)).toBe(true);
+    });
+
+    it('should display skeleton if tpa_hint is true and thirdPartyAuthContext is pending', () => {
+      store = mockStore({
+        ...initialState,
+        commonComponents: {
+          ...initialState.commonComponents,
+          thirdPartyAuthApiStatus: PENDING_STATE,
+        },
+      });
+
+      delete window.location;
+      window.location = {
+        href: getSiteConfig().baseUrl.concat(LOGIN_PAGE),
+        search: `?next=/dashboard&tpa_hint=${ssoProvider.id}`,
+      };
+
+      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const skeletonElement = container.querySelector('.react-loading-skeleton');
+
+      expect(skeletonElement).toBeTruthy();
+    });
+
+    it('should render icon if icon classes are missing in providers', () => {
+      ssoProvider.iconClass = null;
+      store = mockStore({
+        ...initialState,
+        commonComponents: {
+          ...initialState.commonComponents,
+          thirdPartyAuthContext: {
+            ...initialState.commonComponents.thirdPartyAuthContext,
+            providers: [ssoProvider],
+          },
+          thirdPartyAuthApiStatus: COMPLETE_STATE,
+        },
+      });
+
+      delete window.location;
+      window.location = { href: getSiteConfig().baseUrl.concat(REGISTER_PAGE), search: `?next=/dashboard&tpa_hint=${ssoProvider.id}` };
+      ssoProvider.iconImage = null;
+
+      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const iconElement = container.querySelector(`button#${ssoProvider.id} div span.pgn__icon`);
+
+      expect(iconElement).toBeTruthy();
+    });
+
+    it('should render tpa button for tpa_hint id matching one of the secondary providers', () => {
+      secondaryProviders.skipHintedLogin = true;
+      store = mockStore({
+        ...initialState,
+        commonComponents: {
+          ...initialState.commonComponents,
+          thirdPartyAuthContext: {
+            ...initialState.commonComponents.thirdPartyAuthContext,
+            secondaryProviders: [secondaryProviders],
+          },
+          thirdPartyAuthApiStatus: COMPLETE_STATE,
+        },
+      });
+
+      delete window.location;
+      window.location = { href: getSiteConfig().baseUrl.concat(REGISTER_PAGE), search: `?next=/dashboard&tpa_hint=${secondaryProviders.id}` };
+
+      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      expect(window.location.href).toEqual(getSiteConfig().lmsBaseUrl + secondaryProviders.registerUrl);
+    });
+
+    it('should render regular tpa button for invalid tpa_hint value', () => {
+      const expectedMessage = `${ssoProvider.name}`;
+      store = mockStore({
+        ...initialState,
+        commonComponents: {
+          ...initialState.commonComponents,
+          thirdPartyAuthContext: {
+            ...initialState.commonComponents.thirdPartyAuthContext,
+            providers: [ssoProvider],
+          },
+          thirdPartyAuthApiStatus: COMPLETE_STATE,
+        },
+      });
+
+      delete window.location;
+      window.location = { href: getSiteConfig().baseUrl.concat(LOGIN_PAGE), search: '?next=/dashboard&tpa_hint=invalid' };
+
+      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const providerButton = container.querySelector(`button#${ssoProvider.id} span#provider-name`);
+
+      expect(providerButton.textContent).toEqual(expectedMessage);
+    });
+
+    it('should show single sign on provider button', () => {
+      store = mockStore({
+        ...initialState,
+        commonComponents: {
+          ...initialState.commonComponents,
+          thirdPartyAuthContext: {
+            ...initialState.commonComponents.thirdPartyAuthContext,
+            providers: [ssoProvider],
+          },
+        },
+      });
+
+      const { container } = render(
+        routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />, { store })),
+      );
+
+      const buttonsWithId = container.querySelectorAll(`button#${ssoProvider.id}`);
+
+      expect(buttonsWithId.length).toEqual(1);
+    });
+
+    it('should show single sign on provider button', () => {
+      store = mockStore({
+        ...initialState,
+        commonComponents: {
+          ...initialState.commonComponents,
+          thirdPartyAuthContext: {
+            ...initialState.commonComponents.thirdPartyAuthContext,
+            providers: [ssoProvider],
+          },
+        },
+      });
+
+      const { container } = render(
+        routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)),
+      );
+
+      const buttonsWithId = container.querySelectorAll(`button#${ssoProvider.id}`);
+
+      expect(buttonsWithId.length).toEqual(1);
+    });
+
+    it('should display InstitutionLogistration if insitutionLogin prop is true', () => {
+      props = {
+        ...props,
+        institutionLogin: true,
+      };
+
+      const { getByText } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const headingElement = getByText('Register with institution/campus credentials');
+      expect(headingElement).toBeTruthy();
+    });
+
+    it('should redirect to social auth provider url on SSO button click', () => {
+      const registerUrl = '/auth/login/apple-id/?auth_entry=register&next=/dashboard';
+      store = mockStore({
+        ...initialState,
+        commonComponents: {
+          ...initialState.commonComponents,
+          thirdPartyAuthContext: {
+            ...initialState.commonComponents.thirdPartyAuthContext,
+            providers: [{
+              ...ssoProvider,
+              registerUrl,
+            }],
+          },
+        },
+      });
+
+      delete window.location;
+      window.location = { href: getSiteConfig().baseUrl };
+
+      const { container } = render(
+        routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)),
+      );
+
+      const ssoButton = container.querySelector('button#oa2-apple-id');
+      fireEvent.click(ssoButton);
+
+      expect(window.location.href).toBe(getSiteConfig().lmsBaseUrl + registerUrl);
+    });
+
+    it('should redirect to finishAuthUrl upon successful registration via SSO', () => {
+      const authCompleteUrl = '/auth/complete/google-oauth2/';
+      store = mockStore({
+        ...initialState,
+        register: {
+          ...initialState.register,
+          registrationResult: {
+            success: true,
+          },
+        },
+        commonComponents: {
+          ...initialState.commonComponents,
+          thirdPartyAuthContext: {
+            ...initialState.commonComponents.thirdPartyAuthContext,
+            finishAuthUrl: authCompleteUrl,
+          },
+        },
+      });
+
+      delete window.location;
+      window.location = { href: getSiteConfig().baseUrl };
+
+      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      expect(window.location.href).toBe(getSiteConfig().lmsBaseUrl + authCompleteUrl);
+    });
+
+    // ******** test alert messages ********
+
+    it('should match third party auth alert', () => {
+      store = mockStore({
+        ...initialState,
+        commonComponents: {
+          ...initialState.commonComponents,
+          thirdPartyAuthContext: {
+            ...initialState.commonComponents.thirdPartyAuthContext,
+            currentProvider: 'Apple',
+          },
+        },
+      });
+
+      const expectedMessage = `${'You\'ve successfully signed into Apple! We just need a little more information before '
+        + 'you start learning with '}${getSiteConfig().siteName}.`;
+
+      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const tpaAlert = container.querySelector('#tpa-alert p');
+      expect(tpaAlert.textContent).toEqual(expectedMessage);
+    });
+
+    it('should display errorMessage if third party authentication fails', () => {
+      jest.spyOn(global.Date, 'now').mockImplementation(() => 0);
+      getLocale.mockImplementation(() => ('en-us'));
+
+      store = mockStore({
+        ...initialState,
+        register: {
+          ...initialState.register,
+          backendCountryCode: 'PK',
+          userPipelineDataLoaded: false,
+        },
+        commonComponents: {
+          ...initialState.commonComponents,
+          thirdPartyAuthApiStatus: COMPLETE_STATE,
+          thirdPartyAuthContext: {
+            ...initialState.commonComponents.thirdPartyAuthContext,
+            currentProvider: null,
+            pipelineUserDetails: {},
+            errorMessage: 'An error occurred',
+          },
+        },
+      });
+
+      store.dispatch = jest.fn(store.dispatch);
+
+      const { container } = render(
+        routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)),
+      );
+
+      const alertHeading = container.querySelector('div.alert-heading');
+      expect(alertHeading).toBeTruthy();
+
+      const alert = container.querySelector('div.alert');
+      expect(alert.textContent).toContain('An error occurred');
+    });
+  });
+});

package/src/register/data/actions.js

@@ -0,0 +1,85 @@
+import { AsyncActionType } from '../../data/utils';
+
+export const BACKUP_REGISTRATION_DATA = new AsyncActionType('REGISTRATION', 'BACKUP_REGISTRATION_DATA');
+export const REGISTER_FORM_VALIDATIONS = new AsyncActionType('REGISTRATION', 'GET_FORM_VALIDATIONS');
+export const REGISTER_NEW_USER = new AsyncActionType('REGISTRATION', 'REGISTER_NEW_USER');
+export const REGISTER_CLEAR_USERNAME_SUGGESTIONS = 'REGISTRATION_CLEAR_USERNAME_SUGGESTIONS';
+export const REGISTRATION_CLEAR_BACKEND_ERROR = 'REGISTRATION_CLEAR_BACKEND_ERROR';
+export const REGISTER_SET_COUNTRY_CODE = 'REGISTER_SET_COUNTRY_CODE';
+export const REGISTER_SET_USER_PIPELINE_DATA_LOADED = 'REGISTER_SET_USER_PIPELINE_DATA_LOADED';
+export const REGISTER_SET_EMAIL_SUGGESTIONS = 'REGISTER_SET_EMAIL_SUGGESTIONS';
+
+// Backup registration form
+export const backupRegistrationForm = () => ({
+  type: BACKUP_REGISTRATION_DATA.BASE,
+});
+
+export const backupRegistrationFormBegin = (data) => ({
+  type: BACKUP_REGISTRATION_DATA.BEGIN,
+  payload: { ...data },
+});
+
+// Validate fields from the backend
+export const fetchRealtimeValidations = (formPayload) => ({
+  type: REGISTER_FORM_VALIDATIONS.BASE,
+  payload: { formPayload },
+});
+
+export const fetchRealtimeValidationsBegin = () => ({
+  type: REGISTER_FORM_VALIDATIONS.BEGIN,
+});
+
+export const fetchRealtimeValidationsSuccess = (validations) => ({
+  type: REGISTER_FORM_VALIDATIONS.SUCCESS,
+  payload: { validations },
+});
+
+export const fetchRealtimeValidationsFailure = () => ({
+  type: REGISTER_FORM_VALIDATIONS.FAILURE,
+});
+
+// Set email field frontend validations
+export const setEmailSuggestionInStore = (emailSuggestion) => ({
+  type: REGISTER_SET_EMAIL_SUGGESTIONS,
+  payload: { emailSuggestion },
+});
+
+// Register
+export const registerNewUser = registrationInfo => ({
+  type: REGISTER_NEW_USER.BASE,
+  payload: { registrationInfo },
+});
+
+export const registerNewUserBegin = () => ({
+  type: REGISTER_NEW_USER.BEGIN,
+});
+
+export const registerNewUserSuccess = (authenticatedUser, redirectUrl, success) => ({
+  type: REGISTER_NEW_USER.SUCCESS,
+  payload: { authenticatedUser, redirectUrl, success },
+
+});
+
+export const registerNewUserFailure = (error) => ({
+  type: REGISTER_NEW_USER.FAILURE,
+  payload: { ...error },
+});
+
+export const clearUsernameSuggestions = () => ({
+  type: REGISTER_CLEAR_USERNAME_SUGGESTIONS,
+});
+
+export const clearRegistrationBackendError = (fieldName) => ({
+  type: REGISTRATION_CLEAR_BACKEND_ERROR,
+  payload: fieldName,
+});
+
+export const setCountryFromThirdPartyAuthContext = (countryCode) => ({
+  type: REGISTER_SET_COUNTRY_CODE,
+  payload: { countryCode },
+});
+
+export const setUserPipelineDataLoaded = (value) => ({
+  type: REGISTER_SET_USER_PIPELINE_DATA_LOADED,
+  payload: { value },
+});

package/src/register/data/constants.js

@@ -0,0 +1,13 @@
+// Registration Fields
+export const FIELDS = {
+  COUNTRY: 'country',
+  HONOR_CODE: 'honor_code',
+  TERMS_OF_SERVICE: 'terms_of_service',
+};
+
+// Registration Error Codes
+export const FORBIDDEN_REQUEST = 'forbidden-request';
+export const FORM_SUBMISSION_ERROR = 'form-submission-error';
+export const INTERNAL_SERVER_ERROR = 'internal-server-error';
+export const TPA_AUTHENTICATION_FAILURE = 'tpa-authentication-failure';
+export const TPA_SESSION_EXPIRED = 'tpa-session-expired';

package/src/register/data/reducers.js

@@ -0,0 +1,140 @@
+import {
+  BACKUP_REGISTRATION_DATA,
+  REGISTER_CLEAR_USERNAME_SUGGESTIONS,
+  REGISTER_FORM_VALIDATIONS,
+  REGISTER_NEW_USER,
+  REGISTER_SET_COUNTRY_CODE,
+  REGISTER_SET_EMAIL_SUGGESTIONS,
+  REGISTER_SET_USER_PIPELINE_DATA_LOADED,
+  REGISTRATION_CLEAR_BACKEND_ERROR,
+} from './actions';
+import {
+  DEFAULT_STATE,
+  PENDING_STATE,
+} from '../../data/constants';
+
+export const storeName = 'register';
+
+export const defaultState = {
+  backendCountryCode: '',
+  registrationError: {},
+  registrationResult: {},
+  registrationFormData: {
+    configurableFormFields: {
+      marketingEmailsOptIn: true,
+    },
+    formFields: {
+      name: '', email: '', username: '', password: '',
+    },
+    emailSuggestion: {
+      suggestion: '', type: '',
+    },
+    errors: {
+      name: '', email: '', username: '', password: '',
+    },
+  },
+  validations: null,
+  submitState: DEFAULT_STATE,
+  userPipelineDataLoaded: false,
+  usernameSuggestions: [],
+  validationApiRateLimited: false,
+  shouldBackupState: false,
+};
+
+const reducer = (state = defaultState, action = {}) => {
+  switch (action.type) {
+    case BACKUP_REGISTRATION_DATA.BASE:
+      return {
+        ...state,
+        shouldBackupState: true,
+      };
+    case BACKUP_REGISTRATION_DATA.BEGIN:
+      return {
+        ...state,
+        usernameSuggestions: state.usernameSuggestions,
+        registrationFormData: { ...action.payload },
+        userPipelineDataLoaded: state.userPipelineDataLoaded,
+      };
+    case REGISTER_NEW_USER.BEGIN:
+      return {
+        ...state,
+        submitState: PENDING_STATE,
+        registrationError: {},
+      };
+    case REGISTER_NEW_USER.SUCCESS: {
+      return {
+        ...state,
+        registrationResult: action.payload,
+      };
+    }
+    case REGISTER_NEW_USER.FAILURE: {
+      const { usernameSuggestions } = action.payload;
+      return {
+        ...state,
+        registrationError: { ...action.payload },
+        submitState: DEFAULT_STATE,
+        validations: null,
+        usernameSuggestions: usernameSuggestions || state.usernameSuggestions,
+      };
+    }
+    case REGISTRATION_CLEAR_BACKEND_ERROR: {
+      const registrationErrorTemp = state.registrationError;
+      delete registrationErrorTemp[action.payload];
+      return {
+        ...state,
+        registrationError: { ...registrationErrorTemp },
+      };
+    }
+    case REGISTER_FORM_VALIDATIONS.SUCCESS: {
+      const { usernameSuggestions, ...validationWithoutUsernameSuggestions } = action.payload.validations;
+      return {
+        ...state,
+        validations: validationWithoutUsernameSuggestions,
+        usernameSuggestions: usernameSuggestions || state.usernameSuggestions,
+      };
+    }
+    case REGISTER_FORM_VALIDATIONS.FAILURE:
+      return {
+        ...state,
+        validationApiRateLimited: true,
+        validations: null,
+      };
+    case REGISTER_CLEAR_USERNAME_SUGGESTIONS:
+      return {
+        ...state,
+        usernameSuggestions: [],
+      };
+    case REGISTER_SET_COUNTRY_CODE: {
+      const { countryCode } = action.payload;
+      if (!state.registrationFormData.configurableFormFields.country) {
+        return {
+          ...state,
+          backendCountryCode: countryCode,
+        };
+      }
+      return state;
+    }
+    case REGISTER_SET_USER_PIPELINE_DATA_LOADED: {
+      const { value } = action.payload;
+      return {
+        ...state,
+        userPipelineDataLoaded: value,
+      };
+    }
+    case REGISTER_SET_EMAIL_SUGGESTIONS:
+      return {
+        ...state,
+        registrationFormData: {
+          ...state.registrationFormData,
+          emailSuggestion: action.payload.emailSuggestion,
+        },
+      };
+    default:
+      return {
+        ...state,
+        shouldBackupState: false,
+      };
+  }
+};
+
+export default reducer;