Fix useAuthState may logout even though logoutOfFailure is false

[fzaninotto]

Problem

Calling useAuthState() should not logout the user is anonymous. Yet, in some situations, it does.

In particular, calling useAuthState in a CRUD page (e.g. <Edit disableAuthentication>) logs the user out.

export const UserEdit = () => {
  const {isLoading, authenticated} = useAuthState();

  if(isLoading) {
    return <Loading></Loading>;
  }

  return (
    <Edit disableAuthentication>
      <SimpleForm>
         // ...
      </SimpleForm>
    </Edit>
  );
};

Analysis

In this case, there are two calls to authProvider.checkAuthwith the same params (and the same query key):

• one from useCheckAuth() with logoutOnFailure = false. The auth provider returns an error, which should not be used to logout
• one from <Edit disableAuthentication>, which should not execute the authProvider.checkAuth as the disableAuthentication prop leads to a disabled query

Yet, as the two calls use the same query key, react-query populates the response of the second call with the response from the first one. There IS an error in the second call even though the query fn was never called. And since logoutOnFailure is true for the second call, this logs the user out.

Solution

In the useEffectthat monitor the success and error state, do not trigger effects if the query is disabled.

How To Test

Test with the following example: https://github.com/p4it-kft/react-admin-test

log out, then go to a user edit page directlyu by typing /users/1 in the URL

Additional Checks

• The PR targets master for a bugfix, or next for a feature
• [ ] The PR includes unit tests (if not possible, describe why)
• [ ] The PR includes one or several stories (if not possible, describe why)
• [ ] The documentation is up to date