React SDK claimCheck prop infinite loop issue

Help
1

SDK:

@auth0/auth0-react v. 1.1.0

The withAuthenticationRequired method accepts a claimCheck prop.

This is used here:

const routeIsAuthenticated = isAuthenticated && claimCheck(user);

The problem is the following.

Suppose we have a protected route /protected-route and we want users that are missing a certain claim to be navigated away from this route towards some other route let’s say /home (i.e. in the case that the claimCheck callback resolves to false). At the same time, we want users that do have this claim to be redirected back to this route (after the authentication flow).

As it stands now, the same returnTo prop is used in either case:

   const opts = {
        ...loginOptions,
        appState: {
          ...loginOptions.appState,
          returnTo: typeof returnTo === 'function' ? returnTo() : returnTo,
        },
      };
      (async (): Promise<void> => {
        await loginWithRedirect(opts);
      })();

This leads to infinite loop behaviour since we’re treating the claimCheck false case effectively the same as a non-authenticated user (from a returnTo prespective).

I propose we provide an altReturnTo prop to enable the app to redirect users to some other route specifically for the case that claimCheck(user) resolves to false.

The point is to be able to distinguish between these two cases:

  • isAuthenticated && claimCheck(user)
  • isAuthenticated && !claimCheck(user)
1 Like