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:

When is low-code the right choice? Here’s how to decide

Not sure if low-code is right for your next project? This guide breaks down when to use it, when to avoid it, and how to make the right call.

Popoola Temitope
Jul 11, 2025 â‹… 7 min read
Comparing AI App Builders — Firebase Studio vs. Lovable vs. Replit. LogRocket Article

Comparing AI app builders — Firebase Studio vs. Lovable vs. Replit

Compare Firebase Studio, Lovable, and Replit for AI-powered app building. Find the best tool for your project needs.

Emmanuel John
Jul 11, 2025 â‹… 7 min read
Gemini CLI tutorial — Will it replace Windsurf and Cursor?

Gemini CLI tutorial — Will it replace Windsurf and Cursor?

Discover how to use Gemini CLI, Google’s new open-source AI agent that brings Gemini directly to your terminal.

Chizaram Ken
Jul 10, 2025 â‹… 8 min read
React & TypeScript: 10 Patterns For Writing Better Code

React & TypeScript: 10 patterns for writing better code

This article explores several proven patterns for writing safer, cleaner, and more readable code in React and TypeScript.

Peter Aideloje
Jul 10, 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