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:

8 Reasons Your Next.js App Is Slow — And How To Fix Them

8 reasons your Next.js app is slow — and how to fix them

You don’t need to guess what’s wrong with your Next.js app. I’ve mapped out the 8 biggest performance traps and the fixes that actually work.

Chizaram Ken
Jun 20, 2025 â‹… 16 min read
how to truncate text in CSS (single and multi-line)

How to truncate text in CSS (single and multi-line)

Learn how to truncate text with three dots in CSS, and use two reliable CSS text truncation techniques while covering single-line and multi-line truncations.

Chinedu Okere
Jun 20, 2025 â‹… 10 min read
how to use the Interest Invoker API for better, more accessible UX

How to use the Interest Invoker API for better, more accessible UX

Explore how to use Google’s new experimental Interest Invoker API for delays, popovers, and smarter hover UX.

Emmanuel John
Jun 19, 2025 â‹… 7 min read
How To Build And Deploy A Web App With Bolt.new

How to build and deploy a web app with Bolt

Bolt.new revolutionizes how you build and deploy web apps with no-code development and seamless AI integration.

Isaac Okoro
Jun 19, 2025 â‹… 8 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