Angular-oauth2-oidc: error invalid_nonce_in_state

[Jesc6417]

Hi,

here's my issue. I've set up my angular application with angular-oauth-oidc npm package.
I've an invalid_nonce_in_state error that I can't fix.

Here's the behavior.
1 - I'm loging in my application. Life time of session is around 5 minutes.
2 - I close tab in my browser which display my application and wait for more than 5 minutes so that my session is finished.
3 - I reopen a new tab ant try to get access to my application. As my token isn't valid anymore, I get a new one however the nonce isn't valid.

When my application start, I try to login:
this.oAuthService.loadDiscoveryDocumentAndTryLogin();

As far as I can see I get a new tokens (id_token and access_token).
In OAuthService.prototype.tryLogin:

var state = parts['state']; // => state = "f9N16fCnypbhK97ewg23brqrowqkrfS5gO4J0gDR"
var nonceInState = state; // => nonceInState = "f9N16fCnypbhK97ewg23brqrowqkrfS5gO4J0gDR"

Nonce from my new token will be verified with nonce in my localStorage with OAuthService.prototype.validateNonceForAccessToken.

var savedNonce = this._storage.getItem('nonce'); // => savedNonce = "FCpDW1apX7zQTzq0PkXbE7l2wedjhZKRFnwaDHsn"
if (savedNonce !== nonceInState) {
var err = 'Validating access_token failed, wrong state/nonce.';
console.error(err, savedNonce, nonceInState);
return false;
}

Expected behavior
In this process, as I'm requesting new tokens, I expected to go throw OAuthService.prototype.createAndSaveNonce so that we get a new nonce which is stored in localstorage.
Like this, when we go throw OAuthService.prototype.validateNonceForAccessToken, we get the new nonce and we can check it.

May be there's something that I haven't understand... I've tried to find a solution here without success...

Thanks for your help

[CharlyRipp]

Had the same thing for a while -- I have yet to get loadDiscoveryDocumentAndTryLogin to work.
Looking at the code, looks like it should work like a charm, but instead I had to revert to keeping them separate, also adding a bypass when you currently have a valid token

this.oAuthService.loadDiscoveryDocument().then(doc => {
      if (this.oAuthService.hasValidIdToken()) {
        // Bypass on refresh with valid token
      } else {
        this.oAuthService.tryLogin({
          onTokenReceived: (info: ReceivedTokens) => {
...

[rahulrastogi-git]

try using authconfig (oauthService.configure(authConfig)), instead of oauthservice properties.

[Jesc6417]

Hi,

thanks for your help!
@CharlyRipp: I've tried your solution, but even like this, I've still an error with invalid_nonce_in_state...

@rahulrastogi-git : sorry but I don't understand your comment. What do you mean by

try using authconfig (oauthService.configure(authConfig)), instead of oauthservice properties.

Here's my code using the comment form CharlyRipp:

  this.oAuthService.configure(config);
  this.oAuthService.setStorage(localStorage);
  this.oAuthService.tokenValidationHandler = new JwksValidationHandler();
  this.oAuthService.setupAutomaticSilentRefresh();
  // this.oAuthService.loadDiscoveryDocumentAndTryLogin();
  this.oAuthService
    .loadDiscoveryDocument()
    .then((doc: object) => {
      if (this.oAuthService.hasValidIdToken()) {
        // Bypass on refresh with valid token
      } else {
        this.oAuthService.tryLogin({
          onTokenReceived: (info: ReceivedTokens): void => {
            // Do something when token is received
          },
        });
      }
    });

And here's my config ({0} are replaced before using this.oAuthService.configure(config);):

        "issuer": "http://localhost:4211",
        "clientId": "Application",
        "redirectUri": "{0}/callback",
        "logoutUrl": "{0}/home",
        "scope": "openid api1",
        "oidc": true,
        "silentRefreshRedirectUri": "{0}/silent-refresh.html",
        "showDebugInformation": true,
        "postLogoutRedirectUri": "{0}/home",
        "sessionChecksEnabled": false,
        "requireHttps": false

[jeroenheijmans]

Hmm, this seems pretty weird to me. If you only call loadDiscoveryDocumentAndTryLogin then only "_try_ Login" is called, which does not actually send you to the IDS, but just tries to grab the details from the URL (nonce, tokens, etc). If you open the app the second time, the URL should contain none of those details.

Could you try to create a more detailed reproducible scenario, e.g. on StackBlitz, so we can also check out the issue? Without it it's kind of hard to reliably help.

You could also try using the login flow from my sample repo or something similar, see if that helps?

[jeroenheijmans]

Since things went quiet since last September, I'm hoping/assuming that you resolved things in the mean time. Let us know if you have additional details and we should reopen the issue!

[jornare]

We're also getting this error every now and then. We have noticed at least while using Angular 9, but we may have had the issue in A8 as well. Can't really pinpoint when it happens, it seems sort of random.

[jvelonis]

I got this when I accidentally left a call to oauthService.logOut in the constructor of my app component.

[haricharank9]

I am also facing this issue with v9.2.2 and Angular V9 very randomly. Can anyone suggest a fix for this issue

[gaalvarez]

In my case this error was causes by do not call tryLogin in initialization of application.

[JoanGil]

I've experienced this same issue with Angular 10. The reason was that I tried to save some data to the sessionStorage. Removing the piece of code accessing the sessionStorage solved the issue. Maybe this can help to find the problem.