Upgrade MSAL to 2.1

Refactored code as needed

Author: jasonjoh

demo/README.md

@@ -26,18 +26,14 @@ If you don't have a Microsoft account, there are a couple of options to get a fr
 
     - Set **Name** to `React Graph Tutorial`.
     - Set **Supported account types** to **Accounts in any organizational directory and personal Microsoft accounts**.
-    - Under **Redirect URI**, set the first drop-down to `Web` and set the value to `http://localhost:3000`.
+    - Under **Redirect URI**, set the first drop-down to `Single-page application (SPA)` and set the value to `http://localhost:3000`.
 
     ![A screenshot of the Register an application page](/tutorial/images/aad-register-an-app.png)
 
 1. Choose **Register**. On the **Angular Graph Tutorial** page, copy the value of the **Application (client) ID** and save it, you will need it in the next step.
 
     ![A screenshot of the application ID of the new app registration](/tutorial/images/aad-application-id.png)
 
-1. Select **Authentication** under **Manage**. Locate the **Implicit grant** section and enable **Access tokens** and **ID tokens**. Choose **Save**.
-
-    ![A screenshot of the Implicit grant section](/tutorial/images/aad-implicit-grant.png)
-
 ## Configure the sample
 
 1. Rename the `./graph-tutorial/src/Config.ts.example` file to `./graph-tutorial/src/Config.ts`.

demo/graph-tutorial/package-lock.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@azure/msal-browser": "^2.1.0",
     "@fortawesome/fontawesome-free": "^5.14.0",
     "@microsoft/microsoft-graph-client": "^2.0.0",
     "@testing-library/jest-dom": "^4.2.4",
@@ -18,7 +19,6 @@
     "bootstrap": "^4.5.2",
     "moment": "^2.27.0",
     "moment-timezone": "^0.5.31",
-    "msal": "^1.4.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",

demo/graph-tutorial/package.json

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import React from 'react';
-import { UserAgentApplication } from 'msal';
+import { PublicClientApplication } from '@azure/msal-browser';
 
 import { config } from './Config';
 import { getUserDetails } from './GraphService';
@@ -25,7 +25,7 @@ interface AuthProviderState {
 export default function withAuthProvider<T extends React.Component<AuthComponentProps>>
   (WrappedComponent: new (props: AuthComponentProps, context?: any) => T): React.ComponentClass {
   return class extends React.Component<any, AuthProviderState> {
-    private userAgentApplication: UserAgentApplication;
+    private publicClientApplication: PublicClientApplication;
 
     constructor(props: any) {
       super(props);
@@ -36,7 +36,7 @@ export default function withAuthProvider<T extends React.Component<AuthComponent
       };
 
       // Initialize the MSAL application object
-      this.userAgentApplication = new UserAgentApplication({
+      this.publicClientApplication = new PublicClientApplication({
         auth: {
           clientId: config.appId,
           redirectUri: config.redirectUri
@@ -51,9 +51,9 @@ export default function withAuthProvider<T extends React.Component<AuthComponent
     componentDidMount() {
       // If MSAL already has an account, the user
       // is already logged in
-      var account = this.userAgentApplication.getAccount();
+      const accounts = this.publicClientApplication.getAllAccounts();
 
-      if (account) {
+      if (accounts && accounts.length > 0) {
         // Enhance user object with data from Graph
         this.getUserProfile();
       }
@@ -74,11 +74,12 @@ export default function withAuthProvider<T extends React.Component<AuthComponent
     async login() {
       try {
         // Login via popup
-        await this.userAgentApplication.loginPopup(
+        await this.publicClientApplication.loginPopup(
           {
             scopes: config.scopes,
             prompt: "select_account"
           });
+
         // After login, get the user's profile
         await this.getUserProfile();
       }
@@ -92,27 +93,34 @@ export default function withAuthProvider<T extends React.Component<AuthComponent
     }
 
     logout() {
-      this.userAgentApplication.logout();
+      this.publicClientApplication.logout();
     }
 
     async getAccessToken(scopes: string[]): Promise<string> {
       try {
+        const accounts = this.publicClientApplication
+          .getAllAccounts();
+
+        if (accounts.length <= 0) throw new Error('login_required');
         // Get the access token silently
         // If the cache contains a non-expired token, this function
         // will just return the cached token. Otherwise, it will
         // make a request to the Azure OAuth endpoint to get a token
-        var silentResult = await this.userAgentApplication.acquireTokenSilent({
-          scopes: scopes
-        });
+        var silentResult = await this.publicClientApplication
+          .acquireTokenSilent({
+            scopes: scopes,
+            account: accounts[0]
+          });
 
         return silentResult.accessToken;
       } catch (err) {
         // If a silent request fails, it may be because the user needs
         // to login or grant consent to one or more of the requested scopes
         if (this.isInteractionRequired(err)) {
-          var interactiveResult = await this.userAgentApplication.acquireTokenPopup({
-            scopes: scopes
-          });
+          var interactiveResult = await this.publicClientApplication
+            .acquireTokenPopup({
+              scopes: scopes
+            });
 
           return interactiveResult.accessToken;
         } else {
@@ -181,7 +189,8 @@ export default function withAuthProvider<T extends React.Component<AuthComponent
       return (
         error.message.indexOf('consent_required') > -1 ||
         error.message.indexOf('interaction_required') > -1 ||
-        error.message.indexOf('login_required') > -1
+        error.message.indexOf('login_required') > -1 ||
+        error.message.indexOf('no_account_in_silent_request') > -1
       );
     }
   }

demo/graph-tutorial/src/AuthProvider.tsx

@@ -26,14 +26,14 @@ Before moving on, install some additional packages that you will use later:
 - [fontawesome-free](https://github.com/FortAwesome/Font-Awesome) for icons.
 - [moment](https://github.com/moment/moment) for formatting dates and times.
 - [windows-iana](https://github.com/rubenillodo/windows-iana) for translating Windows time zones to IANA format.
-- [msal](https://github.com/AzureAD/microsoft-authentication-library-for-js) for authenticating to Azure Active Directory and retrieving access tokens.
+- [msal-browser](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-browser) for authenticating to Azure Active Directory and retrieving access tokens.
 - [microsoft-graph-client](https://github.com/microsoftgraph/msgraph-sdk-javascript) for making calls to Microsoft Graph.
 
 Run the following command in your CLI.
 
 ```Shell
 npm install [email protected] @types/[email protected] [email protected] [email protected] @types/[email protected] @fortawesome/[email protected]
-npm install [email protected] [email protected] [email protected] msal@1.4.0 @microsoft/[email protected] @types/[email protected]
+npm install [email protected] [email protected] [email protected] @azure/msal[email protected].0 @microsoft/[email protected] @types/[email protected]
 ```
 
 ## Design the app

tutorial/02-create-app.md

@@ -15,14 +15,10 @@ In this exercise, you will create a new Azure AD web application registration us
 
     - Set **Name** to `React Graph Tutorial`.
     - Set **Supported account types** to **Accounts in any organizational directory and personal Microsoft accounts**.
-    - Under **Redirect URI**, set the first drop-down to `Web` and set the value to `http://localhost:3000`.
+    - Under **Redirect URI**, set the first drop-down to `Single-page application (SPA)` and set the value to `http://localhost:3000`.
 
     ![A screenshot of the Register an application page](./images/aad-register-an-app.png)
 
 1. Choose **Register**. On the **React Graph Tutorial** page, copy the value of the **Application (client) ID** and save it, you will need it in the next step.
 
     ![A screenshot of the application ID of the new app registration](./images/aad-application-id.png)
-
-1. Select **Authentication** under **Manage**. Locate the **Implicit grant** section and enable **Access tokens** and **ID tokens**. Choose **Save**.
-
-    ![A screenshot of the Implicit grant section](./images/aad-implicit-grant.png)

tutorial/03-register-app.md

@@ -19,7 +19,7 @@ In this section you'll create an authentication provider and implement sign-in a
 
     ```typescript
     import React from 'react';
-    import { UserAgentApplication } from 'msal';
+    import { PublicClientApplication } from '@azure/msal-browser';
 
     import { config } from './Config';
 
@@ -42,7 +42,7 @@ In this section you'll create an authentication provider and implement sign-in a
     export default function withAuthProvider<T extends React.Component<AuthComponentProps>>
       (WrappedComponent: new(props: AuthComponentProps, context?: any) => T): React.ComponentClass {
       return class extends React.Component<any, AuthProviderState> {
-        private userAgentApplication: UserAgentApplication;
+        private publicClientApplication: PublicClientApplication;
 
         constructor(props: any) {
           super(props);
@@ -53,7 +53,7 @@ In this section you'll create an authentication provider and implement sign-in a
           };
 
           // Initialize the MSAL application object
-          this.userAgentApplication = new UserAgentApplication({
+          this.publicClientApplication = new PublicClientApplication({
             auth: {
                 clientId: config.appId,
                 redirectUri: config.redirectUri
@@ -68,9 +68,9 @@ In this section you'll create an authentication provider and implement sign-in a
         componentDidMount() {
           // If MSAL already has an account, the user
           // is already logged in
-          var account = this.userAgentApplication.getAccount();
+          const accounts = this.publicClientApplication.getAllAccounts();
 
-          if (account) {
+          if (accounts && accounts.length > 0) {
             // Enhance user object with data from Graph
             this.getUserProfile();
           }
@@ -91,11 +91,12 @@ In this section you'll create an authentication provider and implement sign-in a
         async login() {
           try {
             // Login via popup
-            await this.userAgentApplication.loginPopup(
+            await this.publicClientApplication.loginPopup(
                 {
                   scopes: config.scopes,
                   prompt: "select_account"
               });
+
             // After login, get the user's profile
             await this.getUserProfile();
           }
@@ -109,27 +110,34 @@ In this section you'll create an authentication provider and implement sign-in a
         }
 
         logout() {
-          this.userAgentApplication.logout();
+          this.publicClientApplication.logout();
         }
 
         async getAccessToken(scopes: string[]): Promise<string> {
           try {
+            const accounts = this.publicClientApplication
+              .getAllAccounts();
+
+            if (accounts.length <= 0) throw new Error('login_required');
             // Get the access token silently
             // If the cache contains a non-expired token, this function
             // will just return the cached token. Otherwise, it will
             // make a request to the Azure OAuth endpoint to get a token
-            var silentResult = await this.userAgentApplication.acquireTokenSilent({
-              scopes: scopes
-            });
+            var silentResult = await this.publicClientApplication
+                .acquireTokenSilent({
+                  scopes: scopes,
+                  account: accounts[0]
+                });
 
             return silentResult.accessToken;
           } catch (err) {
             // If a silent request fails, it may be because the user needs
             // to login or grant consent to one or more of the requested scopes
             if (this.isInteractionRequired(err)) {
-              var interactiveResult = await this.userAgentApplication.acquireTokenPopup({
-                scopes: scopes
-              });
+              var interactiveResult = await this.publicClientApplication
+                  .acquireTokenPopup({
+                    scopes: scopes
+                  });
 
               return interactiveResult.accessToken;
             } else {
@@ -189,7 +197,8 @@ In this section you'll create an authentication provider and implement sign-in a
           return (
             error.message.indexOf('consent_required') > -1 ||
             error.message.indexOf('interaction_required') > -1 ||
-            error.message.indexOf('login_required') > -1
+            error.message.indexOf('login_required') > -1 ||
+            error.message.indexOf('no_account_in_silent_request') > -1
           );
         }
       }
@@ -250,4 +259,4 @@ At this point your application has an access token, which is sent in the `Author
 
 However, this token is short-lived. The token expires an hour after it is issued. This is where the refresh token becomes useful. The refresh token allows the app to request a new access token without requiring the user to sign in again.
 
-Because the app is using the MSAL library, you do not have to implement any token storage or refresh logic. The `UserAgentApplication` caches the token in the browser session. The `acquireTokenSilent` method first checks the cached token, and if it is not expired, it returns it. If it is expired, it uses the cached refresh token to obtain a new one. You'll use this method more in the following module.
+Because the app is using the MSAL library, you do not have to implement any token storage or refresh logic. The `PublicClientApplication` caches the token in the browser session. The `acquireTokenSilent` method first checks the cached token, and if it is not expired, it returns it. If it is expired, it uses the cached refresh token to obtain a new one. You'll use this method more in the following module.