# \[SOLVED\] Auth0 returns a state mismatch upon login in dev environment (auth0-react)

**URL:** <https://community.auth0.com/t/solved-auth0-returns-a-state-mismatch-upon-login-in-dev-environment-auth0-react/94785>\
**Category:** Get Help\
**Tags:** sdks-quickstarts, auth0-react\
**Created:** [November 20, 2022, 8:45pm UTC](https://community.auth0.com/t/solved-auth0-returns-a-state-mismatch-upon-login-in-dev-environment-auth0-react/94785 "2022-11-20T20:45:58Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![karomancer](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/karomancer/32/41387_2.png) [@karomancer](https://community.auth0.com/u/karomancer)\
**Post date:** [November 20, 2022, 8:45pm UTC](https://community.auth0.com/t/solved-auth0-returns-a-state-mismatch-upon-login-in-dev-environment-auth0-react/94785/1 "2022-11-20T20:45:58Z")

</div>

I just wanted to post this here because it took me about 12 hours to solve this problem and I wanted to help others who may have run into it!

## The Problem

I had an issue in using the `@auth0/auth0-react` package in a SPA where I was running on `http://localhost:8080`, it would throw a state mismatch error after correctly authorizing in the new Auth0 login redirect page. I would notice in the URL params that the state Auth0 generated for the login was different than the one it was returned/sent to the callback url. It felt like a race condition at first because it happened about 80% of the time we tried to log in.

A manual refresh reset the state and worked every time.

Honestly, searching online returned very limited results, but I tried:

- Using refresh tokens
- Using the `useCookiesForTransactions` param for `Auth0Provider`
- Adding a specific `/callback` url, react-router `Route`, and component
- Setting my own cookies (even though it was a SPA) as with this [WordPress Invalid State Error article suggested](https://auth0.com/docs/customize/integrations/cms/wordpress-plugin/troubleshoot-wordpress-plugin-invalid-state-errors)
- Downgrading react-router to v5.3 from v6
- Downgrading React from v18.x to v17.x
- Using `https` instead of `http` (yes, even for `localhost`)
- etc

The error I would get back had a stack trace that included lines in webpack’s source code.

### Specs

Relevant package declarations in `package.json`:

- `@auth0/auth0-react": "^1.12.0"`
- `"react": "^18.1.0"`
- `"react-dom": "^18.1.0"`
- `"react-router-dom": "^6.4.3"`
- `"webpack": "^5.72.0"`
- `"webpack-cli": "^4.9.2"`
- `"webpack-dev-server": "^4.9.0"`

Other information:

- Mac OSX 12.4
- Google Chrome Version 107.0.5304.110

## The Solution

Are you ready? It’s super dumb.  
…  
…  
…  
Disabling HMR in Webpack.

We were running with `hot: true` in our webpack config and it caused our app to re-render unnecessarily (even without extra saves while logging in). I’m still not sure _exactly_ why this caused Auth0 to trip up, but it might make sense that since it re-rendered a few extra times when redirecting to the callback, that Auth0 might have thought it was a CSRF attack.

So any of the solutions would work for this problem:

- Add `hot: false` to your `webpack.config.js`

```auto
module.exports = {
...
    devServer: {
        hot: false
        ...
    }
}

```

- Add `watch: false` to your webpack config

```auto
module.exports = {
    ...
    watch: false
}

```

- Use `webpack-dev-server` without the `--hot` flag

Ok. I hope that helps someone save some time. It stumped me and my friend, who graciously decided to help me debug, for a good long while.

Would love to know exactly why this happens, but I’m also just happy with knowing the fix!

---

<div class="post-metadata">

**Author:** ![konrad.sopala](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/konrad.sopala/32/13516_2.png) [@konrad.sopala](https://community.auth0.com/u/konrad.sopala)\
**Post date:** [November 21, 2022, 9:57am UTC](https://community.auth0.com/t/solved-auth0-returns-a-state-mismatch-upon-login-in-dev-environment-auth0-react/94785/2 "2022-11-21T09:57:04Z")

</div>

Thanks for sharing the solution with others. I’m gonna post it here so it’s more easy to find it:

## The Solution

…  
…  
…  
Disabling HMR in Webpack.

We were running with `hot: true` in our webpack config and it caused our app to re-render unnecessarily (even without extra saves while logging in). I’m still not sure _exactly_ why this caused Auth0 to trip up, but it might make sense that since it re-rendered a few extra times when redirecting to the callback, that Auth0 might have thought it was a CSRF attack.

So any of the solutions would work for this problem:

- Add `hot: false` to your `webpack.config.js`

```auto
module.exports = {
...
    devServer: {
        hot: false
        ...
    }
}

```

- Add `watch: false` to your webpack config

```auto
module.exports = {
    ...
    watch: false
}

```

- Use `webpack-dev-server` without the `--hot` flag

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/auth0/original/3X/b/5/b560f266932fcce5d57f09a6595bd50518cae3f3.jpeg) [@system](https://community.auth0.com/u/system)\
**Post date:** [December 5, 2022, 9:57am UTC](https://community.auth0.com/t/solved-auth0-returns-a-state-mismatch-upon-login-in-dev-environment-auth0-react/94785/3 "2022-12-05T09:57:37Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.