feat: upgrade frontend-auth with anonymous access capability (#46)

* feat: upgrade frontend-auth with anonymous access capability

BREAKING CHANGE: Uses the new api offered by frontend auth. App.apiClient no longer has methods login, logout, getDecodedAccessToken or refreshAccessToken. Refer to edx/frontend-auth#82 for more info.

* docs: typo

* docs: update redirect description

* fix: upgrade frontend-auth

Author: Adam Butterworth

docs/API.rst

@@ -495,11 +495,12 @@ Event constant: ``APP_AUTHENTICATED``
 
 The ``authentication`` phase creates an authenticated apiClient and
 makes it available at ``App.apiClient`` on the ``App`` singleton. It
-also runs ``ensureAuthenticatedUser`` from @edx/frontend-auth and will
+also runs ``getAuthenticatedUser`` from @edx/frontend-auth and will
 redirect to the login experience if the user does not have a valid
-authentication cookie. Finally, it will make authenticated user
-information available at ``App.authenticatedUser`` and
-``App.decodedAccessToken`` for later use by the application.
+authentication cookie and the ``requireAuthenticatedUser``
+option is set to true. Finally, it will make authenticated user
+information available at ``App.authenticatedUser`` for later use by the
+application.
 
 Default behavior is to redirect to a login page during this phase if the
 user is not authenticated. This effectively means that the library does

example/index.jsx

@@ -24,6 +24,6 @@ App.subscribe(APP_ERROR, (error) => {
 
 App.initialize({
   messages: [],
-  requireAuthenticatedUser: true,
+  requireAuthenticatedUser: false,
   hydrateAuthenticatedUser: true,
 });

package-lock.json

@@ -39,7 +39,7 @@
     "@commitlint/prompt": "8.1.0",
     "@commitlint/prompt-cli": "8.1.0",
     "@edx/frontend-analytics": "3.0.0",
-    "@edx/frontend-auth": "7.0.1",
+    "@edx/frontend-auth": "9.0.1",
     "@edx/frontend-build": "1.3.1",
     "@edx/frontend-i18n": "3.0.3",
     "@edx/frontend-logging": "3.0.1",
@@ -67,7 +67,7 @@
   },
   "peerDependencies": {
     "@edx/frontend-analytics": "^3.0.0",
-    "@edx/frontend-auth": "^7.0.1",
+    "@edx/frontend-auth": "^9.0.0",
     "@edx/frontend-i18n": "^3.0.3",
     "@edx/frontend-logging": "^3.0.1",
     "@edx/paragon": "^7.1.3",

package.json

@@ -2,17 +2,20 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { Router, Route } from 'react-router-dom';
 import { createBrowserHistory } from 'history';
+import { redirectToLogin } from '@edx/frontend-auth';
 
 import AuthenticatedRoute from './AuthenticatedRoute';
 import App from './App';
 import AppContext from './AppContext';
 
+jest.mock('@edx/frontend-auth', () => ({
+  redirectToLogin: jest.fn(),
+}));
+
 describe('AuthenticatedRoute', () => {
   beforeEach(() => {
-    App.apiClient = {
-      login: jest.fn(),
-    };
     App.history = createBrowserHistory();
+    redirectToLogin.mockReset();
   });
 
   it('should call login if not authenticated', () => {
@@ -29,7 +32,7 @@ describe('AuthenticatedRoute', () => {
     App.history.push('/authenticated');
     mount(component);
 
-    expect(App.apiClient.login).toHaveBeenCalledWith('http://localhost/authenticated');
+    expect(redirectToLogin).toHaveBeenCalledWith('http://localhost/authenticated');
   });
 
   it('should not call login if not the current route', () => {
@@ -46,7 +49,7 @@ describe('AuthenticatedRoute', () => {
     App.history.push('/');
     const wrapper = mount(component);
 
-    expect(App.apiClient.login).not.toHaveBeenCalled();
+    expect(redirectToLogin).not.toHaveBeenCalled();
     const element = wrapper.find('p');
     expect(element.text()).toEqual('Anonymous'); // This is just a sanity check on our setup.
   });
@@ -64,7 +67,7 @@ describe('AuthenticatedRoute', () => {
     );
     App.history.push('/authenticated');
     const wrapper = mount(component);
-    expect(App.apiClient.login).not.toHaveBeenCalled();
+    expect(redirectToLogin).not.toHaveBeenCalled();
     const element = wrapper.find('p');
     expect(element.text()).toEqual('Authenticated');
   });

src/AuthenticatedRoute.test.jsx

@@ -1,3 +1,4 @@
+import { redirectToLogin } from '@edx/frontend-auth';
 import App from '../App';
 import { camelCaseObject } from '../api';
 
@@ -18,5 +19,5 @@ function breakOnRedirectFromLogin() {
 
 export function loginRedirect() {
   breakOnRedirectFromLogin();
-  App.apiClient.login(global.location.href);
+  redirectToLogin(global.location.href);
 }

src/data/service.js

@@ -1,32 +1,24 @@
 /* eslint-disable no-param-reassign */
-import { getAuthenticatedAPIClient } from '@edx/frontend-auth';
+import { getAuthenticatedApiClient, getAuthenticatedUser } from '@edx/frontend-auth';
 
 import { loginRedirect, getAuthenticatedUserAccount } from '../data/service';
 
 export default async function authentication(app) {
-  app.apiClient = getAuthenticatedAPIClient({
+  app.apiClient = getAuthenticatedApiClient({
     appBaseUrl: app.config.BASE_URL,
-    authBaseUrl: app.config.LMS_BASE_URL,
     accessTokenCookieName: app.config.ACCESS_TOKEN_COOKIE_NAME,
-    userInfoCookieName: app.config.USER_INFO_COOKIE_NAME,
     csrfTokenApiPath: app.config.CSRF_TOKEN_API_PATH,
     loginUrl: app.config.LOGIN_URL,
     logoutUrl: app.config.LOGOUT_URL,
     refreshAccessTokenEndpoint: app.config.REFRESH_ACCESS_TOKEN_ENDPOINT,
     loggingService: app.loggingService,
   });
 
-  // NOTE: Remove this "attach" line once frontend-auth gets its own getAuthenticatedUser method.
-  // eslint-disable-next-line no-use-before-define
-  attachGetAuthenticatedUser(app.apiClient);
-
   // Get a valid access token for authenticated API access.
-  const { authenticatedUser, decodedAccessToken } =
-    await app.apiClient.getAuthenticatedUser(global.location.pathname);
+  const authenticatedUser = await getAuthenticatedUser();
 
   // Once we have refreshed our authentication, extract it for use later.
   app.authenticatedUser = authenticatedUser;
-  app.decodedAccessToken = decodedAccessToken;
 
   if (app.requireAuthenticatedUser && app.authenticatedUser === null) {
     loginRedirect();
@@ -38,72 +30,3 @@ export default async function authentication(app) {
     });
   }
 }
-
-// NOTE: Remove everything below here when frontend-auth gets its own getAuthenticatedUser method.
-/* istanbul ignore next */
-function getAuthenticatedUserFromDecodedAccessToken(decodedAccessToken) {
-  /* istanbul ignore next */
-  if (decodedAccessToken === null) {
-    throw new Error('Decoded access token is required to get authenticated user.');
-  }
-
-  return {
-    userId: decodedAccessToken.user_id,
-    username: decodedAccessToken.preferred_username,
-    roles: decodedAccessToken.roles ? decodedAccessToken.roles : [],
-    administrator: decodedAccessToken.administrator,
-  };
-}
-/* istanbul ignore next */
-function formatAuthenticatedResponse(decodedAccessToken) {
-  return {
-    authenticatedUser: getAuthenticatedUserFromDecodedAccessToken(decodedAccessToken),
-    decodedAccessToken,
-  };
-}
-/* istanbul ignore next */
-function attachGetAuthenticatedUser(httpClient) {
-  // Bail if there's a real implementation of getAuthenticatedUser
-  if (httpClient.getAuthenticatedUser !== undefined) {
-    return;
-  }
-
-  httpClient.getAuthenticatedUser = () =>
-    new Promise((resolve, reject) => {
-      // Validate auth-related cookies are in a consistent state.
-      const accessToken = httpClient.getDecodedAccessToken();
-      const tokenExpired = httpClient.isAccessTokenExpired(accessToken);
-      if (!tokenExpired) {
-        // We already have valid JWT cookies
-        resolve(formatAuthenticatedResponse(accessToken));
-      }
-      // Attempt to refresh the JWT cookies.
-      httpClient
-        .refreshAccessToken()
-        // Successfully refreshed the JWT cookies
-        .then((response) => {
-          const refreshedAccessToken = httpClient.getDecodedAccessToken();
-
-          if (refreshedAccessToken === null) {
-            // This should never happen, but it does. See ARCH-948 for past research into why.
-            const errorMessage = 'Access token is null after supposedly successful refresh.';
-            httpClient.loggingService.logError(`frontend-auth: ${errorMessage}`, {
-              previousAccessToken: accessToken,
-              axiosResponse: response,
-            });
-            reject(new Error(errorMessage));
-            return;
-          }
-
-          resolve(formatAuthenticatedResponse(refreshedAccessToken));
-        }).catch((e) => {
-          if (e.response.status === 401) {
-            return resolve({
-              authenticatedUser: null,
-              decodedAccessToken: null,
-            });
-          }
-          return reject(e);
-        });
-    });
-}