How to use Auth0 Provider with the new react router v6 createBrowserRouter instead of BrowserRouter?

Help
1

Hi there,

We’re migrating to v6.4 and using the new createBrowserRouter instead of BrowserRouter. Specifically we’re 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 :pray:

2 Likes
2

I’m encountering the same blocker. It’d be great to hear back from the team at Auth0!

2 Likes
3

For anyone else who might stumble upon this in the future here’s what worked for me: reactjs - How to use Auth0 provider with the new createBrowsereRouter in v6.4? - Stack Overflow

cc: @juan.calle hope it helps you too

2 Likes
4

Trhanks for this giorgosera