Complete Auth0 example for react router v6?

[neilenns]

Does anyone have a complete, working, exampe of using Auth0 with react router v6? Specifically:

1. How to create an Auth0 component that can make use of the react router v6 navigation model
2. How to wrap routes created with createBrowserRouter() with the Auth0 component
3. How to protect those routes
4. How to call protected APIs from v6 loaders and actions that need an Auth0 token

I’ve managed to get something that seems to work for items 1-3 based on snippets from random Stack Overflow questions, but have failed completely at the 4th. It would be fantastic to have an updated SDK sample that makes use of router v6 instead of the current one that is now sadly out of date.

[dawid.matuszczyk]

Hi @neilenns

Welcome to the Auth0 Community!

Did you have a chance to check our guide → React Authentication By Example:Using React Router 6 with a code snippet that can be found here.

If you find this guide/github repo outdated, please open an issue, and I will ping the repo maintainer about this.

I hope it will help you

Thanks, and have a great day!
Dawid

[neilenns]

Thanks for the reply!

I did and unfortunately it does not show all the steps required to use Auth0 with a react-router v6 app:

1. The AuthenticationProvider example still uses Routes elements in the demo. With v6 the updated way to create routes is with createRouterBrowser and there’s extra work required to use v6’s navigation (see this stackoverflow question/answer).
2. It doesn’t show how to access Auth0 tokens in a loader for retrieving data (or action for sending data, such as logging in or posting data to a protected API).
3. (Not directly related to react-router) it doesn’t show TypeScript types in the examples., which would be a nice addition.

By far the biggest problem is #2. The v6 model is to use loaders and actions for data and I was unable to get them working with Auth0. I figured out how to pass the Auth0 token function to an action (see this StackOverflow answer) but it always fails saying the context wasn’t created yet.