Oidc-client-js: How can I switch to using localStorage for user store? If this is not recommended or a bad idea, why?

[m-andrew-albright]

This may be more of a webpack-related question, but then again maybe not.

I can't figure out how I can change the user store to use localStorage rather than session storage. Currently if I open a new tab in my client application, it does not have access to my user information, and therefore begins a login redirect.

I have tried passing on the settings object to the UserManager with userStore: localStorage but I am getting TypeError: this._userStore.get is not a function(...) when calling UserManager.getUser(). Here are the two log entries leading up to the error:

UserManager.getUser
_loadUser

[m-andrew-albright]

I figured it out by digging through the source code for a while. I had to set:

userStore: new WebStorageStateStore({ store: localStorage})

[brockallen]

Feel free to add to the wiki/docs :)

Also, localStorage is slightly discouraged for PII reasons.

[m-andrew-albright]

So is it more recommended then to have the user redirect to obtain a new token every time they open a new browser tab/window? I am somewhat of an auth/oauth2/oidc newb trying to learn.

I will try to spend a little time adding a couple things to the wiki/docs later.

[brockallen]

Use the silent renew feature to get new tokens. If that fails, then you need user interaction.

[m-andrew-albright]

So the silent renew feature would work across browser tabs? So it's normal for say four browser tabs to be open, with each tab using a different token for auth?

[brockallen]

Yes, because you already have a cookie with the AS.

[NTurakulov]

Hey @m-andrew-albright
I was happy when found this thread but unfortunately it didn't work for me. Even while userStore is set to Local Storage (i can check it while debugging) user info is still stored in Session Storage and now i can't even login because getUser() returns null all the time.

Didn't you made any additional setup except this setting?

P.S. I'm using oidc-client in Angular app and use response_type: code

[NTurakulov]

UPD:
Solved my problem - I used two different instances of UserManager for signinRedirect() and signInCallbackRedirect() which had different configuration. Thus while one instance was putting userInfo into Local Stroage another one was searching for in Session Storage.

Using the same instance for both procedures fixed the bug - now opening the same website in a new tab while being authorized in the first one doesn't require to sign in again!