question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

withAuthenticationRequired causing infinite loops when calling wrapped component's effect

See original GitHub issue

Describe the problem

Since upgrading to 1.2.0 from 1.0.0, it seems that creating a ProtectedRoute using withAuthenticationRequired leads to infinite remounting of components.

I am using React 16.13.1, react-router-dom 5.2.

This problem does not happen with auth0-react 1.0.0

export const ProtectedRoute = ({
                                component,
                                ...args
                              }: {
  component: ComponentType;
  exact?: boolean;
  path: string;
}) => {
  const Comp = withAuthenticationRequired(component, {});
  // @ts-ignore
  return <Route {...args} render={(props) => <Comp {...props} />} />;
};

Usage that will cause it to break

// imagine this is inside a switch in react-router
<ProtectedRoute component={MyComponent} path="/whatever" />

// now this is our MyComponent, it calls an async thunk

function MyComponent() {
  const fetchResults = async () => {
    try {
      dispatch(someAsyncThunk());
    } catch (err) {
    }
  };

  useEffect(() => {
    fetchResults();
  }, []);

  return (<div>I will just keep calling my effect!</div>)
}

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
dilhansaricacommented, Mar 25, 2021

It would be awesome to have a hook helper like useLoginRedirectEffect() to do somethings like this


const ProtectedRoute = ({
  component: Component,
}: {
  component: React.ComponentType;
}) => {
  const AuthMetadata = useSelector((state: State) => state.auth.entity);
  const { isAuthenticated, isLoading, loginWithRedirect } = useAuth0();
  const options = {
    loginOptions: buildLoginOptions(AuthMetadata),
  };
  const beforeRedirect = () => {
    if (!isAuthenticated) {
      localStorage.setItem(
        LOCALSTORAGE_ENUM.REDIRECT_URL,
        window.location.href,
      );
    }}
  const [ onRedirecting ] = useLoginRedirectEffect(options, beforeRedirect)
  return isAuthenticated ? <Component /> : onRedirecting();
};

1reaction
typecommented, Dec 23, 2020

My bad, I had an axios interceptor that got left in on accident in the App.jsx component that was using getAccessTokenSilently(). This was working okay with 1.0.0 but broke with 1.2.0. But not really a bug!

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Solve the Infinite Loop of React.useEffect()
1. The infinite loop and side-effect updating state. A functional component contains an input element. Your job is to count and display how...
Read more >
The Complete Guide to React User Authentication with Auth0
The focus of this tutorial is to help developers learn how to secure a React application by implementing user authentication.
Read more >
ReactJS - Infinite Loop calling Wrapped Method - Stack Overflow
Simplify your life and instead of creating a bunch of wrappers, just create a single container-component that'll function the same way.
Read more >
How to solve the React useEffect Hook's infinite loop patterns
Solve the issue of infinite loops when using the useEffect Hook in React to more smoothly utilize the Hook for your app's side...
Read more >
uncaught error too many re-renders. react limits the number of ...
React limits the number of renders to prevent an infinite loop ... This causes the setOrderData_ function to be called in every render...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found