Feature: msal upgrade

.github/workflows/azure-static-web-apps-jolly-sand-0ac78c710.yml

@@ -19,6 +19,8 @@ jobs:
         with:
           submodules: true
       - name: Build And Deploy
+        env:
+          REACT_APP_CLIENT_ID: ${{ secrets.REACT_APP_CLIENT_ID }}
         id: builddeploy
         uses: Azure/static-web-apps-deploy@v0.0.1-preview
         with:

jest.config.js

@@ -7,6 +7,9 @@ module.exports = {
     "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
     "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
   ],
+  globals: {
+    crypto: require("crypto")
+  },
   testEnvironment: "jsdom",
   testURL: "http://localhost",
   transform: {

package.json

@@ -3,6 +3,7 @@
   "version": "4.4.2",
   "private": true,
   "dependencies": {
+    "@azure/msal-browser": "2.12.0",
     "@babel/core": "7.12.13",
     "@babel/eslint-parser": "7.12.13",
     "@microsoft/applicationinsights-react-js": "2.3.1",
@@ -48,7 +49,6 @@
     "mini-css-extract-plugin": "0.5.0",
     "monaco-editor": "0.15.6",
     "monaco-editor-webpack-plugin": "1.7.0",
-    "msal": "1.2.1",
     "node-sass": "4.14.1",
     "office-ui-fabric-react": "7.121.2",
     "optimize-css-assets-webpack-plugin": "5.0.1",
@@ -124,6 +124,7 @@
     "babel-jest": "26.6.3",
     "braces": "2.3.1",
     "chromedriver": "^88.0.0",
+    "crypto": "1.0.1",
     "enzyme": "3.9.0",
     "enzyme-adapter-react-16": "1.9.1",
     "eslint": "5.16.0",

src/app/services/actions/auth-action-creators.ts

@@ -1,6 +1,6 @@
+import { authenticationWrapper } from '../../../modules/authentication';
 import { IAction } from '../../../types/action';
 import { Mode } from '../../../types/enums';
-import { logOut, logOutPopUp } from '../graph-client/msal-service';
 import { GET_AUTH_TOKEN_SUCCESS, GET_CONSENTED_SCOPES_SUCCESS, LOGOUT_SUCCESS } from '../redux-constants';
 
 export function getAuthTokenSuccess(response: boolean): any {
@@ -27,9 +27,9 @@ export function signOut() {
   return (dispatch: Function, getState: Function) => {
     const { graphExplorerMode } = getState();
     if (graphExplorerMode === Mode.Complete) {
-      logOut();
+      authenticationWrapper.logOut();
     } else {
-      logOutPopUp();
+      authenticationWrapper.logOutPopUp();
     }
     dispatch(signOutSuccess(false));
   };

src/app/services/actions/permissions-action-creator.ts

@@ -1,14 +1,18 @@
 import { SeverityLevel } from '@microsoft/applicationinsights-web';
+import { MessageBarType } from 'office-ui-fabric-react';
+
 import { geLocale } from '../../../appLocale';
+import { authenticationWrapper } from '../../../modules/authentication';
 import { componentNames, errorTypes, telemetry } from '../../../telemetry';
 import { IAction } from '../../../types/action';
 import { IQuery } from '../../../types/query-runner';
 import { IRequestOptions } from '../../../types/request';
 import { sanitizeQueryUrl } from '../../utils/query-url-sanitization';
 import { parseSampleUrl } from '../../utils/sample-url-generation';
-import { acquireNewAccessToken } from '../graph-client/msal-service';
+import { translateMessage } from '../../utils/translate-messages';
 import { FETCH_SCOPES_ERROR, FETCH_SCOPES_PENDING, FETCH_SCOPES_SUCCESS } from '../redux-constants';
 import { getAuthTokenSuccess, getConsentedScopesSuccess } from './auth-action-creators';
+import { setQueryResponseStatus } from './query-status-action-creator';
 
 export function fetchScopesSuccess(response: object): IAction {
   return {
@@ -88,10 +92,20 @@ export function fetchScopes(query?: IQuery): Function {
 
 export function consentToScopes(scopes: string[]): Function {
   return async (dispatch: Function) => {
-    const authResponse = await acquireNewAccessToken(scopes);
-    if (authResponse && authResponse.accessToken) {
-      dispatch(getAuthTokenSuccess(true));
-      dispatch(getConsentedScopesSuccess(authResponse.scopes));
+    try {
+      const authResponse = await authenticationWrapper.consentToScopes(scopes);
+      if (authResponse && authResponse.accessToken) {
+        dispatch(getAuthTokenSuccess(true));
+        dispatch(getConsentedScopesSuccess(authResponse.scopes));
+      }
+    } catch (error) {
+      const { errorCode } = error;
+      dispatch(setQueryResponseStatus({
+        statusText: translateMessage('Scope consent failed'),
+        status: errorCode,
+        ok: false,
+        messageType: MessageBarType.error
+      }))
     }
   };
 }

src/app/services/actions/query-action-creator-util.ts

@@ -7,8 +7,7 @@ import { IAction } from '../../../types/action';
 import { ContentType } from '../../../types/enums';
 import { IQuery } from '../../../types/query-runner';
 import { IRequestOptions } from '../../../types/request';
-import { GraphClient } from '../graph-client';
-import { authProvider } from '../graph-client/msal-agent';
+import { authProvider, GraphClient } from '../graph-client';
 import { DEFAULT_USER_SCOPES, GRAPH_API_SANDBOX_URL } from '../graph-constants';
 import { QUERY_GRAPH_SUCCESS } from '../redux-constants';
 import { queryRunningStatus } from './query-loading-action-creators';

src/app/services/graph-client/GraphAuthenticationProvider.ts

@@ -0,0 +1,17 @@
+import { AuthenticationProvider } from '@microsoft/microsoft-graph-client';
+
+import { authenticationWrapper } from '../../../modules/authentication';
+
+export class GraphAuthenticationProvider implements AuthenticationProvider {
+  /**
+   * getAccessToken
+   */
+  public async getAccessToken(): Promise<string> {
+    try {
+      const authResult = await authenticationWrapper.getToken();
+      return authResult.accessToken;
+    } catch (error) {
+      throw error;
+    }
+  }
+}

src/app/services/graph-client/graph-client.ts

@@ -1,6 +1,6 @@
 import { Client } from '@microsoft/microsoft-graph-client';
 import 'isomorphic-fetch';
-import { authProvider } from './msal-agent';
+import { authProvider } from './';
 
 export class GraphClient {
   private static client: Client;

src/app/services/graph-client/index.ts

@@ -1 +1,4 @@
+import { GraphAuthenticationProvider } from './GraphAuthenticationProvider';
+
 export { GraphClient } from './graph-client';
+export const authProvider = new GraphAuthenticationProvider();