React Authentication By Example: React Router 6

[oscar.gch]

Something to add regarding passing props here…

You’ll also need to go to each individual component file where you are receiving the props and add them there on two places:

export const Dashboard = ({ addPropsHere }) => {

  return (
    <PageLayout addPropsHere={addPropsHere}>

This is if you want to pass props to the NavBar for some reason, and then you need to have the data in both the NavBar and the /route component.

[mgarg]

Is there any way in react router 6 to have the role based routing in react apps, mainly with “AuthenticationRequired” function.

[dan-auth0]

Hello! Welcome to the Auth0 Community. Yes, there is! I am working on a sample that may show how to do that. I may not be able to share the full-sample too soon but I can definitely share the code snippets within the next weeks.

Stay tuned, please!

[dan-auth0]

Thanks for sharing this insight with us

[craigp]

How / Where do I see logs to see an error? What’s the starting point to debug?

I am running the sample app from React Authentication By Example: Using React Router 6. (using localhost:4040)

Despite adding a User (and A) confirming the user exists in the backend, and B) making the user validate their email address)… the sample app always returns a 401 (Error - Unauthorized)

I want to figure this out, but I don’t see any useful logs anywhere. Are there any know issues w/ the Getting Started guide?

[dan-auth0]

Hello! Welcome to the Auth0 Community. You can view helpful logs to debug and troubleshoot your Auth0 integration in your Tenant. Go to the Auth0 Dashboard and click on the “Monitoring” tab on the left side bar. Then click on “Logs”.

[craigp]

Thanks Dan - the issue is a “Failed Exchange” after a “Success Login”

This is happening for Chrome & Firefox (desktop).

I saw a similar issue reported for an Angular SPA app back in 2020 (Success Login and a Failed Exchange - #9 by sagun786), but I do not know where those configuration settings are stored. (I did a text search for “grant_types” and “token_endpoint_auth_method” in the React sample app, but nothing came up.

Is this a common newbie problem w/ a simple fix?

[craigp]

Also, just to make sure I’m not missing something basic here… I set “http://localhost:4040” for the following settings:

1. Allowed Callback URLs
2. Allowed Logout URLs
3. Allowed Web Origins
4. Allowed Origins (CORS)

[byron.motoche]

Hi @craigp, thanks for sharing that information. As mentioned in the issue that you just shared sounds like that error is related to the Authorization flow used when logging in. To confirm that and help you troubleshoot this issue, could you please help us with the following:

• Share with us the type code of the “Failed Exchange” error you got. You can see the type code of it by clicking on the “Failed Exchange” event. A more detailed page of the error will show up. Under the “Details” section, you’ll see a JSON object with more details of the error. The “type” key is the type code.
• Validate that the Auth0 Application type you’re using is a “Single Page Application”.

In case the Auth0 application you’re using is not a “Single Page Application”, do the following to change it:

• Go to the "Settings " tab of your Auth0 application.
• Under the "Application Propiertes " in your Auth0 application, select “Single Page Application” as the "Application type ". A confirm dialog may appear, click on "Confirm " and then click on the "Save Changes " button at the bottom of the page.

Before trying to log in again, I suggest clearing the cookies first. You can do that by navigating to the application, clicking on the information icon at the right of the address bar, and clicking on Cookies. Then remove all the cookies for this site and try to log in.

Please let us know if that works for you or if you still need help.

[cjmconie]

Hi, is there any guidance on how to perform auth checks and access the bearer token in React Router’s new loaders and actions? The challenge is these sit above/outside of the Auth0Provider component.

This was also asked here under point 2.

---

[Answered]

I found a good solution here using the “@auth0/auth0-spa-js” package.

[gchris]

Hi,

Is there a way to display a child route instead of the parent when refreshing the page?

Currently, I have the following setup:

const router = createBrowserRouter([
{
path: ‘/’,
element: ,
errorElement: ,
},
{
path: ‘/dashboard’,
element: ,
errorElement: ,
children: [
{
path: ‘new’,
element: ,
},
{
path: ‘settings’,
element: ,
},
{
path: ‘pilot’,
element: ,
},
],
},
{
path: ‘/faq’,
element: ,
},
{
path: ‘*’,
element: ,
},
]);

It works fine, except when I reload a child route. It always displays the parent dashboard page.

Note that I’m navigating to the settings and pilot pages with

navigate(‘page’,{state:{id,name})

from React Router’s useNavigate()