Storage events can cause race conditions

In the auth-service there is a storage event listener added. This might cause race conditions. For example:

1. Tab A and Tab B both have the app open, not logged in yet
2. Tab A logs in. Internally in auth-service from the library, a function will run that starts with setting the access_token in storage
3. Tab B starts responding to that change before tab A completes with the function
4. Tab B’s response is to load the user info, and upon response from the server the sub from the response is checked against the Identity Claims in storage, but Tab A never got to save that yet because it’s thread on the CPU didn’t get prio.
5. Tab B will now throw an error because the sub from the user info endpoint doesn’t match null from storage.

So:

• Workaround: wrap logic in setTimeout to make it very likely that Tab A handles everything before Tab B
• Solution: don’t respond to storage events, but make tabs propagate OAuthEvents properly to sibling tabs

[pegma-repo]

@l1b3r I really like your solution. This way the service is not listening to every “access_code” change encountered. I found that extending the condition helps to avoid event firing again after _storage.removeItem() is called and adding an event.key null check helps cover localStorage.clear(). What do you guys think? My 2c.

    window.addEventListener('storage', (event) => {
      if ((event.key === 'auth_data_updated' && event.newValue !== null) || event.key === null) {
        console.log('Auth data has been updated in localStorage');
        this.isAuthenticatedSubject$.next(this.oauthService.hasValidAccessToken());

        if (!this.oauthService.hasValidAccessToken()) {
          this.navigateToLoginPage();
        }
      }
    });

PS: I used this with your storeAccessTokenResponse() override. Thank you for sharing! Edit: typos & ps

[jeroenheijmans]

Thx for the additional option @l1b3r! I’m leaving this issue open for now, it’s linked from the sample code too so others might want to use your solution for their apps! ❤️