Microsoft-authentication-library-for-js: Setting .cacheLocation does not affect where the token is stored.

[nmiddendorff]

Before the loginRedirect() function is called I set the cacheLocation to 'localStorage'. When my user is authenticated, the token is stored in sessionStorage.

var clientApplication = new Msal.UserAgentApplication(applicationConfig.clientID, applicationConfig.authority, authCallback);

function login() {
    clientApplication['cacheLocation'] = 'localStorage';
    clientApplication['redirectUri'] = 'http://localhost:60849/'
    clientApplication.loginRedirect(applicationConfig.b2cScopes);
}

I also tried clientApplication.cacheLocation('localStorage'); but .cacheLocation is not a function

[MariusSc]

I encountered a similar problem in msal v0.1.1. I tried clientApplication.cacheLocation = "localStorage", right after instantiating the client, but the storage is still session storage. How can I switch to local storage?

If I use session storage, the user must re-enter his credentials each time the browser refreshes the site. Therefore I want to switch to local storage.

I am including the msal like this:

[Molibar]

MariusSc: Your solution on stackoverflow seemed to make it use local storage
https://stackoverflow.com/a/44133641/1176452

The problem I'm facing now is that when creating the Msal.UserAgentApplication it doesn't use the data from the Local Storage to populate the _user object. Did you manage to solve this part of the problem? Do you have a code snippet for how to create the Msal.UserAgentApplication with the Local Storage data?

Extremely poor user experience to have to sign in again when refreshing the page.

I have two temporary workarounds for development, which both requires your stackoverflow hack where you do 'new Msal.Storage("localStorage");'

Here are my additional hacks:

1. Pass in the User when trying to acquire token silently:
   userAgentApplication.acquireTokenSilent(applicationConfig.b2cScopes, null, userAgentApplication.getUser())
2. Set _user to a new User object created with the Local Storage data after the Msal.UserAgentApplication has been constructed:
   userAgentApplication._user = userAgentApplication.getUser();

Does anyone have any idea how this should be done properly? MSAL should handle this internally, and I really shouldn't set the _user-property from the outside. Is there any other way to avoid sending the users through the login flow on every refresh?

Regards,
Molibar

[rohitnarula7176]

@Molibar @MariusSc @nmiddendorff I have made a fix for the above issue in my branch https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/rohitnarula7176/Issue_58. To change the cacheLocation to localStorage, you will have to pass the value in the constructor. Its an optional parameter, so if you do not pass a value, it will default to sessionStorage. Since on browser redirect, all stored values are lost, we cannot allow developers to set properties like cacheLocation, redirectUri, postLogoutUri and navigateToLoginRequestUrl in any other place other than the constructor. I have made all these properties private in my branch and they can only be set using the constructor and cannot be altered afterwards. Please use the code below to set the cacheLocation to localStorage or you you can refer to the following sample to achieve the same.:
https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/rohitnarula7176/Issue_58/devApps/VanillaJSTestApp/index_LoginRedirect.html

var userAgentApplication = new Msal.UserAgentApplication(applicationConfig.clientID, null, authCallback, null, 'localStorage');

Could you please test the branch and let us know if your issue is resolved. We will make the fix for this in our next release.

[rohitnarula7176]

PR Submitted

[Molibar]

@rohitnarula7176 : Nice patch, solved the problems with Local Storage not being used. Is there any documentation that shows how to get msal to read the cached values from Local Storage? Currently I'm manually setting userAgentApplication._user with a call to userAgentApplication.getUser(). This should be handled by the framework without any external manipulation.

Thanks for sorting out the localStorage issue so fast, and if I had more experience with msal js I'd patch it up myself and create a pull-request, but I think I'd better have a grown-up sort this issue out.

[jmprieur]

Thanks for the feedback @Molibar

[rohitnarula7176]

@Molibar @MariusSc @nmiddendorff Due to a large number of default and optional parameters we need to set in the constructor, I have changed the code a bit which was used to fix the issue with setting cacheLocation as localStorage. Please refer to the snippet below to change cacheLocation to localStorage in your code.

var userAgentApplication = new Msal.UserAgentApplication(applicationConfig.clientID, null, authCallback, { cacheLocation: 'localStorage' }); // to set it to localStorage
var userAgentApplication = new Msal.UserAgentApplication(applicationConfig.clientID, null, authCallback); // to set it to default sessionStorage

In TS syntax, an optional params object is preferred which should contain the list of optional values and it also eliminates the need for setting null values by the developers. Thanks to @austindyoung for pointing out this syntax. You can use the above code and the dev branch to test it. Please let us know if you face any issues.

[Molibar]

Good stuff, works for me. Will be much cleaner as more arguments might need to be added over time. The constructor looked a bit bloated there in the last version. I built the dev branch and on my side everything works.

Thanks for helping us out.

[jmprieur]

Thanks for the feedback @Molibar . Closing the issue.

[spottedmahn]

@rohitnarula7176 FYI, the following links aren't working

• https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/rohitnarula7176/Issue_58
• https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/rohitnarula7176/Issue_58/devApps/VanillaJSTestApp/index_LoginRedirect.html

PR submitted

Which PR are you referring to?

Thanks!

[spottedmahn]

Just so I'm clear... To use local storage we have two options depending upon the version used, correct?

Current Version - v0.1.1

 new Msal.Storage("localStorage");

 var client = new Msal.UserAgentApplication(config.aadClientId, config.aadAuthority, ...);

source

Next Version

var userAgentApplication = new Msal.UserAgentApplication(applicationConfig.clientID, null, authCallback, { cacheLocation: 'localStorage' }); // to set it to localStorage

source

[rolandoldengarm]

When is the next version coming? I still don't see a PR for this? Why is this issue closed @jmprieur ?

[jmprieur]

• @rohitnarula7176

[rohitnarula7176]

@rolandoldengarm @jmprieur We released version 0.1.2 today which has this fix. the default storage is session and if you want to change it to localStorage, please see the code snippet in my comment in the thread above.