Private routing

[jotaachm]

I am using this: (which I believe is a newer feature)

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<RootLayout />}>
      <Route index element={<Landing />} />
      <Route path="login" element={<Login />} />
      <Route path="signup" element={<SignUp />} />
      <Route path="manager" element={<ManagerLayout />}>
        <Route index path="dashboard" element={<Dashboard />} />
        <Route path="team" element={<TeamLayout />}>
          <Route path="personel" element={<Personel />} />
        </Route>
        <Route path="profile" element={<Profile />} />
      </Route>
      <Route path="*" element={<NotFound />} />
    </Route>
  )
)

function App() {
  return (
    <AuthProvider>
      <RouterProvider router={router} />
    </AuthProvider>
  );
}

I need to restrict access to some routes and I tried doing it by creating this component:

import React from 'react';
import { Route, Navigate } from 'react-router-dom';
import { useAuth } from './globalContext';

function PrivateRoute({ element, ...rest }) {
    const { isLoggedIn } = useAuth();

    return isLoggedIn ? (
        <Route {...rest} element={element} />
    ) : (
        <Navigate to="/login" replace />
    );
}

export default PrivateRoute;

However, I get the following error:
Uncaught Error: [PrivateRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

How should I got about restricting access to some routes?

[brophdawg11]

RouterProvider decouples data fetching from rendering, so the idiomatic place to be doing auth-detection and redirection is in your route loaders:

// utility function you can use in any loader that requires authorization
async function requireUser(request) {
  let user = await getUser(request);  
  if (!user) {
    throw redirect('/login');
  }
} 
 
async function authorizedRouteLoader({ request }) {
  await requireUser(request); // throw redirect if not logged in
  // ... load data normally here
}

At the moment you'll want to perform that check in every authorized route loader since they all run in parallel, but as soon as the proposed middleware API lands you'll be able to do this in a single spot in the code

[jotaachm]

Hi @brophdawg11 !
Thanks for your answer. Which loaders run in parallel? All those at the same level as the route being rendered? When you access directly a children route, the parent route is also triggered, right? However, when you go from children route to children route, the parent is not refetched and that's why you need to put checks in every loader?

Also, on auth-detection and loaders. I read some other discussions and understood that you need to check stuff at every loader and that you should read from the source of truth directly. However, for example, in my app, there are some routes that only managers should have access to so I need to check not only if the user is logged in but also if this user is a manager which is stored in their user object. In my context, I have a getUser function that gives me the information I need about the user by fetching from the relevant endpoint in my API. Since I can't access this in my loaders, does this mean the only other option is to call that endpoint in every loader? This doesn't feel very efficient so I was wondering if anyone had any other solutions. Thank you.

[danieltkach]

Where can we subscribe to get updates on this?

[brophdawg11]

@jotaachm What you probably want is middleware to avoid fetching in every loader, but until that lands you can implement your own middleware API using unstable_dataStrategy.

[danieltkach]

@jotaachm What you probably want is middleware to avoid fetching in every loader, but until that lands you can implement your own middleware API using unstable_dataStrategy.
I read this doc yesterday but it was kind of cryptic for me. Is there a more detailed article somewhere that I can refer to? I didn't understand how to use this @brophdawg11

[brophdawg11]

This is the article :).

There's a code sample showing how to implement middleware: https://reactrouter.com/en/main/routers/create-browser-router#middleware. Can you elaborate on what you don't understand?

For an auth use case, the idea would be to check auth once in a parent middleware and then pass the authed state through to all loaders using a context parameter.