Auth0 Redirect Request Cancelled in Chrome v141

This article explains why a login redirect request may be cancelled in Google Chrome (v141 and newer). This issue occurs in a Single Page Application (SPA) using the Auth0-React Software Development Kit (SDK) when the login function is triggered from within an HTML form. The browser's developer tools show the redirect request as "cancelled" without further details.

• Auth0-React SDK
• SPA
• Google Chrome (v141 and later) 

The root cause is the loginWithRedirect method being invoked directly from a standard HTML form's onSubmit event listener. Newer versions of Chrome treat this sequence as a conflicting navigation. The browser cancels the loginWithRedirect request because it originates from a form submission event that does not complete its default action.

To resolve this issue, the form's default submission behavior must be prevented before calling the loginWithRedirect method.

1. Locate the onSubmit event handler for the login form.
2. Modify the handler to accept the event object (e.g., e).
3. Call the preventDefault() method on the event object.
4. Call the loginWithRedirect() method after preventing the default action.

Example

Incorrect Code (Before):

<Stack
      component="form"
      ...
      onSubmit={ loginWithRedirect }
      ...
 >
 ...
</Stack>

Correct Code (After):

<Stack
      component="form"
      ...
      onSubmit={(e) => {
        e.preventDefault()
        loginWithRedirect()
      }}
      ...
 >
 ...
</Stack>