Error: Invalid state auth0

Question

I am trying to implement auth0 in my angular 5 app, following this tutorial: https://toddmotto.com/angular-2-authentication

The register works properly but when I try to log in I get the following in the console:

This is my auth service:

import { Injectable } from '@angular/core';

// We want to avoid any 'name not found'
// warnings from TypeScript
declare var Auth0Lock: any;


@Injectable()
export class AuthService {
    private lock

    constructor() {
        // These stuff should be exported into other files
        this.lock = new Auth0Lock('id...',
            'url...')
    }

    login() {
        this.lock.show((error: string, profile: Object, id_token: string) => {
            if (error) {
                console.log(error);
            } else {
                console.log(profile)
                localStorage.setItem('profile', JSON.stringify(profile));
                localStorage.setItem('id_token', id_token);
            }
        });
    }

    logout() {
        localStorage.removeItem('profile');
        localStorage.removeItem('id_token');
    }
}

Any ideas?

Answer 1

The state parameter is an arbitrary state value that will be maintained across redirects. It is useful to mitigate XSRF attacks and for any contextual information, such as a return url, that you might need after the authentication process is finished.

When you use Auth0.js and/or Lock libraries to trigger an authentication request, Auth0.js will store the nonce and state (either the ones you provided or the ones it automatically generates) in the browser's localStorage. It does so to validate them when the response from the server comes back (in the parseHash or on('authenticated') event.

The missing/invalid state errors can be caused by a few scenarios such as:

1. /authorize request executing from a different scheme (HTTP/HTTPS) than the target callback URL, because the localStorage is not shared across different schemes.

2. Calling the parseHash method two times in a row with the same state (Component may be re-rendering), because upon retrieving the values, Auth0.js will delete the stored information.

3. User trying to login after bookmarking the login page. This is because a new state value should be generated for each request. You can set a default Tenant/Application login URL to redirect user to after detecting such a scenario, more on that here.

4. Using a SAML Identity Provider (IdP) initiated Login flow without the enabledIdPInitiated flag, more on this here.

5. A SAML Service Provider (SP) initiated flow using a custom domain where the SAML provider is using the Auth0 domain for the AssertionConsumerService (ACS) URL.

Please ensure that you have correctly configured your applications as per the points mentioned above. If these don't resolve the issue, perhaps share the repos so we can try to reproduce the issue.