title: Auth0: `state` does not match on FireFox
body: <p>I have developed a web app using React, using Auth0 for authentication process. I have encountered a problem - every time I successfully login into the web app, when I refresh the page, it would throw the error:</p>
  
  <blockquote>
    <p>'state' does not match</p>
  </blockquote>
  
  <p>Here is my <code>Auth.js</code>:</p>
  
  <pre><code>class Auth {
    constructor() {
      this.link = 'https://mywebapp.com'
      this.auth0 = new auth0.WebAuth({
        domain: &lt;MY_DOMAIN&gt;',
        audience: &lt;AUDIENCE_LINK&gt;,
        clientID: &lt;CLIENT_ID&gt;,
        redirectUri: `${this.link}/callback`,
        responseType: 'token id_token',
        scope: 'openid email profile'
      });
  
      this.getProfile = this.getProfile.bind(this);
      this.handleAuthentication = this.handleAuthentication.bind(this);
      this.isAuthenticated = this.isAuthenticated.bind(this);
      this.signIn = this.signIn.bind(this);
      this.signOut = this.signOut.bind(this);
    }
  
    getProfile() {
      return this.profile;
    }
  
    getIdToken() {
      return this.idToken;
    }
  
    isAuthenticated() {
      return new Date().getTime() &lt; this.expiresAt;
    }
  
    signIn() {
      this.auth0.authorize({}, (err, authResult) =&gt; {
        if (err) this.localLogout();
        else {
          this.localLogin(authResult);
          this.accessToken = authResult.accessToken;
        }
      });
    }
  
    handleAuthentication() {
      return new Promise((resolve, reject) =&gt; {
        this.auth0.parseHash((err, authResult) =&gt; {
          if (err) {
            alert(err.errorDescription)
            this.signOut()
            return reject(err);
          }
          if (!authResult || !authResult.idToken) {
            return reject(err);
          }
          this.setSession(authResult);
          resolve();
        });
      })
    }
  
    setSession(authResult) {
      this.idToken = authResult.idToken;
      this.profile = authResult.idTokenPayload;
      this.expiresAt = authResult.idTokenPayload.exp * 1000;
    }
  
    signOut() {
      // clear id token, profile, and expiration
      this.auth0.logout({
        returnTo: `${this.link}`,
        clientID: &lt;CLIENT_ID&gt;,
      });
    }
  
    silentAuth() {
      return new Promise((resolve, reject) =&gt; {
        this.auth0.checkSession({}, (err, authResult) =&gt; {
          if (err) return reject(err);
          this.setSession(authResult);
          resolve();
        });
      });
    }
  }
  </code></pre>
  
  <p>Here is my React router setup:</p>
  
  <pre><code>const SecureRoute = (props) =&gt; {
    const {component: Component, path, checkingSession } = props;
    return (
      &lt;Route path={path} render={() =&gt; {
          if (checkingSession) return &lt;div&gt;Loading...&lt;/div&gt;
          if (!auth0Client.isAuthenticated()) {
            auth0Client.signIn();
            return &lt;div&gt;&lt;/div&gt;;
          }
  
          return &lt;Component /&gt;
      }} /&gt;
    )
  }
  
  class AppStack extends Component {
      constructor(props) {
          super(props);
          this.state = {
            checkingSession: true
          }
      }
  
      async componentDidMount() {
          if (this.props.location.pathname === '/callback') {
            this.setState({checkingSession:false})
            return;
          }
          try {
            await auth0Client.silentAuth();
            this.forceUpdate();
          } catch (err) {
            if (err.error !== 'login_required') console.log(err.error);
          }
          this.setState({checkingSession:false})
      }
  
      render() {
          return (
              &lt;div className="site-wrap"&gt;
                  &lt;AppHeader /&gt;
                  &lt;div className="main"&gt;
                      &lt;Switch&gt;
                          &lt;Route exact path="/" render={() =&gt; &lt;Redirect to="/dashboard"/&gt;} /&gt;
                          &lt;SecureRoute exact path="/dashboard" component={Dashboard} checkingSession={this.state.checkingSession}/&gt;
                          &lt;SecureRoute exact path="/project" component={Project} checkingSession={this.state.checkingSession}/&gt;
                          &lt;SecureRoute exact path="/project/:page" component={Project} checkingSession={this.state.checkingSession}/&gt;
                          &lt;SecureRoute exact path="/profile" component={Profile} checkingSession={this.state.checkingSession}/&gt;
                          &lt;SecureRoute exact path="/profile/:page" component={Profile} checkingSession={this.state.checkingSession}/&gt;
                          &lt;Route exact path="/signout" component={Signout}/&gt;
                          &lt;Route exact path='/callback' component={Callback}/&gt;
                          &lt;Route component={NoMatch} /&gt;
                      &lt;/Switch&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>Here is the screening of the problem:
  <a href="https://www.loom.com/share/0c25158cf6b54db288a7c94987f8bb9a" rel="nofollow noreferrer">https://www.loom.com/share/0c25158cf6b54db288a7c94987f8bb9a</a></p>
  
  <p>Any reason why I am getting this error when I refresh the page ?</p>
  
  <p>Thanks for any advice !</p>