MSAL Angular MsalGuard configuring logout

Published

I am doing a POC on MSAL implementation on our Angular app.

Requirements: The user has to login once a day. When he visits more than once, he is to be taken directly to the app with no login interaction. The auth flow is only required for authentication and not authorization (no need for access tokens).

I have setup a test Azure AD account and have added the angular app to it. I have installed @azure/msal-angular and configured the same in app module as below:

export function MsalInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: 'my clientId',
      redirectUri: '<domain>/azurePOC2/auth',
      authority: 'https://login.microsoftonline.com/common/',
      postLogoutRedirectUri: '<domain>//azurePOC2/logout'
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: true
    },
    system: {
      loggerOptions: {
        loggerCallback: ()=>{}
      }
    }
  })
}

export function MsalGuardConfig(): MsalGuardConfiguration {
  return {
    interactionType: InteractionType.Redirect,
    loginFailedRoute: '<domain>/azurePOC2/error',
    authRequest: {
      scopes: ['openid']
    }
  }
}

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    MsalModule
  ],
providers: [
    ...
    {
      provide: MSAL_INSTANCE,
      useFactory: MsalInstanceFactory
    },
    {
      provide: MSAL_GUARD_CONFIG,
      useFactory: MsalGuardConfig
    },
    MsalGuard,
    MsalService
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

I have added the MsalGuard to protect my route. The setup is working fine for the login and logout flow. The issue I am facing is with the auto logout at the end of the day.

The package stores the client information in the token in the local storage (is it safe to expose the information like that?). The local storage never expires or gets cleared unless I explicitly call MsalService.logout(). Since I am using a test account, the token expiry is 1H. When the actual development begins, the client will configure the expiry time in AD to suit their needs. But I need to figure out how to clear the local storage once the token expires. Can someone help?

Source: Angular Questions

Published
Categorized as angular, msal, msal-angular, msal.js Tagged , , ,

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq