2024-11-21
4729
#react
Vijit Ail
107768
Nov 21, 2024 ⋅ 16 min read

Authentication with React Router v6: A complete guide

Vijit Ail Software Engineer at toothsi. I work with React and NodeJS to build customer-centric products. Reach out to me on LinkedIn or Instagram.

Recent posts:

Understanding Promise.all in JavaScript

Is Promise.all still relevant in 2025?

In 2025, async JavaScript looks very different. With tools like Promise.any, Promise.allSettled, and Array.fromAsync, many developers wonder if Promise.all is still worth it. The short answer is yes — but only if you know when and why to use it.

Leonardo Maldonado
Oct 29, 2025 ⋅ 7 min read
the replay october 29

The Replay (10/29/25): Tiny AI agents, Next.js 16, and more

Discover what’s new in The Replay, LogRocket’s newsletter for dev and engineering leaders, in the October 29th issue.

Matt MacCormack
Oct 29, 2025 ⋅ 34 sec read
next js 16 is here

Next.js 16: What’s new, and what it means for frontend devs

Learn about the new features in the Next.js 16 release: why they matter, how they impact your workflow, and how to start using them.

Abiola Farounbi
Oct 29, 2025 ⋅ 5 min read
is Llama really as bad as people say? I put Meta’s AI to the test

Is Llama really as bad as people say? I put Meta’s AI to the test

Test out Meta’s AI model, Llama, on a real CRUD frontend projects, compare it with competing models, and walk through the setup process.

Chizaram Ken
Oct 29, 2025 ⋅ 11 min read
View all posts

15 Replies to "Authentication with React Router v6: A complete guide"

  1. In the example where login path is removed after login, the home page is no longer accessible. To reproduce, after login, try to go to home page. It will always redirect to /dashboard/profile. I think this shouldnt be the ideal scenario.

  2. i cant use this scenario because im using a theme that used react router dom v6 and useRoutes i dont have routes and route jsx and i cant replace them

  3. I’m getting the following error: React Hook React.useMemo has missing dependencies: ‘login’ and ‘logout’ Either include them or remove them from the dependency array. Do you have a solution for this error?

  4. Don’t Try this tutorial, it is not authenticating Token, Only it generate a token and store it in local storage.. this is not the technically correct

    1. Hey Sooraj, the actual authentication of the user is not in scope of the article. This article only demonstrates how you’d handle authentication and private routes on the frontend using React Router.

  5. I did the tutorial up to:

    ‘Well, the above approach works fine if there are a limited number of protected routes, but if there are multiple such routes we would have to wrap each one, which is tedious.’

    The code prior to that doesn’t work as in component I get the error:

    `uncaught TypeError: Cannot destructure property ‘user’ of ‘(0 , _hooks_useAuth__WEBPACK_IMPORTED_MODULE_0__.useAuth)(…)’ as it is undefined.`

  6. what if i am using the createBrowserRouter() function?
    example:
    const router = createBrowserRouter([
    {
    path: “/”,
    element: ,
    errorElement: ,
    },
    {
    path: “dashboard”,
    element: ,
    children: [
    { path: “myresources”, element: },
    { path: “users”, element: , loader: usersLoader },
    { path: “resources”, element: },
    {
    path: “users/:userId”,
    element: ,
    loader: userLoader,
    id: “userId”,
    children: [
    {
    path: “edit”,
    element: ,
    action: editAction,
    },
    ],
    },
    { path: “users/add”, element: , action: addAction },
    ],
    },
    ]);

    const root = ReactDOM.createRoot(
    document.getElementById(“root”) as HTMLElement
    );
    root.render(

    );

  7. I am having an issue after following this and using react-query to do the back end call for authentication.

    On logout, setData(null) isn’t working. The users data is still here and then we get redirected BACK to the protected page. no way to actually log out.

    1. Hi Dan. I’m not sure about your integration with react-query and would need additional details to assist you there. However, you’ll need to modify the logout() function to include your own custom logout logic. For example, if you’re saving user data in a session or cookie, you must clear it using the appropriate method.

  8. If anyone trying 2FA, ProtectedRoute, use verify2FACode instead of IsVerify2FACode so you can filter if statement for both login password and 2FA.

Leave a Reply

Hey there, want to help make our blog better?

Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.

Sign up now