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:

Wasm 3 Before GTA 6 LogRocket Article

We got Wasm 3.0 before GTA 6: Meet the web’s new engine

Discover how WebAssembly 3.0’s garbage collector, exception handling, and Memory64 transform Wasm into a true mainstream web platform.

Ikeh Akinyemi
Oct 3, 2025 ⋅ 2 min read

How to use AI to build accurate ShadCN components

AI agents often break shadcn/ui components with outdated docs or made-up props. The MCP server fixes this by giving live access to registries. In this tutorial, we’ll set it up and build a Kanban board to show it in action.

Chizaram Ken
Oct 3, 2025 ⋅ 5 min read
Rust Project for Web Services LogRocket Article

The best way to structure Rust web services

Learn how to structure Rust web services with clean architecture, Cargo workspaces, and modular crates for scalable, maintainable backends.

Jude Miracle
Oct 2, 2025 ⋅ 2 min read
andrew evans headshot

A spec-first workflow for building with agentic AI

Andrew Evans gives his take on agentic AI and walks through a step-by-step method to build a spec-first workflow using Claude Code.

Andrew Evans
Oct 1, 2025 ⋅ 18 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