Log in error: "invalid token", description: "`state` does not match"

Help
1

Hi there. I have been using auth0 authorization with Angular2 for two weeks and everything was fine. But after merging my branch with master i can’t log in anymore.

The whole process is: I can pass log in authorization at auth0 site. After redirection to “redirectUri” i start to catch Object {error: “invalid_token”, errorDescription: “state does not match.”}. Adress line is not empty and consists of my page path and response token. Also i am using single page application is the setting of client.

I cant access what i had before merging, so i need to use what i have at this moment.
Version of auth0

auth.service.ts

    auth0 = new auth0.WebAuth({
        clientID: HIDEN,
        domain: HIDEN,
        responseType: 'token id_token',
        audience: HIDEN,
        redirectUri: 'http://localhost:5000/callback',      
        scope: 'openid'
      });
    
      constructor(public router: Router) {}
    
      public handleAuthentication(): void {
        this.auth0.parseHash((err, authResult) => {
          if (authResult && authResult.accessToken && authResult.idToken) {
            window.location.hash = '';
            this.setSession(authResult);
            this.router.navigate('http://localhost:5000/administrativeTools']);
          } else if (err) {
            this.router.navigate('http://localhost:5000/welcome']);
            console.log(err);
          }
        });
      }

private setSession(authResult): void {
    // Set the time that the access token will expire at
    const expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime());
    localStorage.setItem('access_token', authResult.accessToken);
    localStorage.setItem('id_token', authResult.idToken);
    localStorage.setItem('expires_at', expiresAt);
  }

package.json

"auth0-js": "^8.12.1",

    "@angular/cli": "^1.5.2",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "concurrently": "^3.1.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "lite-server": "^2.3.0",
    "protractor": "~5.1.2",
    "ts-node": "^3.2.2",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
2

Can you also share the login code or confirm that is just a call to this.auth0.authorize()? There’s been a few reports of this although under different scenarios and I also previously failed to reproduce a similar situation. I’ll be trying again, but if you think have additional information that might be useful, do share.

3

Thank you for such fast response.

For login from component i am using:

constructor( private router: Router, public auth: AuthService ){ if(!auth.isAuthenticated()){ auth.login(); } }

And the auth.service.ts

   public login(): void {
          this.auth0.authorize();
        }
4

I tried to reproduce this by using the Angular quickstart login step as the foundation for my app. I updated the dependencies to use Auth0.js 8.12.1, but used Angular ^4.3.1 while you have ^4.2.4 although it’s highly not related. Using that quickstart step with the updated Auth0.js library I could not reproduce any issue with state validation.

By default, if you don’t provide an explicit state then Auth0.js will generate one and store it in web storage so that it can validate the received response. You might want to troubleshoot this by inspecting storage and the value of that state parameter both in the HTTP requests and final redirect to your client application.

5

I have found solution. This block of code was in index.html. Without it everything works fine.

<script>
    window.onbeforeunload = function(e) {
      localStorage.clear();
    };
  </script>

Thank you for help.

6

I have found solution. This block of code was in index.html. Without it everything works fine.

<script>
    window.onbeforeunload = function(e) {
      localStorage.clear();
    };
  </script>

Thank you for help.