Why can not write to localStorage?

[Demon520-coder]

I use the oidc-client.js for my vue app. My authorize server is identityserver4. I have a problem about localStorage. When I set the userStore:new Oidc.WebStorageStateStore({ store: window.localStorage }) in UserManagerSettings,it writes the userinfo into sessionStorage not to the localStorage. Here is my code, can anyone know what's wrong with it. Thanks a lot.

import Oidc from 'oidc-client'

const authority = 'http://sk-20200401voje.domain237.org:5008';
const defaultSettings = new Oidc.UserManager({ 
     //However I have set the store: window.localStorage,but it not writes into sessionStorage.
    userStore: new Oidc.WebStorageStateStore({ store: window.localStorage }),  
    authority: authority,
    client_id: 'vue_js_client',
    redirect_uri: window.location.origin + '/#/signin',
    response_type: 'code',
    scope: 'openid profile read offline_access',
    post_logout_redirect_uri: 'http://sk-20200401voje.domain237.org:8008/#/signout',
    silent_redirect_uri: window.location.origin + '/#/renew',
    accessTokenExpiringNotificationTime: 60,
    automaticSilentRenew: true,
    filterProtocolClaims: true,
    loadUserInfo: true,
    revokeAccessTokenOnSignout: true
})

const accountLoginSettings = new Oidc.UserManager({
    userStore: new Oidc.WebStorageStateStore({ store: window.localStorage }),
    authority: authority,
    client_id: 'js_with_username_pwd',
    redirect_uri: window.location.origin + '/#/signin-user',
    response_type: 'code',
    scope: 'openid profile read offline_access',
    //post_logout_redirect_uri: 'http://sk-20200401voje.domain237.org:8008/#/signout',
    silent_redirect_uri: window.location.origin + '/#/renew-user',
    accessTokenExpiringNotificationTime: 60,
    automaticSilentRenew: true,
    filterProtocolClaims: true,
    loadUserInfo: true,
    revokeAccessTokenOnSignout: true,
    extraQueryParams: { 'LoginPage': 'ShowLoginPage' }
})

const oidcSettings = {
    defaultSettings: defaultSettings,
    accountLoginSettings: accountLoginSettings,
    authority: authority
}

export default oidcSettings

[gabrielbarceloscn]

A bit weird declaration style, you're using.

Here's my implementation, working properly:

const userManagerConfig = {
    client_id: '2AD145F6-4A18-46B1-AAF1-E1D6EABEEB52',
    redirect_uri: `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ''}/auth/callback`,
    response_type: 'token id_token',
    scope: 'openid profile',
    authority: 'https://localhost:5000',
    silent_redirect_uri: `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ''}/silent_renew.html`,
    automaticSilentRenew: true,
    filterProtocolClaims: true,
    loadUserInfo: true,
    🔴 userStore: new WebStorageStateStore({ store: window.localStorage })
};

const userManager = createUserManager(userManagerConfig);

Package version: "oidc-client": "^1.10.1",

[muhammedMoussa]

A bit weird declaration style, you're using.

Here's my implementation, working properly:

const userManagerConfig = {
    client_id: '2AD145F6-4A18-46B1-AAF1-E1D6EABEEB52',
    redirect_uri: `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ''}/auth/callback`,
    response_type: 'token id_token',
    scope: 'openid profile',
    authority: 'https://localhost:5000',
    silent_redirect_uri: `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ''}/silent_renew.html`,
    automaticSilentRenew: true,
    filterProtocolClaims: true,
    loadUserInfo: true,
    🔴 userStore: new WebStorageStateStore({ store: window.localStorage })
};

const userManager = createUserManager(userManagerConfig);

Package version: "oidc-client": "^1.10.1",

what is createUserManager ?

[gabrielbarceloscn]

@muhammedMoussa it´s a method that encapsulates UserManager from 'oidc-client'.

import { UserManager } from 'oidc-client';

export default function createUserManager(config) {
    return new UserManager(config);
}

[florintaranu-bac-lac]

Your code was ok, but you need to make it the same in the callback.html (where the user is actually stored in the storage): new Oidc.UserManager({ response_mode: "query", userStore: new Oidc.WebStorageStateStore({ store: window.localStorage }) }).signinRedirectCallback().then(function () { ... }

[Demon520-coder]

@florintaranu-bac-lac That's right. I have do it as you say. Thank you very much! But the oidc-doc dosen't point this. It may take someone a lot time to resolve it.