idTokenClaims is undefined when refresh the browser in angular 16

[varunkumarintel]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

^3.1.0

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

^3.0.4

Public or Confidential Client?

Public

Description

When i refresh the browser idTokenClaims is undefined,

with below version "@azure/msal-angular": "^3.0.4", "@azure/msal-browser": "^3.1.0",

however it is working fine with below version. (just removed the ^) "@azure/msal-angular": "3.0.4", "@azure/msal-browser": "3.1.0",

Please help us to find the root cause for this issue

Error Message

idTokenClaims is undefined

Msal Logs

No response

MSAL Configuration

default

Relevant Code Snippets

"@azure/msal-angular": "^3.0.4",
    "@azure/msal-browser": "^3.1.0",

Reproduction Steps

"@azure/msal-angular": "^3.0.4",
"@azure/msal-browser": "^3.1.0",

Expected Behavior

it should work with below version with ^ added in the version "@azure/msal-angular": "^3.0.4", "@azure/msal-browser": "^3.1.0",

Identity Provider

Azure B2C Basic Policy

Browsers Affected (Select all that apply)

Chrome

Regression

No response

Source

External (Customer)

[hectormmg]

@varunkumarintel can you confirm what version is actually being installed? This issue was fixed in #6622 and released in MSAL v3.5.0. Please upgrade to the latest MSAL Angular and MSAL Browser libraries and see if it resolves your issue.

[varunkumarintel]

@hectormmg I tried with these versions of msal-angular and msal-broswer, which is not working

"@azure/msal-angular": "^3.0.4", "@azure/msal-browser": "^3.5.0",

"@azure/msal-angular": "^3.0.10", "@azure/msal-browser": "^3.5.0",

"@azure/msal-angular": "^3.0.10", "@azure/msal-browser": "^3.7.0",

"@azure/msal-angular": "^3.0.4", "@azure/msal-browser": "^3.7.0",

Only Version which is working (Without cap only)

"@azure/msal-angular": "3.0.4", "@azure/msal-browser": "3.1.0",

it should work with cap like this
"@azure/msal-angular": "^3.0.4", "@azure/msal-browser": "^3.1.0",

[gauert-dasgip]

The same happens with msal-react, starting from "msal-browser" v3.2.0 "idTokenClaims" is undefined after browser refresh.

[tnorling]

Please share trace level MSAL logs so we can get a better idea of whats happening here

[gauert-dasgip]

HI, here is trace level log without PII from our react app:

1. "idTokenClaims" are set in ID token
2. Trigger browser refresh
3. localhost-1707135592682.log
4. "idTokenClaims" are undefined in returned ID token

[varunkumarintel]

any update on this? @hectormmg @gauert-dasgip

[tnorling]

Based on the logs this looks related to metadata resolution. Can you please share your configuration + basic usage or a link to a minimal repro?

[varunkumarintel]

@tnorling

  let accounts = this.authService.instance.getAllAccounts();

this line is throwing attached error when we refresh the page

[tnorling]

Understood. I need more information, can you please provide what I requested above? Thanks!

[varunkumarintel]

it is still not resolved.

ask is simple:

with below version "@azure/msal-angular": "^3.0.4", "@azure/msal-browser": "^3.1.0",

why above code id throwing error : idTokenClaims is undefined

code snipent and uses 👍 this.activeAccount = this.authService.instance.getActiveAccount(); if ( !this.activeAccount && this.authService.instance.getAllAccounts().length > 0 ) { let accounts = this.authService.instance.getAllAccounts(); this.authService.instance.setActiveAccount(accounts[0]); }

/** check for claims, if claims are as expected, do get access token */
if (this.activeAccount) {
  if ((this.activeAccount.idTokenClaims && this.activeAccount.idTokenClaims.acr.toLowerCase() === environment.adb2cConfig.signUpSignIn.toLowerCase()) && (this.activeAccount.idTokenClaims.mfaPassedThisSession || this.activeAccount.idTokenClaims.idp === environment.idp)) {

my logic here

[baster33]

Hello i think it might be connected to this issue: https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/6690 Check your knownauthorities as sugested in comment: https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/6690#issuecomment-1819176989

[gauert-dasgip]

That (https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/6690#issuecomment-1819176989) solved our issue, @baster33 thanks for the hint!

[danvod]

@gauert-dasgip May I ask what exactly worked for you and how you solved it?

I used the snippet below, as specified in the docs here , but the idTokenClaims are still undefinedfor me after a reload.

const msalConfig = {
  auth: {
    clientId: "<your-clientID>",
    authority: "https://<your-tenant>.b2clogin.com/<your-tenant>.onmicrosoft.com/<your-policyID>",
    knownAuthorities: ["<your-tenant>.b2clogin.com"] 
  }
}

[gauert-dasgip]

@danvod removing https:// from knownAuthorities solved our issue, but in your example you already use it without https. This is what our configuration looked like before:

const msalConfig = {
  auth: {
    clientId: "<your-clientID>",
    authority: "https://<your-tenant>.b2clogin.com/<your-tenant>.onmicrosoft.com/<your-policyID>",
    knownAuthorities: ["https://<your-tenant>.b2clogin.com"] 
  }
}

and changing it to

const msalConfig = {
  auth: {
    clientId: "<your-clientID>",
    authority: "https://<your-tenant>.b2clogin.com/<your-tenant>.onmicrosoft.com/<your-policyID>",
    knownAuthorities: ["<your-tenant>.b2clogin.com"] 
  }
}

solved our issue

[danvod]

@gauert-dasgip, this helped a lot! It seems my error was different.

My tenant is "Mytenant123.b2clogin.com," which I copied from the Azure portal and haven't given much thought. That did not work; however, "mytenant123.b2clogin.com" did, so there we go. Thanks again, have a good day!