Upgrade to latest msal/browser library breaks this sample

[profteck]

Please provide us with the following information:

This issue is for a: (mark with an x)

- [x ] bug report -> please search issues before submitting
- [ ] feature request
- [ ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

Upgrade current sample to latest version of msal-browser npm install @azure/msal-browser @azure/msal-angular@latest

Click Login In Button and log in - F12 and look at console window - it has an error when trying to get the claims.

Any log messages given by the failure

core.js:6210 ERROR ClientAuthError: access_token_entity_null: Access token entity is null, please check logs and cache to ensure a valid access token is present. at ClientAuthError.AuthError [as constructor] (http://localhost:4200/vendor.js:130540:20) at new ClientAuthError (http://localhost:4200/vendor.js:130792:24) at Function.ClientAuthError.createAccessTokenEntityNullError (http://localhost:4200/vendor.js:131129:12) at Function. (http://localhost:4200/vendor.js:135387:35) at step (http://localhost:4200/vendor.js:130119:19) at Object.next (http://localhost:4200/vendor.js:130049:14) at http://localhost:4200/vendor.js:130021:67 at new ZoneAwarePromise (http://localhost:4200/polyfills.js:2387:23) at __awaiter$1 (http://localhost:4200/vendor.js:130000:10) at Function.ResponseHandler.generateAuthenticationResult (http://localhost:4200/vendor.js:135349:12)

Expected/desired behavior

Shows table with claims detail in the home.component.html file

Browser and version?

Google Chrome Version 90.0.4430.93

Versions

This is in the project - "ms-identity-javascript-angular-tutorial/1-Authentication/2-sign-in-b2c/"

Mention any other details that might be useful

---

Thanks! We'll be in touch soon.

[derisen]

@profteck this is a known issue and a fix will be coming with the new release. For now, please downgrade to a previous version.

[profteck]

What I've done is create a brand new project. I've copied the ts / html / css files from your sample project. I'm fairly new to angular!!

This is how I tried to use an earlier version

 npm install @azure/msal-angular@2.0.0-beta.3 (installs ok)
 npm install @azure/msal-browser@2.13.1  (not found when I try to install)

So what I then tried is:

In the package.json file I've copied in this dependencies from the sample project. "@azure/msal-angular": "^2.0.0-beta.3", "@azure/msal-browser": "^2.13.1", "core-js": "^3.8.0",

Then I use "npm install" to install any missing packages.

But I'm still getting the same error.

The only way I can get my project to work is to replace the node_modules folder from the sample project and it will then work.

But if I do an "npm install" again it goes back to the original error (which is not ideal).

I know I'm missing something. Any ideas?

Thanks

[derisen]

@profteck no worries! here's how you should approach (no need to copy paste files):

1. delete node_modules folder and package-lock.json file
2. run npm cache clean --force
3. modify package.json as to have:

"@azure/msal-angular": "^2.0.0-beta.3",
"@azure/msal-browser": "^2.13.1",

4. run npm install again

The alternative approach could be to apply the temporary fix mentioned here. I'm assuming you are using sample 1.2)sign-in-b2c. There, modify app.module.ts like:

export function MSALGuardConfigFactory(): MsalGuardConfiguration {
  return { 
    interactionType: InteractionType.Redirect,
    authRequest: [ "CLIENT_ID_OF_YOUR_APP" ]
  };
}

Apologies for the trouble. This will be fixed as soon as the new version releases.

[profteck]

Hi

thank you for replying.

I've tried the first option but still get the error.

The link to the work around is broken.

For the moment - I'm copying the node_modules folder from your sample and then installing any library I need - not using the full npm install and that works.

Thanks Ann

[derisen]

@profteck apologies, here's the correct link for the workaround

[derisen]

@profteck a new version msal-browser and msal-angular just released. This should fix the issue, can you update your packages to the latest and give it a try again?

[profteck]

Hi

I tried that and yes, the error that I was having has gone. One thing I have noticed - I'm using your sample project - "ms-identity-javascript-angular-tutorial-main\3-Authorization-II\2-call-api-b2c\SPA". Before you log in, you get this screen:

After you log in - it used to display the following automatically:

After the update, the page has to be refreshed before this appears.

I've noticed that the claim that is returned is a different format. This was the old format - I added a Console.log to the method - getClaims()

getClaims(claims: any) {
    this.dataSource = [
      {id: 1, claim: "Display Name", value: claims ? claims['name'] : null},
      {id: 2, claim: "Object ID", value: claims ? claims['oid']: null},
      {id: 3, claim: "Job Title", value: claims ? claims['jobTitle']: null},
      {id: 4, claim: "City", value: claims ? claims['city']: null},
    ];

    console.log(claims);
  }

.

On the latest update the claims output looks like this:

Maybe there is an update required on the sample project?

Thanks for all your help.

Ann

[derisen]

@profteck thanks for catching this! Will get this fixed in PR asap.

[profteck]

Thanks a mill. Your samples really do help me to understand the concepts.