How to use Auth0 provider with the new createBrowsereRouter in v6.4?

Question

We're migrating to v6.4 and using createRoutesFromElements as suggested by the docs to migrate our routes to the new createBrowserRouter router.

Our setup looks something like this

const router = createBrowserRouter(
  createRoutesFromElements(--> our routes go here <--)
);

root.render(
  <React.StrictMode>
    <ChakraProvider theme={theme}>
      <RouterProvider router={router} />
    </ChakraProvider>
  </React.StrictMode>
);

Auth0 docs say that the Auth0 provider should be nested under the provider. How could this be done with the new router?

We've tried wrapping the Auth provider around the Routes in createRoutesFromElements but doesn't work. Also tried to do this but we get an error.

<RouterProvider router={router} >
    <Auth0Provider />
</RouterProvider>

Can someone please help me understand where to place the Auth0 provider? Thank you 🙏

Answer 1

It seems the Auth0Provider only needs to be rendered within a routing context provided by a router component. The RouterProvider doesn't take children JSX like that. I suggest rendering the Auth0Provider component on a Layout Route as part of the "create routes from elements" routes configuration. As a layout route Auth0Provider wraps an Outlet and provide its authentication context to all the nested routes of its sub-ReactTree.

Example:

import { Outlet } from 'react-router-dom';

const Auth0ProviderLayout = () => (
  <Auth0Provider>
    <Outlet />
  </Auth0Provider>
);

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route element={<Auth0ProviderLayout />}>
      ... other nested routes ...
    </Route>
  )
);

root.render(
  <React.StrictMode>
    <ChakraProvider theme={theme}>
      <RouterProvider router={router} />
    </ChakraProvider>
  </React.StrictMode>
);