5

I have authorization in Angular 8 handled by (oidc-client.js) + .Net Core IdentityServer4.

Everything seems to work fine, but when I open the same application in second tab then it requires from me to login again. IdentityServer4 has cookie so it's enough to click Login button and new token will be received without providing login/password again. Anyway it's still annoying.

Is it any way to solve it? I found question on githubg that might be partially helpful.

Some people suggesting that need to change token localization from LocalStorage to SessionStorage. But personally SessionStorage is better and I would keep it in that place.

DiPix
  • 5,755
  • 15
  • 61
  • 108
  • I am using https://github.com/manfredsteyer/angular-oauth2-oidc instead of oidc-client.js and it handles this scenario fine – ElasticCode Jul 07 '19 at 08:18
  • 1
    @ElasticCode I prefer oidc-client.js since it is from IdentityServer Team, and is up to date, for example angular-oauth2-oidc is not supporting PKCE. – DiPix Jul 08 '19 at 20:11

1 Answers1

0

If you like to use the SessionStorage (which seems to be correct) in several tabs, you could either copy its data between the tabs, for instance using LocalStorage event (see the code sample below) or BroadcastChannel, as described in this Q&A, or implement autologin, like an alternative solution does. 

(function(){

    if (!sessionStorage.length) {
        // trigger the event to get anything from other tabs
        localStorage.setItem('getSessionStorage', Date.now());
    };

    window.addEventListener('storage', function(event) {

    if (event.key == 'getSessionStorage') {

        //set and remove, so do not really keep the data in LS, but push it into event 
        localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
        localStorage.removeItem('sessionStorage');

    } else if (event.key == 'sessionStorage' && !sessionStorage.length) {

        var data = JSON.parse(event.newValue);

        for (key in data) {
            sessionStorage.setItem(key, data[key]);
        }
    }
});
d_f
  • 4,599
  • 2
  • 23
  • 34
  • Sounds nice, I'll check it and I let you know if it helped. – DiPix Jul 03 '19 at 07:44
  • I was trying to find less complicated solution, but it seems that it has to be done by communication between tabs via LocalStorage. – DiPix Jul 08 '19 at 20:10
  • as i mentioned, a real alternative is to implement autologin, then each tab performs the challenge silently. the solution from [damienbod](https://github.com/damienbod/angular-auth-oidc-client) does that out of the box. I believe it's not a problem to do the same with oidc-client.js. nevertheless comparing these two libs a year ago, we found the angular one a bit more convenient when using with angular projects – d_f Jul 09 '19 at 16:21