OAuthErrorEvent: {"type":"invalid_nonce_in_state","reason":null,"params":null}

[tiefenauer]

Describe the bug
After successful login using implicit flow and retrieval of Access/ID token the login fails if the local storage is cleared. Login is only possible again after the token expired.

Stackblitz example
I uploaded a minimal application which reproduces the bug: https://github.com/tiefenauer/angular-oauth2-oidc-bug

To Reproduce
Steps to reproduce the behavior:

1. Replace dummy values in auth-config.ts with real values (issuer, clientId and userInfoEndpoint)
2. Run application using ng serve
   4.open http://localhost:4200/ --> you are redirected to your IDPs login page (OK)
3. Log in using valid credentials --> you are taken back to the app with the acccess- and id-token in the URL (OK)
4. Open debug tools and clear local storage (i.e. also the access and id token)
5. navigate to lo http://localhost:4200/ again --> you are redirected to your IDPs login page (OK)
6. Log in using valid credentials --> you are taken back to the app but get an error invalid_nonce_in_state (NOK)

I noticed a similar issue #728 suggesting there's a race condition.

Expected behavior
When calling oauthService.loadDiscoveryDocumentAndLogin() without a nonce in the local storage the login process should start anew.

Additional context
When disabling nonce check it works, but that can't be the solution since it leaves the application vulnerable to replay attacks.
see https://github.com/tiefenauer/angular-oauth2-oidc-bug/blob/main/src/app/auth/auth.service.ts#L27-L30

[jeroenheijmans]

Huhmm, interesting situation. Thx for sharing a clear repro!

It's a bit of an odd set of steps though, or at least step 4 is? I can imagine this library cannot handle it if localStorage is cleared halfway through the process... But then again, perhaps step 4 is simulating some real world situation we don't know about yet?

Looking at the code of the service, it does indeed not like it if localStorage gets cleared, because you're bypassing the library's internal storage mechanisms, and I think you might be missing clearing out other parts, like the nonce, which is saved in sessionStorage by default:

angular-oauth2-oidc/projects/lib/src/oauth-service.ts

Lines 2497 to 2503 in d95d7da

	if (this.saveNoncesInLocalStorage) {
	localStorage.removeItem('nonce');
	localStorage.removeItem('PKCE_verifier');
	} else {
	this._storage.removeItem('nonce');
	this._storage.removeItem('PKCE_verifier');
	}

Some things you can try to test this:

• Try your scenario while using sessionStorage as your OAuthStorage. Then if you clear that in step 4, you'd also clear the nonce.
• If step 4 is for some reason really necessary in your app, then also clear sessionStorage.
• Even though I don't like it, it seems there's a protected saveNoncesInLocalStorage field on the service which you could "monkey patch" or change by supplying a subclass of your own (the field does not seem to be available on OAuthConfig for some reason).

Hope these steps help you find a solution!

Let us know if there's a real world situation where step 4 would happen for actual users, because if it is I guess this issue would instead be a missing feature or bug in the library.

[tiefenauer]

I was able to get it tow work by using sessionStorage instead of localStorage. I also simplified the setup of the minimal application by following the steps outlined in this article: https://angular.de/artikel/oauth-odic-plugin/#umsetzung-in-angular (in German)

I pushed the working version to the GH repo as a reference if others are struggling with this, too. The original code is still available in the original-bug branch should anybody be interested.

[jeroenheijmans]

Good to hear! And thanks for sharing 👍