The Complete Guide to React Authentication with Auth0

I consulted further with our SDK Team.

This is how I may be modifying the React Router 6 code sample (It’s on TypeScript right now but the same change would happen on JavaScript):

The plan is to move from using useNavigate() and BrowserRouter to the unstable_HistoryRouter offering from React Router v6.

unstable_HistoryRouter let us use history to control how the onRedirectCallback works. In the sample app, you may have a user who is logged out who wants to access the /admin page directly. The ideal user experience is to redirect the user to /admin page after they complete their log in process.

Using BrowserRouter on its own does not let us do that. The problem that you are seeing does not come from the Auth0 React SDK but rather from React Router v6 and how its useNavigate() > navigate method works. You can see others validating this issue here: useNavigate hook causes waste rendering · Issue #7634 · remix-run/react-router · GitHub

Hopefully, unstable_HistoryRouter becomes a stable offering from React Router to provide the same seamless user experience during login that we are able to offer with React Router v5.

3 Likes