Overview
An “invalid state” error is seen when logging a user into a React application, but tenant logs indicate a successful authentication.
Applies To
- Auth0-react SDK
Cause
This can occur if the implementation of the React application causes the handleRedirectCallback function to be called more than once, for example, by calling it within useEffect.
This may surface as a “missing-transaction” error when network logs show the state being returned in the callback:
const transaction = this.transactionManager.get();
if (!transaction) {
throw new GenericError('missing_transaction', 'Invalid state');
}
this.transactionManager.remove();
If handleRedirectCallback is triggered more than once for a single callback request, it can result in a race condition as the SDK removes the transaction record, then the second execution fails to find the transaction state and thus throws an invalid state error before the login can finish processing and proceed.
Solution
It is recommended to follow the guide linked below and compare it with the implementation of the application experiencing the issue.
The handleRedirectCallback function should not be triggered directly or indirectly by useEffect because it can result in it being triggered multiple times.
In the second link below, it can be seen that useEffect is not used for the login flow in the sample application: