Stay logged in when using msal.js

Question

I'm building a small JS app for my Microsoft ToDo tasks and use the msal.js library to accommodate the authentication process. This works perfectly fine, I get a popup, I authenticate my profile, the popup closes and my tasks appear on my screen.

But: It doesn't seem to remember that I authenticated before; Every time I run my webpack app and the page is booted it shows the popup and asks for authentication. Once I've authenticated and just refresh my page, it just shows me the tasks without showing the popup again. I haven't tried waiting for an hour but I think it has something to do with not properly refreshing my access token. I'm not that involved with the Outlook/Microsoft API that I can really figure out if I'm using it correctly.

In short: How can I authenticate once so that the next time I start my app the tasks are shown without having to authenticate again?

My init function

  this.userAgentApplication = new Msal.UserAgentApplication(microsoftTasksClientId, null, function (errorDes, token, error, tokenType) {
    // this callback is called after loginRedirect OR acquireTokenRedirect (not used for loginPopup/aquireTokenPopup)
    console.log(token)
  })
  let user = this.userAgentApplication.getUser()
  if (!user) {
    const self = this
    // this.userAgentApplication = new Msal.UserAgentApplication(microsoftTasksClientId)
    this.userAgentApplication.loginPopup([`${this.apiRootUrl}Tasks.readwrite`]).then(function (token) {
      self.idToken = token
      user = self.userAgentApplication.getUser()
      if (user) {
        self.getSilentToken()
      }
    }, function (error) {
      console.log(error)
    })
  } else {
    this.getSilentToken()
  }

And my getSilentToken function

  const self = this
  this.userAgentApplication.acquireTokenSilent([`${this.apiRootUrl}Tasks.readwrite`]).then(function (token) {
    console.log('ATS promise resolved', token)
    self.accessToken = token
    self.getTasks()
  }, function (err) {
    console.log(err)
  })

Please not that my code isn't refactored AT ALL! ;-)

Answer 1

What version of MSAL are you using? There is a problem in 0.1.1 version that storage is 'sessionStorage' by default and can't be really changed. In that case your login is saved just for currently opened window and you will be forced to relogin even when opened new browser window. You should use 'localStorage' to achieve what you want and pass it as a constructor parameter for UserAgentApplication.

Here is a fix in their repo for this:

https://github.com/AzureAD/microsoft-authentication-library-for-js/commit/eba99927ce6c6d24943db90dfebc62b948355f19