Angular application Msal requires login in a new tab

Question

So currently when I use my application it's working great in navigating to new views etc, but when I copy paste a link into a new tab I get to the login view where it says this user is logged in but I still have to click on it to get to the view. I figure it's because msal is storing everything in sessionStorage, and that storage doesnt persist when I open a new tab.

How can I get around this? I figure localStorage might be a good way, but I cant seem to figure out how to configure that.

I have these settings:

 azure: {
clientID: 'xxxxxx',
authority: 'xxxxxxx',
redirectUri: 'http://localhost:4200',
cache: {
  cacheLocation: 'localStorage'
}

And the routes look like this:

path: 'home',
loadChildren: () => import('./modules/home/home.module').then(m => m.HomeModule),
canActivate: [MsalGuard]

As you see I try and set cacheLocation to localstorage like this but its still set in sessionStorage, and from other threads I gather that this is by design. So maybe I dont want to store this in localstorage? But then how would I set this up so I dont have to login when opening a new tab.

Any links to some helpful docs would be greatly appreciated.

Answer 1

Solved it, the object I put into forRoot was built wrong. I had

cache: {cacheLocation: 'localStorage'} 

but it was supposed to only be cacheLocation: 'localStorage' and it worked.