Feature: msal upgrade #883

thewahome · 2021-03-05T14:18:50Z

Overview

Upgrade to msal 2.0
Closes #688

Notes

LogutPopUp is still in design. the default logout implementation opens a redirect flow to log someone out.

We now use a work-around to initiate a popup flow when logging out of the try-it experience. And clear the cache so that the account is logged out of the browser

Testing Instructions

Local

You will need a registered client ID. Ensure that you have set the platform in your client ID to SPA and moved your redirect URLs on the azure portal [app registrations]

Online

Go to https://jolly-sand-0ac78c710-883.centralus.azurestaticapps.net

Steps

logging in and out of:
-- MSA account
-- MS account
-- Demo tenant account
Permissions:
-- Consent to 1 scope related to a specific url (MSA/MS/Demo)
-- Consent to many scopes through the panel (MSA/MS/Demo)
Send authenticated requests to the graph

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

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

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

ddyett · 2021-03-08T20:36:08Z

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

+
+const defaultScopes = DEFAULT_USER_SCOPES.split(' ');
+
+export class AuthenticationModule {


how did you test that this is now doing the right thing as far as PKCE.

@ddyett
Frankly, I have trusted that the msal team has done the right thing. My tests were geared towards whether GE was able to sign in and out effectively into all the accounts. I may need guidance on ways to test this the PKCE way.

@thewahome Turn on Fiddler, you'll see a call to /authorize with &code_challenge parameter. That indicates that it is using PKCE.

https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-auth-code-flow#request-an-authorization-code

You'll also see the refresh token supplied in the response to /token.

Graph Explorer and MSAL are using the auth code flow as expected. The one thing that we likely aren't doing but should do is set the state token in the initial request to /authorize and then checking on the response from /token that we are getting the same state token. This helps prevent CSRF

nikithauc · 2021-03-08T22:07:35Z

Please add doc for all the functions and comments for improving readability. https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html.

nikithauc · 2021-03-08T22:28:31Z

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

+    if (this.msalApplication) {
+      const allAccounts = this.msalApplication.getAllAccounts();
+      if (allAccounts && allAccounts.length > 0) {
+        return allAccounts[0];


Is it guaranteed that the first account that is the account[0] will always be the valid or intended account?

AzureAD/microsoft-authentication-library-for-js#2196
AzureAD/microsoft-authentication-library-for-js#1843
The array is not ordered. How is the current logged in account tracked?

Thanks for pointing this out. I have seen that the MSAL.js team recommends that we track this user ourselves

Is it guaranteed that the first account that is the account[0] will always be the valid or intended account?

Any idea about this? My concern is about picking up the wrong account. It would be a major issue if that happens.

Yeah...
I can use either:

msalApplication.getAccountByHomeId

msalApplication.getAccountByLocalId

msalApplication.getAccountByUsername

This means I'd have to create a way to track either of the identifiers

nikithauc · 2021-03-08T22:36:56Z

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

+    if (this.msalApplication) {
+      const allAccounts = this.msalApplication.getAllAccounts();
+      if (allAccounts && allAccounts.length > 0) {
+        return allAccounts[0];


AzureAD/microsoft-authentication-library-for-js#2196
AzureAD/microsoft-authentication-library-for-js#1843
The array is not ordered. How is the current logged in account tracked?

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

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

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

nikithauc · 2021-03-08T23:10:55Z

Good work on adding a class structure and organizing the code :)

…der.ts Co-authored-by: DeVere Dyett <ddyett@microsoft.com>

github-actions · 2021-03-09T07:18:31Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-883.centralus.azurestaticapps.net

…aph/microsoft-graph-explorer-v4 into feature/msal-upgrade

github-actions · 2021-04-07T07:43:37Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-883.centralus.azurestaticapps.net

github-actions · 2021-04-07T07:51:18Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-883.centralus.azurestaticapps.net

ElinorW · 2021-04-08T13:30:26Z

src/app/services/graph-constants.ts

 export const DEFAULT_USER_SCOPES = 'openid profile User.Read';
 export const DEVX_API_URL = 'https://graphexplorerapi.azurewebsites.net';
 export const GRAPH_API_SANDBOX_URL = 'https://proxy.apisandbox.msdn.microsoft.com';
+export const HOME_ACCOUNT_KEY = 'fbf1ecbe-27ab-42d7-96d4-3e6b03682ee4';


Just wondering if this can be stored in the .env file instead

github-actions · 2021-04-08T14:21:33Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-883.centralus.azurestaticapps.net

github-actions · 2021-04-14T08:51:34Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-883.centralus.azurestaticapps.net

github-actions · 2021-04-14T09:03:32Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-883.centralus.azurestaticapps.net

github-actions · 2021-04-14T12:42:54Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-883.centralus.azurestaticapps.net

github-actions · 2021-04-15T12:08:25Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-883.centralus.azurestaticapps.net

github-actions · 2021-04-19T05:59:54Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-883.centralus.azurestaticapps.net

nikithauc · 2021-04-19T21:16:26Z

src/modules/authentication/AuthenticationWrapper.ts

+
+    if (allAccounts.length > 1) {
+      const homeAccountId = this.getHomeAccountId();
+      return (homeAccountId) ? msalApplication.getAccountByHomeId(homeAccountId) || undefined : undefined;


Why use msalApplication.getAccountByHomeId(homeAccountId) || undefined?

The function msalApplication.getAccountByHomeId(homeAccountId) returns AccountInfo | null, however the references of the getAccount() function expects AccountInfo | undefined. So if the msalApp returns null I default it to undefined so that nothing breaks

nikithauc · 2021-04-19T21:17:27Z

src/modules/authentication/AuthenticationWrapper.ts

+export class AuthenticationWrapper implements IAuthenticationWrapper {
+
+  private static instance: AuthenticationWrapper;
+  private isConsentFlow: boolean = false;


Please add a summary explaining the role of the properties and functions.

@nikithauc I tried to limit using comments by instead using variable and function names that could be self-documenting; Unless when documenting a major decision eg the clearCache() function. Does this mean the properties and functions do not convey the meaning?

Yes, I didn't understand what isConsentFlow means?

src/modules/authentication/AuthenticationWrapper.ts

github-actions · 2021-04-20T08:14:08Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-883.centralus.azurestaticapps.net

github-actions · 2021-04-22T06:48:18Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-883.centralus.azurestaticapps.net

* Task: state typings (#921) * Feature: Enhance 'More actions' icon appearance (#907) * Feature: msal upgrade (#883)

thewahome added 2 commits March 5, 2021 12:56

replace msal with azure/msal-browser

3bc16fc

implement the authentication module

d434316

thewahome requested review from zengin and jobala March 5, 2021 14:21

add session id to maintain session from try-it experience

c9e0117

thewahome requested a review from ddyett March 8, 2021 16:54