Endless retries when authority / authorization server is not responding

[tinnakaren]

Not sure if this is a bug or some configuration I'm missing, but is there a way to stop the withAuthenticationRequired hoc from retrying (seemingly endlessly) to call the authorization server when there's a network error (or if the server isn't responding)?

I have requestTimeoutInSeconds setting set to 3, and if I'm e.g. on the login page (which calls auth.signinRedirect), the useAuth hook is able to reach the oidc client, which respects the timeout and returns with an error "Failed to fetch".

But if I'm on a route that's protected with the withAuthenticationRequired hoc, it goes into some redirecting loop, and tries to reach the authorization endpoint repeatedly.

[a1dutch]

i am seeing the same thing, it needs state on whether its previously checked auth or not

[tinnakaren]

i am seeing the same thing, it needs state on whether its previously checked auth or not

Thanks for replying @a1dutch 🙂

Could you elaborate a bit on that or show an example of what you mean? Do you mean to implement something similar to what is done for automatic sign-in? (https://github.com/authts/react-oidc-context?tab=readme-ov-file#automatic-sign-in)?

[a1dutch]

yes i was thinking something like the example you posted. i was seeing 90k requests in the network tab!!!

i have been testing a fix locally (a cut down version) see below, it could be improved to try n times or maybe include a setTimeout.

export const withAuthRequired = <P extends object>(
  Component: React.ComponentType<P>
): React.FC<P> => {
  const displayName = `withAuthRequired(${Component.displayName || Component.name})`;
  const C: React.FC<P> = (props) => {
    const auth = useAuth();
    const [ hasTriedAuth, setHasTriedAuth ] = useState(false);

    React.useEffect(() => {
      if (hasAuthParams() || auth.isLoading || auth.activeNavigator || auth.isAuthenticated || hasTriedAuth) {
        return;
      }
      setHasTriedAuth(true);
      void (async (): Promise<void> => {
        await auth.signinRedirect();
      })();
    }, [auth.isLoading, auth.isAuthenticated, auth, hasTriedAuth]);

    return auth.isAuthenticated ? <Component {...props} /> : null;
  };

  C.displayName = displayName;

  return C;
};

[pamapa]

I would accept such a pull request, including try n times or maybe include a setTimeout using defaults but overridable via props...