@openedx/frontend-base 1.0.0-alpha.12 → 1.0.0-alpha.13

package/runtime/auth/AxiosJwtTokenService.js

@@ -1,134 +0,0 @@
-import axios from 'axios';
-import jwtDecode from 'jwt-decode';
-import Cookies from 'universal-cookie';
-import createRetryInterceptor from './interceptors/createRetryInterceptor';
-import { logFrontendAuthError, processAxiosErrorAndThrow } from './utils';
-
-export default class AxiosJwtTokenService {
-  static isTokenExpired(token) {
-    return !token || token.exp < Date.now() / 1000;
-  }
-
-  constructor(loggingService, tokenCookieName, tokenRefreshBaseUrl, tokenRefreshPath) {
-    this.loggingService = loggingService;
-    this.tokenCookieName = tokenCookieName;
-    this.tokenRefreshBaseUrl = tokenRefreshBaseUrl;
-    this.tokenRefreshPath = tokenRefreshPath;
-
-    this.httpClient = axios.create();
-    // Set withCredentials to true. Enables cross-site Access-Control requests
-    // to be made using cookies, authorization headers or TLS client
-    // certificates. More on MDN:
-    // https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials
-    this.httpClient.defaults.withCredentials = true;
-    // Add retries to this axios instance
-    this.httpClient.interceptors.response.use(
-      response => response,
-      createRetryInterceptor({ httpClient: this.httpClient }),
-    );
-
-    this.cookies = new Cookies();
-    this.refreshRequestPromises = {};
-  }
-
-  getHttpClient() {
-    return this.httpClient;
-  }
-
-  decodeJwtCookie() {
-    const cookieValue = this.cookies.get(this.tokenCookieName);
-
-    if (cookieValue) {
-      try {
-        return jwtDecode(cookieValue);
-      } catch (e) {
-        const error = Object.create(e);
-        error.message = 'Error decoding JWT token';
-        error.customAttributes = { cookieValue };
-        throw error;
-      }
-    }
-
-    return null;
-  }
-
-  refresh() {
-    let responseServerEpochSeconds = 0;
-
-    if (this.refreshRequestPromises[this.tokenCookieName] === undefined) {
-      const makeRefreshRequest = async () => {
-        let axiosResponse;
-        try {
-          try {
-            axiosResponse = await this.httpClient.post(`${this.tokenRefreshBaseUrl}${this.tokenRefreshPath}`);
-            if (axiosResponse.data?.response_epoch_seconds) {
-              responseServerEpochSeconds = axiosResponse.data.response_epoch_seconds;
-            }
-          } catch (error) {
-            processAxiosErrorAndThrow(error);
-          }
-        } catch (error) {
-          const userIsUnauthenticated = error.response && error.response.status === 401;
-          if (userIsUnauthenticated) {
-            // Clean up the cookie if it exists to eliminate any situation
-            // where the cookie is not expired but the jwt is expired.
-            this.cookies.remove(this.tokenCookieName);
-            const decodedJwtToken = null;
-            return decodedJwtToken;
-          }
-
-          // TODO: Network timeouts and other problems will end up in
-          // this block of code. We could add logic for retrying token
-          // refreshes if we wanted to.
-          throw error;
-        }
-
-        const browserEpochSeconds = Date.now() / 1000;
-        const browserDriftSeconds = responseServerEpochSeconds > 0
-          ? Math.abs(browserEpochSeconds - responseServerEpochSeconds)
-          : null;
-
-        const decodedJwtToken = this.decodeJwtCookie();
-
-        if (!decodedJwtToken) {
-          // This is an unexpected case. The refresh endpoint should set the
-          //   cookie that is needed.
-          // For more details, see:
-          //   docs/decisions/0005-token-null-after-successful-refresh.rst
-          const error = new Error('Access token is still null after successful refresh.');
-          error.customAttributes = { axiosResponse, browserDriftSeconds, browserEpochSeconds };
-          throw error;
-        }
-
-        return decodedJwtToken;
-      };
-
-      this.refreshRequestPromises[this.tokenCookieName] = makeRefreshRequest().finally(() => {
-        delete this.refreshRequestPromises[this.tokenCookieName];
-      });
-    }
-
-    return this.refreshRequestPromises[this.tokenCookieName];
-  }
-
-  async getJwtToken(forceRefresh = false) {
-    try {
-      const decodedJwtToken = this.decodeJwtCookie(this.tokenCookieName);
-      if (!AxiosJwtTokenService.isTokenExpired(decodedJwtToken) && !forceRefresh) {
-        return decodedJwtToken;
-      }
-    } catch (e) {
-      // Log unexpected error and continue with attempt to refresh it.
-      // TODO: Fix these.  They're still using loggingService as a singleton.
-      logFrontendAuthError(this.loggingService, e);
-    }
-
-    try {
-      return await this.refresh();
-    } catch (e) {
-      // TODO: Fix these.  They're still using loggingService as a singleton.
-      logFrontendAuthError(this.loggingService, e);
-      throw e;
-    }
-  }
-}

package/runtime/auth/LocalForageCache.js

@@ -1,76 +0,0 @@
-import axios from 'axios';
-import {
-  buildStorage,
-  defaultHeaderInterpreter,
-  defaultKeyGenerator,
-  setupCache,
-} from 'axios-cache-interceptor';
-import localforage from 'localforage';
-import memoryDriver from 'localforage-memoryStorageDriver';
-
-/**
- * Async function to configure localforage and setup the cache
- *
- * @returns {Promise} A promise that, when resolved, returns an axios instance configured to
- * use localforage as a cache.
- */
-export default async function configureCache() {
-  // Register the imported `memoryDriver` to `localforage`
-  await localforage.defineDriver(memoryDriver);
-
-  // Create `localforage` instance
-  const forageStore = localforage.createInstance({
-    // List of drivers used
-    driver: [
-      localforage.INDEXEDDB,
-      localforage.LOCALSTORAGE,
-      memoryDriver._driver,
-    ],
-    name: 'edx-cache',
-  });
-
-  const forageStoreAdapter = buildStorage({
-    async find(key) {
-      const result = await forageStore.getItem(`axios-cache:${key}`);
-      return JSON.parse(result);
-    },
-
-    async set(key, value) {
-      await forageStore.setItem(`axios-cache:${key}`, JSON.stringify(value));
-    },
-
-    async remove(key) {
-      await forageStore.removeItem(`axios-cache:${key}`);
-    },
-  });
-
-  // only GET methods are cached by default
-  return setupCache(
-    // axios instance
-    axios.create(),
-    {
-      ttl: 5 * 60 * 1000, // default maxAge of 5 minutes
-      // The storage to save the cache data. There are more available by default.
-      //
-      // https://axios-cache-interceptor.js.org/#/pages/storages
-      storage: forageStoreAdapter,
-
-      // The mechanism to generate a unique key for each request.
-      //
-      // https://axios-cache-interceptor.js.org/#/pages/request-id
-      generateKey: defaultKeyGenerator,
-
-      // The mechanism to interpret headers (when cache.interpretHeader is true).
-      //
-      // https://axios-cache-interceptor.js.org/#/pages/global-configuration?id=headerinterpreter
-      headerInterpreter: defaultHeaderInterpreter,
-
-      // The function that will receive debug information.
-      // NOTE: For this to work, you need to enable development mode.
-      //
-      // https://axios-cache-interceptor.js.org/#/pages/development-mode
-      // https://axios-cache-interceptor.js.org/#/pages/global-configuration?id=debug
-      debug: console.log,
-    },
-  );
-}

package/runtime/auth/MockAuthService.js

@@ -1,278 +0,0 @@
-import axios from 'axios';
-import PropTypes from 'prop-types';
-
-const userPropTypes = PropTypes.shape({
-  userId: PropTypes.string.isRequired,
-  username: PropTypes.string.isRequired,
-  roles: PropTypes.arrayOf(PropTypes.string),
-  administrator: PropTypes.boolean,
-});
-
-const optionsPropTypes = {
-  config: PropTypes.shape({
-    baseUrl: PropTypes.string.isRequired,
-    lmsBaseUrl: PropTypes.string.isRequired,
-    loginUrl: PropTypes.string.isRequired,
-    logoutUrl: PropTypes.string.isRequired,
-    refreshAccessTokenApiPath: PropTypes.string.isRequired,
-    accessTokenCookieName: PropTypes.string.isRequired,
-    csrfTokenApiPath: PropTypes.string.isRequired,
-  }).isRequired,
-  loggingService: PropTypes.shape({
-    logError: PropTypes.func.isRequired,
-    logInfo: PropTypes.func.isRequired,
-  }).isRequired,
-  // The absence of authenticatedUser means the user is anonymous.
-  authenticatedUser: userPropTypes,
-  // Must be at least a valid user, but may have other fields.
-  hydratedAuthenticatedUser: userPropTypes,
-};
-
-/**
- * The MockAuthService class mocks authenticated user-fetching logic and allows for manually
- * setting user data.  It is compatible with axios-mock-adapter to wrap its HttpClients so that
- * they can be mocked for testing.
- *
- * It wraps all methods of the service with Jest mock functions (jest.fn()).  This allows test code
- * to assert expectations on all functions of the service while preserving sensible behaviors.  For
- * instance, the login/logout methods related to redirecting maintain their real behavior.
- *
- * This service is NOT suitable for use in an application itself - only tests.  It depends on Jest,
- * which should only be a dev dependency of your project.  You don't want to pull the entire suite
- * of test dependencies into your application at runtime, probably even in your dev server.
- *
- * In a test where you would like to mock out API requests - perhaps from a redux-thunk function -
- * you could do the following to set up a MockAuthService for your test:
- *
- * ```
- * import { getSiteConfig, mergeSiteConfig, configureAuth, MockAuthService } from '@openedx/frontend-base';
- * import MockAdapter from 'axios-mock-adapter';
- *
- * const mockLoggingService = {
- *   logInfo: jest.fn(),
- *   logError: jest.fn(),
- * };
- * mergeSiteConfig({
- *   authenticatedUser: {
- *     userId: 'abc123',
- *     username: 'Mock User',
- *     roles: [],
- *     administrator: false,
- *   },
- * });
- * configureAuth(MockAuthService, { config: getSiteConfig(), loggingService: mockLoggingService });
- * const mockAdapter = new MockAdapter(getAuthenticatedHttpClient());
- * // Mock calls for your tests.  This configuration can be done in any sort of test setup.
- * mockAdapter.onGet(...);
- * ```
- *
- * Also see the `initializeMockApp` function which also automatically uses mock services for
- * Logging and Analytics.
- *
- * @implements {AuthService}
- * @memberof module:Auth
- */
-class MockAuthService {
-  /**
-   * @param {Object} options
-   * @param {Object} options.config
-   * @param {string} options.config.baseUrl
-   * @param {string} options.config.lmsBaseUrl
-   * @param {string} options.config.loginUrl
-   * @param {string} options.config.logoutUrl
-   * @param {string} options.config.refreshAccessTokenApiPath
-   * @param {string} options.config.accessTokenCookieName
-   * @param {string} options.config.csrfTokenApiPath
-   * @param {Object} options.loggingService requires logError and logInfo methods
-   */
-  constructor(options) {
-    this.authenticatedHttpClient = null;
-    this.httpClient = null;
-
-    PropTypes.checkPropTypes(optionsPropTypes, options, 'options', 'AuthService');
-
-    this.config = options.config;
-    this.loggingService = options.loggingService;
-
-    // Mock user
-    this.authenticatedUser = null;
-    this.hydratedAuthenticatedUser = {};
-
-    this.authenticatedHttpClient = axios.create();
-    this.httpClient = axios.create();
-  }
-
-  /**
-   * A Jest mock function (jest.fn())
-   *
-   * Applies middleware to the axios instances in this service.
-   *
-   * @param {Array} middleware Middleware to apply.
-   */
-  applyMiddleware(middleware = []) {
-    const clients = [
-      this.authenticatedHttpClient, this.httpClient,
-      this.cachedAuthenticatedHttpClient, this.cachedHttpClient,
-    ];
-    try {
-      (middleware).forEach((middlewareFn) => {
-        clients.forEach((client) => client && middlewareFn(client));
-      });
-    } catch (error) {
-      throw new Error(`Failed to apply middleware: ${error.message}.`);
-    }
-  }
-
-  /**
-   * A Jest mock function (jest.fn())
-   *
-   * Gets the authenticated HTTP client instance, which is an axios client wrapped in
-   * MockAdapter from axios-mock-adapter.
-   *
-   * @returns {HttpClient} An HttpClient wrapped in MockAdapter.
-   */
-  getAuthenticatedHttpClient = jest.fn(() => this.authenticatedHttpClient);
-
-  /**
-   * A Jest mock function (jest.fn())
-   *
-   * Gets the unauthenticated HTTP client instance, which is an axios client wrapped in
-   * MockAdapter from axios-mock-adapter.
-   *
-   * @returns {HttpClient} An HttpClient wrapped in MockAdapter.
-   */
-  getHttpClient = jest.fn(() => this.httpClient);
-
-  /**
-   * A Jest mock function (jest.fn())
-   *
-   * Builds a URL to the login page with a post-login redirect URL attached as a query parameter.
-   *
-   * ```
-   * const url = getLoginRedirectUrl('http://localhost/mypage');
-   * console.log(url); // http://localhost/login?next=http%3A%2F%2Flocalhost%2Fmypage
-   * ```
-   *
-   * @param {string} redirectUrl The URL the user should be redirected to after logging in.
-   */
-  getLoginRedirectUrl = jest.fn(
-    (redirectUrl = this.config.baseUrl) => `${this.config.loginUrl}?next=${encodeURIComponent(redirectUrl)}`,
-  );
-
-  /**
-   * A Jest mock function (jest.fn())
-   *
-   * Redirects the user to the logout page in the real implementation.  Is a no-op here.
-   *
-   * @param {string} redirectUrl The URL the user should be redirected to after logging in.
-   */
-  redirectToLogin = jest.fn((redirectUrl = this.config.baseUrl) => {
-    // Do nothing after getting the URL - this preserves the calls properly, but doesn't redirect.
-    this.getLoginRedirectUrl(redirectUrl);
-  });
-
-  /**
-   * A Jest mock function (jest.fn())
-   *
-   * Builds a URL to the logout page with a post-logout redirect URL attached as a query parameter.
-   *
-   * ```
-   * const url = getLogoutRedirectUrl('http://localhost/mypage');
-   * console.log(url); // http://localhost/logout?next=http%3A%2F%2Flocalhost%2Fmypage
-   * ```
-   *
-   * @param {string} redirectUrl The URL the user should be redirected to after logging out.
-   */
-  getLogoutRedirectUrl = jest.fn((redirectUrl = this.config.baseUrl) => `${this.config.logoutUrl}?redirect_url=${encodeURIComponent(redirectUrl)}`);
-
-  /**
-   * A Jest mock function (jest.fn())
-   *
-   * Redirects the user to the logout page in the real implementation.  Is a no-op here.
-   *
-   * @param {string} redirectUrl The URL the user should be redirected to after logging out.
-   */
-  redirectToLogout = jest.fn((redirectUrl = this.config.baseUrl) => {
-    // Do nothing after getting the URL - this preserves the calls properly, but doesn't redirect.
-    this.getLogoutRedirectUrl(redirectUrl);
-  });
-
-  /**
-   * A Jest mock function (jest.fn())
-   *
-   * If it exists, returns the user data representing the currently authenticated user. If the
-   * user is anonymous, returns null.
-   *
-   * @returns {UserData|null}
-   */
-  getAuthenticatedUser = jest.fn(() => this.authenticatedUser);
-
-  /**
-   * A Jest mock function (jest.fn())
-   *
-   * Sets the authenticated user to the provided value.
-   *
-   * @param {UserData} authUser
-   */
-  setAuthenticatedUser = jest.fn((authUser) => {
-    this.authenticatedUser = authUser;
-  });
-
-  /**
-   * A Jest mock function (jest.fn())
-   *
-   * Returns the current authenticated user details, as supplied in the `authenticatedUser` field
-   * of the config options.  Resolves to null if the user is unauthenticated / the config option
-   * has not been set.
-   *
-   * @returns {UserData|null} Resolves to the user's access token if they are
-   * logged in.
-   */
-  fetchAuthenticatedUser = jest.fn(() => this.getAuthenticatedUser());
-
-  /**
-   * A Jest mock function (jest.fn())
-   *
-   * Ensures a user is authenticated. It will redirect to login when not authenticated.
-   *
-   * @param {string} [redirectUrl=config.baseUrl] to return user after login when not
-   * authenticated.
-   * @returns {UserData|null} Resolves to the user's access token if they are
-   * logged in.
-   */
-  ensureAuthenticatedUser = jest.fn((redirectUrl = this.config.baseUrl) => {
-    this.fetchAuthenticatedUser();
-
-    if (this.getAuthenticatedUser() === null) {
-      // The user is not authenticated, send them to the login page.
-      this.redirectToLogin(redirectUrl);
-    }
-
-    return this.getAuthenticatedUser();
-  });
-
-  /**
-   * A Jest mock function (jest.fn())
-   *
-   * Adds the user data supplied in the `hydratedAuthenticatedUser` config option into the object
-   * returned by `getAuthenticatedUser`.  This emulates the behavior of a real auth service which
-   * would make a request to fetch this data prior to merging it in.
-   *
-   * ```
-   * console.log(authenticatedUser); // Will be sparse and only contain basic information.
-   * await hydrateAuthenticatedUser()
-   * const authenticatedUser = getAuthenticatedUser();
-   * console.log(authenticatedUser); // Will contain additional user information
-   * ```
-   *
-   * @returns {Promise<null>}
-   */
-  hydrateAuthenticatedUser = jest.fn(() => {
-    const user = this.getAuthenticatedUser();
-    if (user !== null) {
-      this.setAuthenticatedUser({ ...user, ...this.hydratedAuthenticatedUser });
-    }
-  });
-}
-
-export default MockAuthService;

package/runtime/auth/index.ts

@@ -1,19 +0,0 @@
-export { default as AxiosJwtAuthService } from './AxiosJwtAuthService';
-export {
-  AUTHENTICATED_USER_CHANGED,
-  AUTHENTICATED_USER_TOPIC,
-  configureAuth,
-  ensureAuthenticatedUser,
-  fetchAuthenticatedUser,
-  getAuthenticatedHttpClient,
-  getAuthenticatedUser,
-  getAuthService,
-  getHttpClient,
-  getLoginRedirectUrl,
-  getLogoutRedirectUrl,
-  hydrateAuthenticatedUser,
-  redirectToLogin,
-  redirectToLogout,
-  setAuthenticatedUser
-} from './interface';
-export { default as MockAuthService } from './MockAuthService';

package/runtime/auth/interceptors/createCsrfTokenProviderInterceptor.js

@@ -1,36 +0,0 @@
-const createCsrfTokenProviderInterceptor = (options) => {
-  const { csrfTokenService, csrfTokenApiPath, shouldSkip } = options;
-
-  // Creating the interceptor inside this closure to
-  // maintain reference to the options supplied.
-  const interceptor = async (axiosRequestConfig) => {
-    if (shouldSkip(axiosRequestConfig)) {
-      return axiosRequestConfig;
-    }
-    const { url } = axiosRequestConfig;
-    let csrfToken;
-
-    // Important: the job of this interceptor is to get a csrf token and update
-    // the original request configuration. Errors thrown getting the csrf token
-    // should contain the original request config. This allows other interceptors
-    // (namely our retry request interceptor below) to access the original request
-    // and handle it appropriately
-    try {
-      csrfToken = await csrfTokenService.getCsrfToken(url, csrfTokenApiPath);
-    } catch (error) {
-      const requestError = Object.create(error);
-      requestError.message = `[getCsrfToken] ${requestError.message}`;
-      // Important: return the original axios request config
-      requestError.config = axiosRequestConfig;
-      return Promise.reject(requestError);
-    }
-
-    const CSRF_HEADER_NAME = 'X-CSRFToken';
-    axiosRequestConfig.headers[CSRF_HEADER_NAME] = csrfToken;
-    return axiosRequestConfig;
-  };
-
-  return interceptor;
-};
-
-export default createCsrfTokenProviderInterceptor;

package/runtime/auth/interceptors/createJwtTokenProviderInterceptor.js

@@ -1,37 +0,0 @@
-const createJwtTokenProviderInterceptor = (options) => {
-  const {
-    jwtTokenService,
-    shouldSkip,
-  } = options;
-
-  // Creating the interceptor inside this closure to
-  // maintain reference to the options supplied.
-  const interceptor = async (axiosRequestConfig) => {
-    if (shouldSkip(axiosRequestConfig)) {
-      return axiosRequestConfig;
-    }
-
-    // Important: the job of this interceptor is to refresh a jwt token and update
-    // the original request configuration. Errors thrown from fetching the jwt
-    // should contain the original request config. This allows other interceptors
-    // (namely our retry request interceptor below) to access the original request
-    // and handle it appropriately
-    try {
-      await jwtTokenService.getJwtToken();
-    } catch (error) {
-      const requestError = Object.create(error);
-      requestError.message = `[getJwtToken] ${requestError.message}`;
-      // Important: return the original axios request config
-      requestError.config = axiosRequestConfig;
-      return Promise.reject(requestError);
-    }
-
-    // Add the proper headers to tell the server to look for the jwt cookie
-    axiosRequestConfig.headers['USE-JWT-COOKIE'] = true;
-    return axiosRequestConfig;
-  };
-
-  return interceptor;
-};
-
-export default createJwtTokenProviderInterceptor;

package/runtime/auth/interceptors/createProcessAxiosRequestErrorInterceptor.js

@@ -1,20 +0,0 @@
-import { processAxiosError } from '../utils';
-
-const createProcessAxiosRequestErrorInterceptor = (options) => {
-  const { loggingService } = options;
-
-  // Creating the interceptor inside this closure to
-  // maintain reference to the options supplied.
-  const interceptor = async (error) => {
-    const processedError = processAxiosError(error);
-    const { httpErrorStatus } = processedError.customAttributes;
-    if (httpErrorStatus === 401 || httpErrorStatus === 403) {
-      loggingService.logInfo(processedError.message, processedError.customAttributes);
-    }
-    return Promise.reject(processedError);
-  };
-
-  return interceptor;
-};
-
-export default createProcessAxiosRequestErrorInterceptor;

package/runtime/auth/interceptors/createRetryInterceptor.js

@@ -1,74 +0,0 @@
-import axios from 'axios';
-
-// This default algorithm is a recreation of what is documented here
-// https://cloud.google.com/storage/docs/exponential-backoff
-const defaultGetBackoffMilliseconds = (nthRetry, maximumBackoffMilliseconds = 16000) => {
-  // Retry at exponential intervals (2, 4, 8, 16...)
-  const exponentialBackoffSeconds = 2 ** nthRetry;
-  // Add some randomness to avoid sending retries from separate requests all at once
-  const randomFractionOfASecond = Math.random();
-  const backoffSeconds = exponentialBackoffSeconds + randomFractionOfASecond;
-  const backoffMilliseconds = Math.round(backoffSeconds * 1000);
-  return Math.min(backoffMilliseconds, maximumBackoffMilliseconds);
-};
-
-const createRetryInterceptor = (options = {}) => {
-  const {
-    httpClient = axios.create(),
-    getBackoffMilliseconds = defaultGetBackoffMilliseconds,
-    // By default only retry outbound request failures (not responses)
-    shouldRetry = (error) => {
-      const isRequestError = !error.response && error.config;
-      return isRequestError;
-    },
-    // A per-request maxRetries can be specified in request config.
-    defaultMaxRetries = 2,
-  } = options;
-
-  const interceptor = async (error) => {
-    const { config } = error;
-
-    // If no config exists there was some other error setting up the request
-    if (!config) {
-      return Promise.reject(error);
-    }
-
-    if (!shouldRetry(error)) {
-      return Promise.reject(error);
-    }
-
-    const {
-      maxRetries = defaultMaxRetries,
-    } = config;
-
-    const retryRequest = async (nthRetry) => {
-      if (nthRetry > maxRetries) {
-        // Reject with the original error
-        return Promise.reject(error);
-      }
-
-      let retryResponse;
-
-      try {
-        const backoffDelay = getBackoffMilliseconds(nthRetry);
-        // Delay (wrapped in a promise so we can await the setTimeout)
-        await new Promise(resolve => {
-          setTimeout(resolve, backoffDelay);
-        });
-        // Make retry request
-        retryResponse = await httpClient.request(config);
-      } catch (e) {
-        return retryRequest(nthRetry + 1);
-      }
-
-      return retryResponse;
-    };
-
-    return retryRequest(1);
-  };
-
-  return interceptor;
-};
-
-export default createRetryInterceptor;
-export { defaultGetBackoffMilliseconds };