Login reloop issue when using msal-angular wrapper

[supriyaGannvi]

Core Library

MSAL.js v2 (@azure/msal-browser)

Core Library Version

2.14.1

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

2.0.5

Public or Confidential Client?

Public

Description

@jasonnutter Using Angular Wrapper, after sometime when accessing the application, loginRedirect goes into loop then I have to delete cookies to make it work. What's the trick to make it work. it works fine for the first time. Appreciate your help.

Error Message

No response

Msal Logs

No response

MSAL Configuration

auth: {
      clientId: clientid
      authority: authority,
    
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: isIE // set to true for IE 11. Remove this line to use Angular Universal
    },
    system: {
      loggerOptions: {
        loggerCallback,
        logLevel: LogLevel.Info,
        piiLoggingEnabled: false
      }
    }

Relevant Code Snippets

msalService.loginRedirect(singIn)

Reproduction Steps

1. Logged in with properly user and did not logged out
2. Logged in after 24 hrs and logging with different user
3. The Application looping back to multiple time until the user explicitly delete the cookies

Expected Behavior

once user logs in after token expiry then it should navigate to authentication screen and once he logs in the user should be login with new token

Identity Provider

Azure AD / MSA

Browsers Affected (Select all that apply)

Edge

Regression

@azure/msal-browser: "2.19.0"

Source

Internal (Microsoft)

[jo-arroyo]

@supriyaGannvi Are you able to provide verbose logs of this behavior?

[supriyaGannvi]

[supriyaGannvi]

@jo-arroyo this is what we get console

[jo-arroyo]

@supriyaGannvi Please send verbose logs. You can turn on verbose logging by changing the logLevel in the configurations as follows:

auth: {
      clientId: clientid
      authority: authority,
    
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: isIE
    },
    system: {
      loggerOptions: {
        loggerCallback,
        logLevel: LogLevel.Verbose, // Change to Verbose here
        piiLoggingEnabled: false
      }
    }

[ionut-gheorghe]

I can confirm this. After the refresh token is expired (I have this issue that logs out the user even if the user has conditional access policies, 24 hours refresh token for SPA) and I try to log in the another user: redirects to the first user asking for password. You either have to delete the cookie or sign out the first user.

[supriyaGannvi]

@ionut-gheorghe Did u got any solution for this issue

[ionut-gheorghe]

None for my 2 issues: mandatory interactive login after 24 hours and the loop when sign in a new user.

[supriyaGannvi]

@jo-arroyo could u help us how can we reslove this issue

[jo-arroyo]

@ionut-gheorghe Needing to login interactively after 24 hours is expected behavior. Refresh tokens used in single page apps and with the authorization code flow are limited to 24 hours. Once outside the 24 hour window, it is supposed to fail and require interactive login. While we recognize that this is not the best user experience, the 24 hour limit was chosen for security reasons for single-page apps. Please see this document about refresh tokens lifetimes and this document about refresh tokens and the auth code flow.

@supriyaGannvi Please provide verbose logs, per above.

[supriyaGannvi]

[supriyaGannvi]

@bmahall still the issue persist

[supriyaGannvi]

@bmahall We have added the $Inprogress and handle the active account as suggest by you still we could see the login redirect issue

[supriyaGannvi]

@bmahall could u please helps us out

[bmahall]

@supriyaGannvi Can you please share the fiddler trace and verbose logs on the email on my Git profile? Thanks

[bmahall]

@supriyaGannvi Meanwhile , please refer to a couple of points : -

1. Are you able to reproduce the behavior with local Storage , rather than session storage?
2. Please confirm the version(s) of msal-angular with which you are facing this issue
3. Redirects must be handled either with the MsalRedirectComponent or with calling handleRedirectObservable(). See our docs on redirects here for more information. Additionally, any interaction or account validation should be done after subscribing to the inProgress$ observable and filtering for InteractionStatus.None.
   For more details on the above, please refer to the sample

Kindly share your source code wherein you are calling loginRedirect on my email.
Thanks for your patience!

[supriyaGannvi]

this is snipped code

this.msalBrodcastService.msalSubject$
.pipe(
filter(
(msg: EventMessage) =>
msg.eventType === EventType.LOGIN_SUCCESS ||
msg.eventType === EventType.LOGOUT_START
)
)
.subscribe(({ eventType }: EventMessage) => {
if (eventType === EventType.LOGIN_SUCCESS) {
this._isAuthenticated.next(true);
} else {
this._isAuthenticated.next(false);
}
});

this.msalBrodcastService.inProgress$
  .pipe(filter((status: InteractionStatus) => status === InteractionStatus.None))
  .subscribe(() => {
    this.setLoginDisplay();
  });

}

/**

• function to represent the login Disaply
  */
  setLoginDisplay = () =>
  (this.loginDisplay =
  this.authService.instance.getAllAccounts().length >
  DefaultNumberInitializableConstants.ZERO);

/**

• Login using MSAL
• @param popup Should the login happen using popup or redirect
• @returns Observable with either void or AuthenticationResult
  */
  onLogin(popup: boolean = false): Observable<void | AuthenticationResult> {
  if (popup) {
  return this.authService.loginPopup();
  } else {
  return this.authService.loginRedirect();
  }
  }

[bmahall]

@supriyaGannvi Please use the following code in place of this.msalBrodcastService.inProgress$ .pipe(filter((status: InteractionStatus) => status === InteractionStatus.None)) .subscribe(() => { this.setLoginDisplay(); });

`
this.msalBroadcastService.inProgress$
.pipe(
filter((status: InteractionStatus) => status === InteractionStatus.None),
takeUntil(this._destroying$)
)
.subscribe(() => {
this.setLoginDisplay();
this.checkAndSetActiveAccount();
})
}

setLoginDisplay() {
this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;
}

checkAndSetActiveAccount(){
/**
* If no active account set but there are accounts signed in, sets first account to active account
* To use active account set here, subscribe to inProgress$ first in your component
* Note: Basic usage demonstrated. Your app may require more complicated account selection logic
*/
let activeAccount = this.authService.instance.getActiveAccount();

if (!activeAccount && this.authService.instance.getAllAccounts().length > 0) {
  let accounts = this.authService.instance.getAllAccounts();
  this.authService.instance.setActiveAccount(accounts[0]);
}

}
`

[supriyaGannvi]

@bmahall we cannot add the $destory for the service

[ghost]

This issue requires attention from the MSAL.js team and has not seen activity in 5 days. @bmahall please follow up.

[ghost]

This issue requires attention from the MSAL.js team and has not seen activity in 5 days. @bmahall please follow up.

[tnorling]

@bmahall we cannot add the $destory for the service

Why not? Can you also please confirm that you are handling the redirect response as described by @bmahall above? Are you able to reproduce your issue with one of our samples here?

[ghost]

@supriyaGannvi This issue has been automatically marked as stale because it is marked as requiring author feedback but has not had any activity for 5 days. If your issue has been resolved please let us know by closing the issue. If your issue has not been resolved please leave a comment to keep this open. It will be closed automatically in 7 days if it remains stale.