Invalid State Errors on handleRedirectCallback - Auth0 React SDK

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:

Recommended content

No recommended content found...