auth0-react doesn't play well with useNavigate and useBlocker

[gonzalob]

Checklist

• The issue can be reproduced in the auth0-react sample app (or N/A).
• I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• I have looked into the API documentation and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Description

When wrapping a component with withAuthenticationRequired, having useNavigate in the same component, blockers don't activate.

We can provide a minimal sample project: https://github.com/blockademy/auth0-react-and-usenavigate

Reproduction

Use withAuthenticationRequired and useNavigate at the same time (as in https://github.com/blockademy/auth0-react-and-usenavigate/blob/main/src/AuthGuard.tsx)

Then configure a react Blocker anywhere.

Additional context

No response

auth0-react version

2.8.0

React version

19.2.0

Which browsers have you tested in?

Chrome

[yogeshchoudhary147]

Hi @gonzalob,

Thanks for reporting this and providing the reproduction repository!

I’ve acknowledged the issue and we'll investigate the interaction between withAuthenticationRequired and the React Router hooks, especially in the context of React 19.

We'll update this thread once we've had a chance to dig into the sample project.

[yogeshchoudhary147]

Hey @gonzalob,

Thanks for the solid repro! This is an interesting one.

So here's what's happening: useNavigate() subscribes your parent to router state, which means every navigation attempt triggers a re-render. Each time that happens, withAuthenticationRequired returns a fresh function. React compares by reference, sees it's different, and thinks "new component!" so it unmounts the old one and mounts the new one. Problem is, during unmount useBlocker unregisters itself. By the time the new component finishes mounting and sets up its blocker again, the navigation already completed.

[yogeshchoudhary147]

Could try moving withAuthenticationRequired outside the render:

// Current pattern (inside render)                                                                                                                                              
export const AuthGuard = (props: { component: ComponentType }) => {                                                                                                             
 useNavigate();                                                                                                                                                                
 const Component = withAuthenticationRequired(props.component);                                                                                                                
 return <Component />;                                                                                                                                                         
}; 

// Try this instead (factory pattern)                                                                                                                                           
export const createAuthGuard = (Component: ComponentType) => {                                                                                                                  
  const ProtectedComponent = withAuthenticationRequired(Component, {                                                                                                            
    onRedirecting: () => <div>loading!</div>                                                                                                                                    
  });                                                                                                                                                                           
                                                                                                                                                                                
  return () => {                                                                                                                                                                
    useNavigate();                                                                                                                                                              
    return <ProtectedComponent />;                                                                                                                                              
  };                                                                                                                                                                            
};                                                                                                                                                                              
                                                                                                                                                                                
// Usage at module level                                                                                                                                                        
const SecuredState = createAuthGuard(State);                                                                                                                                    
                                                                                                                                                                                
// In your router                                                                                                                                                               
{                                                                                                                                                                               
  path: "/secured",                                                                                                                                                             
  element: <SecuredState />                                                                                                                                                     
}

This is generally considered an anti-pattern anyway: https://legacy.reactjs.org/docs/higher-order-components.html#dont-use-hocs-inside-the-render-method

[gonzalob]

I've tested your solution and it works perfectly. Thank you very much, especially for the docs on proper usage.
I uploaded the code to the repo, for future reference.