Feature: msal upgrade

package.json

@@ -3,6 +3,7 @@
   "version": "4.4.0",
   "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",

src/app/services/graph-client/auth/authentication-module.ts

@@ -0,0 +1,102 @@
+import {
+  AccountInfo,
+  AuthenticationResult, InteractionRequiredAuthError,
+  PopupRequest, PublicClientApplication, SilentRequest
+} from '@azure/msal-browser';
+
+import { geLocale } from '../../../../appLocale';
+import { AUTH_URL, DEFAULT_USER_SCOPES } from '../../graph-constants';
+
+const defaultScopes = DEFAULT_USER_SCOPES.split(' ');
+
+export class AuthenticationModule {
+
+  private msalApplication: PublicClientApplication;
+
+  constructor(msalApplication: PublicClientApplication) {
+    this.msalApplication = msalApplication;
+  }
+
+  public getAccount(): AccountInfo | undefined {
+    if (this.msalApplication) {
+      const allAccounts = this.msalApplication.getAllAccounts();
+      if (allAccounts && allAccounts.length > 0) {
+        return allAccounts[0];
+      }
+    }
+    return undefined;
+  }
+
+  public async getToken() {
+    const silentRequest = {
+      scopes: defaultScopes,
+      authority: this.getAuthority(),
+      account: this.getAccount()
+    };
+    const authResponse = await this.msalApplication.acquireTokenSilent(silentRequest);
+    return authResponse;
+  }
+
+  public async getAuthResult(scopes: string[] = [], sessionId?: string): Promise<AuthenticationResult> {
+    const userScopes = (scopes.length > 0) ? scopes : defaultScopes;
+    const silentRequest: SilentRequest = {
+      scopes: userScopes,
+      authority: this.getAuthority(),
+      account: this.getAccount()
+    };
+
+    try {
+      const authResponse: AuthenticationResult = await this.msalApplication.acquireTokenSilent(silentRequest);
+      return authResponse;
+    } catch (error) {
+      if (error instanceof InteractionRequiredAuthError || this.getAccount() === undefined) {
+        return this.loginWithInteraction(userScopes, sessionId);
+      } else {
+        throw error;
+      }
+    }
+  }
+
+  private getAuthority(): string {
+    // support for tenanted endpoint
+    const urlParams = new URLSearchParams(location.search);
+    let tenant = urlParams.get('tenant');
+
+    if (tenant === null) {
+      tenant = 'common';
+    }
+
+    return `${AUTH_URL}/${tenant}/`;
+  }
+
+  private async loginWithInteraction(userScopes: string[], sessionId?: string) {
+    const popUpRequest: PopupRequest = {
+      scopes: userScopes,
+      authority: this.getAuthority(),
+      prompt: 'select_account',
+      redirectUri: this.getCurrentUri(),
+      extraQueryParameters: { mkt: geLocale }
+    };
+
+    if (sessionId) {
+      popUpRequest.sid = sessionId;
+    }
+
+    try {
+      const authResponse: AuthenticationResult = await this.msalApplication.loginPopup(popUpRequest);
+      return authResponse;
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  /**
+   * get current uri for redirect uri purpose
+   * ref - https://github.com/AzureAD/microsoft-authentication-library-for
+   * -js/blob/9274fac6d100a6300eb2faa4c94aa2431b1ca4b0/lib/msal-browser/src/utils/BrowserUtils.ts#L49
+   */
+  private getCurrentUri(): string {
+    const currentUrl = window.location.href.split('?')[0].split('#')[0];
+    return currentUrl.toLowerCase();
+  }
+}

src/app/services/graph-client/auth/custom-authentication-provider.ts

@@ -0,0 +1,26 @@
+import { PublicClientApplication } from '@azure/msal-browser';
+import { AuthenticationProvider } from '@microsoft/microsoft-graph-client';
+
+import { AuthenticationModule } from './authentication-module';
+
+export class CustomAuthenticationProvider implements AuthenticationProvider {
+
+  private msalApplication: PublicClientApplication;
+
+  constructor(msalApplication: PublicClientApplication) {
+    this.msalApplication = msalApplication;
+  }
+
+  /**
+   * getAccessToken
+   */
+  public async getAccessToken(): Promise<string> {
+    try {
+      const authModule = new AuthenticationModule(this.msalApplication);
+      const authResult = await authModule.getAuthResult();
+      return authResult.accessToken;
+    } catch (error) {
+      throw error;
+    }
+  }
+}

src/app/services/graph-client/auth/login-type.ts

@@ -0,0 +1,16 @@
+import { LoginType } from '../../../../types/enums';
+
+/**
+ * Returns whether to load the POPUP/REDIRECT interaction
+ * @returns string
+ */
+
+export function getLoginType() {
+  const userAgent = window.navigator.userAgent;
+  const msie = userAgent.indexOf('MSIE ');
+  const msie11 = userAgent.indexOf('Trident/');
+  const msedge = userAgent.indexOf('Edge/');
+  const isIE = msie > 0 || msie11 > 0;
+  const isEdge = msedge > 0;
+  return isIE || isEdge ? LoginType.Redirect : LoginType.Popup;
+}

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

@@ -1,10 +1,6 @@
-import { ImplicitMSALAuthenticationProvider } from
-  '@microsoft/microsoft-graph-client/lib/src/ImplicitMSALAuthenticationProvider';
-import { MSALAuthenticationProviderOptions } from
-  '@microsoft/microsoft-graph-client/lib/src/MSALAuthenticationProviderOptions';
-import { UserAgentApplication } from 'msal';
-import { Configuration } from 'msal/lib-commonjs/Configuration';
-import { DEFAULT_USER_SCOPES } from '../graph-constants';
+import { Configuration, PublicClientApplication } from '@azure/msal-browser';
+
+import { CustomAuthenticationProvider } from './auth/custom-authentication-provider';
 
 function getClientIdFromWindow() {
   return (window as any).ClientId;
@@ -16,17 +12,15 @@ function getClientIdFromEnv() {
 
 const windowHasClientId = getClientIdFromWindow();
 const clientId = windowHasClientId ? getClientIdFromWindow() : getClientIdFromEnv();
-
 const configuration: Configuration = {
   auth: {
     clientId
   },
   cache: {
     cacheLocation: 'localStorage',
     storeAuthStateInCookie: true,
-  },
+  }
 };
 
-const options = new MSALAuthenticationProviderOptions(DEFAULT_USER_SCOPES.split(' '));
-export const msalApplication = new UserAgentApplication(configuration);
-export const authProvider = new ImplicitMSALAuthenticationProvider(msalApplication, options);
+export const msalApplication = new PublicClientApplication(configuration);
+export const authProvider = new CustomAuthenticationProvider(msalApplication);