Automatic silent refresh fails with multiple tabs when localStorage is used

Describe the bug When an application configures the angular-oauth2-oidc client to use localStorage, the automatic silent refresh process for the code flow fails when multiple tabs are opened.

Stackblitz example The issue can be trivially reproduced using the sample app, with the only required modification being to add the following to appModule.ts

export function storageFactory(): OAuthStorage {
  return localStorage;
}

and add the following provider in the module:

{ provide: OAuthStorage, useFactory: storageFactory },

To Reproduce Steps to reproduce the behavior:

1. Open the sample app in a new incognito tab in Chrome
2. Click “Login with Code Flow” and sign in
3. Open dev tools and observe the periodic console messages saying that the refresh token is being used
4. Open the sample app in a new incognito tab
5. Open dev tools in the new tab
6. Check the consoles in both tabs, eventually an error will appear in one of them
7. Observe error in the console: Error refreshing token

Note that the session checking kicks in and causes the token to refresh again successfully. In applications where session checking is not configured, the refreshing does not recover.

Expected behavior The refreshing of tokens should be thread safe such that when localStorage is used multiple tabs do not try to refresh using the same refresh token at the same time.

[myushchenko]

In order to fix issue with localStorage I suggest to use new Lock API https://developer.mozilla.org/en-US/docs/Web/API/Web_Locks_API and refresh token by hand

locks.request('my_resource', async () => {
  await this.oAuthService.refreshToken();
});

[jeroenheijmans]

new incognito tab in Chrome … The error Message is than allways “login_required”

@KirschbaumP This is I think a different symptom than this issue describes (a race condition), and most likely due to third party cookie problems? I presume your IDS lives on another domain than your SPA when you encounter this? You could check my blogpost https://infi.nl/nieuws/spa-necromancy/ for a problem description, and some potential solutions/workarounds.