title: Order of nesting between Auth0Provider and (Browser)Router in React
body: <p>I have something about Auth0 integration with React that I wasn't able to find an answer on official forums -</p>
  <p>The SDK docs/samples mention that <code>Auth0Provider</code> should wrap the React <code>Router</code> element
  (<a href="https://github.com/auth0/auth0-react/blob/master/EXAMPLES.md#1-protecting-a-route-in-a-react-router-dom-app" rel="nofollow noreferrer">https://github.com/auth0/auth0-react/blob/master/EXAMPLES.md#1-protecting-a-route-in-a-react-router-dom-app</a>):</p>
  <pre><code>    &lt;Auth0Provider
        domain=&quot;YOUR_AUTH0_DOMAIN&quot;
        clientId=&quot;YOUR_AUTH0_CLIENT_ID&quot;
        redirectUri={window.location.origin}
        onRedirectCallback={onRedirectCallback}
      &gt;
        {/* Don't forget to add the history to your router */}
        &lt;Router history={history}&gt;
          &lt;Switch&gt;
            &lt;Route path=&quot;/&quot; exact /&gt;
            &lt;ProtectedRoute path=&quot;/profile&quot; component={Profile} /&gt;
          &lt;/Switch&gt;
        &lt;/Router&gt;
      &lt;/Auth0Provider&gt;
  </code></pre>
  <p>This forces us (the SDK users) to create <code>history</code> object manually and then pass it to both <code>Auth0Provider</code> and to the <code>Router</code>, so that we'll be able to manipulate the same version of history on authentication redirects (again, as explained in the docs).</p>
  <p>It seems to be possible to reverse the order of nesting, having <code>Auth0Provider</code> wrapped by the default <code>BrowserRouter</code>. This allows us to create custom wrapper over <code>Auth0Provider</code> with access to the built-in history object via <code>useHistory</code> hook:</p>
  <pre><code>export const AppAuthentication: React.FC = (props) =&gt; {
    const history = useHistory();
  
    const onRedirectCallback = (appState: AppState) =&gt; {
      history.replace(appState?.returnTo || window.location.pathname);
    };
  
    return (
      &lt;Auth0Provider
        domain={...}
        clientId={...}
        redirectUri={window.location.origin}
        onRedirectCallback={onRedirectCallback}
      &gt;
        {props.children}
      &lt;/Auth0Provider&gt;
    );
  };
  </code></pre>
  <p>The usage is simpler now -</p>
  <pre><code>const App: React.FC = () =&gt; {
    return (
      &lt;Router&gt;
        &lt;AppAuthentication&gt;
           ....
        &lt;/AppAuthentication&gt;
      &lt;/Router&gt;
    );
  };
  </code></pre>
  <p>I've did some quick testing, and it seems to be working fine. Is there a reason <strong>not</strong> to follow this approach? It seems to be much cleaner than maintaining own history copy as recommended by the official guide.</p>