loginWithPopup close doesn't return any error response

[JeremyLiang0105]

Checklist

• The issue can be reproduced in the auth0-react sample app (or N/A).
• I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• I have looked into the API documentation and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Description

We are using loginwithpopup (Auth0's sdk link) to open the Auth0's universal login MFA enrollment prompt in a popup window. The issue we are encountering is we cannot find a way to handle if the user closes/cancels the popup page. The expected behavior is that when the user closes the popup, it should return us an error to indicate it so we could catch it and display an error on our app to instruct the user to click the button to open the popup again. We've tried the solutions from auth0/auth0-spa-js#599 but it doesn't work because we don't receive any error response. The happy path works fine
This is the code we use

import { useAuth0 } from '@auth0/auth0-react';
 const { loginWithPopup } = useAuth0();
 try {
   await loginWithPopup({
     audience: `https://${getWebsocketBaseUrl()}/api`,
     enroll_mfa: true,
    });
 } catch (e) {
      console.debug('Popup was closed before login completed');
 }

No error is being thrown when the user closes the popup without completing the steps.

The version of auth0-react we are using is "@auth0/auth0-react": "1.12.1"

Reproduction

Code snippet copied above.

Additional context

No response

auth0-react version

1.12.1

React version

18

Which browsers have you tested in?

Chrome

[JeremyLiang0105]

Got redirected here from the issue I raised in auth0-spa-js repo: auth0/auth0-spa-js#1334

[JeremyLiang0105]

@saadman13

[saadman13]

Same behavior on Firefox too.

[nicosabena]

Hey @JeremyLiang0105
The paradigm with auth0-react is different than the one in auth0-spa-js.
useAuth0().loginWithPopup won't throw an error if it fails. Instead, it will update the error state (obtained from useAuth0().error), so that your components can react to it.

A crude example:

const myComponent = () => {
  const { error, isLoading, isAuthenticated } = useAuth0();
  
  if (error) {
    return <div>There was an error while authenticating: {error}</div>;
  }
  // ...
}

See https://github.com/auth0/auth0-react/blob/main/examples/cra-react-router/src/App.tsx for another example.

See here how the error from auth0-spa-js is caught and transformed into a state update via a dispatch.

[tusharpandey13]

Thank you for this, we have identified the root cause and we will make a minor release shortly along with other features.

[nandan-bhat]

Hey @JeremyLiang0105 ,

@nicosabena is correct. You can determine if the popup was closed by checking the error property from const { error } = useAuth0();

Example:

const { error } = useAuth0();

useEffect(() => {
  if (error?.message === 'Popup closed') {
    console.log('Popup Cancelled');
  }
}, [error]);

And since you mentioned you're not using the latest version of auth0-react, we’d recommend updating to it—unless there's a specific reason you can’t.

[tusharpandey13]

Closing as a resolution has been found.