This is how I may be modifying the React Router 6 code sample (It’s on TypeScript right now but the same change would happen on JavaScript):
The plan is to move from using useNavigate() and BrowserRouter to the unstable_HistoryRouter offering from React Router v6.
unstable_HistoryRouter let us use history to control how the onRedirectCallback works. In the sample app, you may have a user who is logged out who wants to access the /admin page directly. The ideal user experience is to redirect the user to /admin page after they complete their log in process.
Hopefully, unstable_HistoryRouter becomes a stable offering from React Router to provide the same seamless user experience during login that we are able to offer with React Router v5.
Howdy, again! I found a different pattern that we can use to avoid using the <unstable_HistoryRouter> component from React Router v6:
What changed?
We remove any router configuration from the <Auth0ProviderWithHistory> and it just handles Auth0 configuration. As such, it is renamed to <Auth0ProviderWithConfig>.
We use <BrowserRouter> within the same scope that we use <Routes> and define all of our <Route> component.
There’s no longer a need to define an onRedirectCallback function for the <Auth0Provider>. The default behavior of the Auth0 React SDK is that if you don’t specify an onRedirectCallback the SDK will attempt to redirect the user back to the route they attempted to access before being prompted to log in. The SDK uses history.replaceState to achieve that, which works for the <BrowserRouter>.
There’s one caveat though On this code sample, if we lift <BrowserRouter> up, the expected redirect stops working. For example, if you move <BrowserRouter> to being within <Auth0ProviderWithConfig> the redirect does not work. The same thing happens if you define it in the index.tsx file (or index.js). We are investigating why this is happening but it’s an issue on the React Router v6 side and not the Auth0 React SDK – from what we can observe right now.
React Router v6 so far has a lot of “catcha’s” and corner cases. I think the API of v5 is more stable and leads to better and more expected user experience.
Thank you for this “The Complete Guide to React User Authentication with Auth0” guide Dan.
I have questions regarding @auth0/auth0-react: Auth0Provider component in “Micro Frontends with React, Module Federation and Auth0” (in whole Auth0 I found only this blog regarding micro frontends (MFE): Micro Frontends with Angular, Module Federation, and Auth0.
Description:
I created “container” MFE (some call it “shell”) and “auth” MFE (authentication).
“container” MFE decides when/where to show each MFE (“Run-Time” Integration (Client-Side Integration) using Webpack Module Federation).
Host app gets files from remote app (I do this with Module Federation Plugin)
I shared dependencies (“container” MFE & “auth” MFE) using Module Federation Plugin.
Linking MFEs together
Auth0 Dashboard Settings:
Using free Auth0 account I created SPA (Single Page Web Application) application in Auth0 Dashboard (Settings" tab of your Auth0 Application page), I have configured application:
I added the Auth0 configuration variables to React (.env inside “auth” MFE).
So, I have completed setting up an authentication service that my React Micro Frontend application can consume.
I did Set Up the Auth0 React SDK (npm install @auth0/auth0-react).
Note: I did not created any tenant.
Flow:
When a frontend (landing page in “container” MFE http://localhost:8080 ; Header.js contains button+onClick={}) wants to authenticate a user - it redirects the user out to this application “auth” MFE and then from “auth” MFE to Auth0.
At this moment Auth0 present a login page with no problem.
My questions are:
Which Auth0 use case (Auth0 Overview) is valid for above described my example:
1.1. You built an awesome app and you want to add user authentication and authorization. …
…
1.3. You have more than one app, and you want to implement Single Sign-on (SSO).
Do I have to create tenant at all (working only with SPA-Micro Frontends and only one platform now)?
I saw this:
Identity 101: A JS Developer’s Guide to App Security - Tyler Clark
… and this:
Adding Authentication in React using Auth0
… and there is nothing regarding need for tenant.
Does Auth0 has anywhere described integration Auth0 with React Micro Frontends?
In above described my example - is it correct that I have to configure the Auth0Provider component ONLY in “auth” MFE ?
Note:
Inside “container” MFE is property that decides wheter or not user is currently signed in (“container” MFE is “application bouncer”).
I configured the Auth0Provider component ONLY IN “auth” MFE (AND not in “container” MFE or any other MFE) because of these:
my approach: centralized auth in “container” MFE in order to keep best web performances
when user comes to localhost:8080 - loading min code (no “auth” MFE code);
when user refresh localhost:8080 - loading min code (no “auth” MFE code);
loading “auth” MFE exactly when I need;
Is it correct that I have to configure the Auth0Provider component in every MFE?
Note:
In this case we shall have issue with web performances (loading “auth” MFE more often than we need it: duplicated code in every MFE).
Totally agree that this should be linked in the quick start. Quickstarts do a terrible job of explaining how authentication, redirects, logins and logouts should work on anything past a single page application.
A new guide and code sample is arriving next week to Developer Center! I’ll update this topic as soon as it goes live. The guide covers React v18 and React Router v6 but it should still work for React v17 applications.
The quickstarts link to these guides but the link is at the bottom of the document. Do you feel that we should put that link at the beginning of the quickstart document?
If you need a deep dive on React authentication that covers login, logout, signup, route protection, and calling a protected API, follow the [“React Authentication by Example”] guide.
Hi ! New to this, may I know by when will this be coming up (guide using react-router 6 and react v18) although I have managed to get it working with
withAuthenticationRequired HOC I would still be interested in a declarative fashion with router 6.
I have a side question,
const { isLoading } = useAuth0();
Is the isLoading only true when I first login using auth0 ? Otherwise I would expect this to be false right ?
Another question, after login with redirection to a page, do you know how do I invoke a toast that says user logged in just once after user logsin ?
Same for logout
const { logout } = useAuth0();
when the user clicks on logout button it will invoke the logout function as shown above, then after it redirects me to the home page I would like to show a toast notification in my react app to tell that the user has been successfully logged out
Howdy, again! I found a different pattern that we can use to avoid using the 
On this code sample, if we lift 
