After migrating from 0.x to 1.x msal can't get token from URL

[vladkasianenko]

After migrating from msal@0.2.2 to the msal@1.3.3 I have different tokens.
There were no changes at the Azure portal.

After _msalService.login() I have this URL:

http://localhost:4200/#state=***&client_info=***&id_token=***token_without_scopes***

However, with acquireTokenRedirect in the URL I have something like this:

http://localhost:4200/#state=**valid_token**&token_type=Bearer&expires_in=3600&scope=https%3a%2f%2f***.partner.onmschina.cn%2fapi%2fwrite+https%3a%2f%2f***.partner.onmschina.cn%2fapi%2fread+https%3a%2f%2f***.partner.onmschina.cn%2fapi%2fuser_impersonation

As you can see, this URL contains both scopes and valid token. But how can I grab it in the handreRedirectCallback?

I also use MsalGuard, might it affect somehow?

Am I missing something?

OLD configuration:

"@azure/msal-angular": "^0.1.4"
"msal": "^0.2.2"

{
    authority: `https://***.b2clogin.cn/tfp/0b5***865/B2C_1_SignIn`,
    validateAuthority: false,
    clientID: '706***cae',
    consentScopes: 'https://***.partner.onmschina.cn/api/write;https://***.partner.onmschina.cn/api/read',
    cacheLocation: 'localStorage',
    redirectUri: 'localhost:4200',
    navigateToLoginRequestUrl: true,
    postLogoutRedirectUri: 'localhost:4200',
    popUp: false,
    protectedResourceMap: [
      [environment.NG_APP_SERVICE1_API_BASE_URL, ['https://***.partner.onmschina.cn/api/write','https://***.partner.onmschina.cn/api/read']],
      [environment.NG_APP_SERVICE2_API_BASE_URL, ['https://***.partner.onmschina.cn/api/write','https://***.partner.onmschina.cn/api/read']],
      [environment.NG_APP_SERVICE3_API_BASE_URL, ['https://***.partner.onmschina.cn/api/write','https://***.partner.onmschina.cn/api/read']]
    ],
    storeAuthStateInCookie: false,
    unprotectedResources: ['/static-assets/images'],
    loadFrameTimeout: 12000,
  }

auth.service.ts:

this._user$ = new BehaviorSubject(_msalService.getUser());

this._loginFailureSubscription = this._broadcastService.subscribe('msal:loginFailure', (payload) => {
   this._user$.next(null);
});

this._loginSuccessSubscription = this._broadcastService.subscribe('msal:loginSuccess', () => {
  this._user$.next(_msalService.getUser());
});

this._loginSuccessSubscription = this._broadcastService.subscribe('msal:acquireTokenSuccess', () => {
   this._user$.next(_msalService.getUser());
});

this._acquireTokenFailureSubscription = this._broadcastService.subscribe('msal:acquireTokenFailure', () => {      
   this._msalService.acquireTokenRedirect(['https://***.partner.onmschina.cn/api/write','https://***.partner.onmschina.cn/api/read']);
});

{
  "iss": "https://***.b2clogin.cn/0b5***865/v2.0/",
  "exp": 1595756694,
  "nbf": 1595753094,
  "aud": "900***951", <-- Audience is for the API applications
  "oid": "cf2***062",
  "sub": "cf2***062",
  "name": "Vlad Kasianenko",
  "given_name": "Vlad",
  "family_name": "Kasianenko",
  "emails": [
    "Vladyslav_Kasianenko@companyemail.com"
  ],
  "tfp": "B2C_1_signin",
  "nonce": "bc6***97b",
  "scp": "write read",
  "azp": "706***cae", <-- Audience is for the Angular application
  "ver": "1.0",
  "iat": 1595753094
}

---

NEW configuration:

"@azure/msal-angular": "^1.0.0",
"msal": "^1.3.3"

MSAL_CONFIG token:

{
    auth: {
      clientId: '706***cae',
      authority: 'https://***.b2clogin.cn/tfp/0b5***865/B2C_1_SignIn',
      validateAuthority: false,
      redirectUri: 'http://localhost:4200',
      postLogoutRedirectUri: 'http://localhost:4200',
      navigateToLoginRequestUrl: false
    },
    cache: {
      cacheLocation: 'localStorage',
      storeAuthStateInCookie: false
    },
    system: {
      loadFrameTimeout: 12000,
      tokenRenewalOffsetSeconds: 0
    },
    framework: {
      isAngular: true,
      protectedResourceMap: new Map([
      [environment.NG_APP_SERVICE1_API_BASE_URL, ['https://***.partner.onmschina.cn/api/write','https://***.partner.onmschina.cn/api/read']],
      [environment.NG_APP_SERVICE2_API_BASE_URL, ['https://***.partner.onmschina.cn/api/write','https://***.partner.onmschina.cn/api/read']],
      [environment.NG_APP_SERVICE3_API_BASE_URL, ['https://***.partner.onmschina.cn/api/write','https://***.partner.onmschina.cn/api/read']]
    ]),
      unprotectedResources: ['/static-assets/images']
    }

MSAL_CONFIG_ANGULAR:

{
    popUp: false,
    protectedResourceMap: [
      [environment.NG_APP_SERVICE1_API_BASE_URL, ['https://***.partner.onmschina.cn/api/write','https://***.partner.onmschina.cn/api/read']],
      [environment.NG_APP_SERVICE2_API_BASE_URL, ['https://***.partner.onmschina.cn/api/write','https://***.partner.onmschina.cn/api/read']],
      [environment.NG_APP_SERVICE3_API_BASE_URL, ['https://***.partner.onmschina.cn/api/write','https://***.partner.onmschina.cn/api/read']]
    ],
    unprotectedResources: ['/static-assets/images'],
    consentScopes: ['https://***.partner.onmschina.cn/api/write','https://***.partner.onmschina.cn/api/read'],
    extraQueryParameters: {}
  }

auth.service.ts:

@Injectable({
   provideIn: 'root'
})
export class AuthService {
   private readonly _user$: BehaviourSubject<Account>;

   constructor(private readonly _msalService: MsalService) {
      this._user$ = new BehaviorSubject(_msalService.getAccount());
      this._msalService.handleRedirectCallback((authError, response) => {

      if (authError) {
         this._msalService.loginRedirect({ scopes: ['openid'] });
         return;
      }

      // window.location is always 'https://localhost:4200/#', looks like the other part of the #state=123&scope=456 is missing in the Angular

      this._msalService.acquireTokenRedirect({ scopes: ['https://***.partner.onmschina.cn/api/write','https://***.partner.onmschina.cn/api/read'] }); });
      this._user$.next(_msalService.getAccount());
   }

   public login() {
      this._msalService.loginRedirect();
   }
}

Token. Have a look at the aud - it's for the UI application. azp and scp are missing.

{
  "iss": "https://***.b2clogin.cn/0b5***865/v2.0/",
  "exp": 1595754060,
  "nbf": 1595750460,
  "aud": "706***cae", <-- Audience is for the UI application, not for the API applications
  "oid": "cf2***062",
  "sub": "cf2***062",
  "given_name": "Vlad",
  "family_name": "Kasianenko",
  "name": "Vlad Kasianenko",
  "emails": [
    "Vladyslav_Kasianenko@companyemail.com"
  ],
  "tfp": "B2C_1_signin",
  "nonce": "8ef200db-c7ed-4506-a780-f65e6671e827",
  "ver": "1.0",
  "iat": 1595750460,
  "auth_time": 1595750460,
}

---

Azure AD B2C setup:

---

When I call acquireTokenSilent({ scopes: ['https://***.partner.onmschina.cn/api/write','https://***.partner.onmschina.cn/api/read'] }), I actually got right token in the accessToken property. But how do I apply it to the Bearer?

[vladkasianenko]

Discussiong moved here.