Encountering Invalid State Error After long Stay on Login Page

Get Help
,
1

Hi Community,

I’m facing some challenges related to the invalid state error in my application, and did’t been solved in previous topic: link

I would greatly appreciate some insights.

In my app, I use the loginWithRedirect() method from the @auth0/auth0-react package, which directs users to the /authorize endpoint. By monitoring network requests, I observed the following sequence:

Two requests to:

https://auth.myxxx.dev/authorize?audience=https...&client_id=...&redirect_uri=...&scope=...&response_type=code&...

And then:

https://auth.myxxx.dev/login?state=...&client=...&protocol=...

The issue arises if a user stays on the https://auth.myxxx.dev/login page for too long. When they try to log in after entering their username and password, they encounter the invalid state error.

Here are my key questions:

  1. Based on my understanding, the state is generated by the SDK before accessing the /authorize endpoint, and the SDK checks if the state in the response matches the one sent, to prevent CSRF attacks. Given that I’ve already accessed the /authorize endpoint, why does the invalid state error still occur on the login page?
  2. My login page is hosted on Auth0’s Universal Login. The invalid state error occurs when calling WebAuth.login(). Could I resolve this issue by first calling webauth.authorize() on this page? If so, what are the essential parameters I need to pass to ensure this works correctly?

I appreciate any guidance or suggestions on how to address this issue. Thanks in advance!