[Docs]: Protected routes example using createBrowserRouter

[ratoi-crysty]

Describe what's incorrect/missing in the documentation

Having that currently, this is the recommended way of using react-router, we need an example of how to protect the routes created with createBrowserRouter.

Currently, the only example for auth available, is the old one using JSX <BrowserRouter/> and <Route/>.

[timdorr]

This is still in progress, depending on the Middleware API: #10327 (comment)

[ericledonge]

It's strange to recommend a new way of doing things that doesn't yet seem feasible.

[onattech]

There is a great example here by Bob Ziroll from freecodecamp.
https://www.youtube.com/watch?v=nDGA3km5He4&t=1747s

[philipp-serfling]

@onattech Are you sure the link/timestamp is correct? I could not find anything regarding createBrowserRouter

[frin457]

I was looking into this and wanted to leave an example for simple folk like myself. I was able to implement a <ProtectedRoute/> workflow onto the 'createBrowserRouter' react-router-remix.

const root = ReactDOM.createRoot(container!); // createRoot(container!) if you use TypeScript
const dummyUser = {loggedIn: true, token: ''}
const router = createBrowserRouter([
    {
        path: '/',
        element: <AppLayout><ProtectedRoute user={dummyUser}></ProtectedRoute></AppLayout>,
        children: [
        {
            path: '/',
            element: <p>hello '/home'</p>
        },
        {
            path: '/page1',
            element: <p>hello '/page1'</p>
        },
        {
            path: '/page2',
            element: <p>hello '/page2'</p>
        },]
    },
    {
        path: '/login',
        element: <AppLayout><LoginPage/></AppLayout>
    }
])

root.render(
    <React.StrictMode>
        <RouterProvider router={router} ></RouterProvider>
    </React.StrictMode>
);

[jheisondev]

I also had a lot of doubts, as it is not clear in the documentation. I implemented it as follows

Component:

import React from "react";

import { Navigate, Outlet } from "react-router-dom";

const ProtectedRoutes = () => {
	// TODO: Use authentication token
	const localStorageToken = localStorage.getItem("token");

	return localStorageToken ? <Outlet /> : <Navigate to="/login"  replace />;
};

export default ProtectedRoutes;

Routes:

export const router = createBrowserRouter(
[
    {
        path: "/",
        element: <Home />,
    },
    {
	path: "/login",
	element: <Login />,
    },
    {
	element: <ProtectedRoutes />,
	children: [
          {
              path: "/route1",
              element: <Screen1 />,
          },
          {
              path: "/route2",
              element: <Screen2 />,
          },
          {
              path: "/route3",
              element: <Screen3 />,
          },
	],
    },
  ], { basename: "/app" },
);

Provider:

<RouterProvider router={router} />

[awreese]

https://stackoverflow.com/a/66289280/8690857

It doesn't matter if you are using a routes configuration array with the useRoutes hook, or if you pass the same object to one of the Data router creation functions, the routing code is the same.

In other words, given:

const PrivateRoutes = () => {
  const location = useLocation();
  const { authLogin } = /* some auth state provider */;

  if (authLogin === undefined) {
    return null; // or loading indicator/spinner/etc
  }

  return authLogin 
    ? <Outlet />
    : <Navigate to="/login" replace state={{ from: location }} />;
}

const routes = [
  {
    path: "/",
    element: <PrivateRoutes />,
    children: [
      ... protected routes ...
    ],
  },
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "*",
    element: <PageNotFound />
  },
];

You can do either of the following:

const appRoutes = useRoutes(routes);

return <BrowserRouter>{appRoutes}</BrowserRouter>;

or

const router = createBrowserRouter(routes);

return <RouterProvider router={router} />;

[matija2209]

@awreese My auth state provider is nested under RouterProvider so there is no context for it.

[awreese]

@awreese My auth state provider is nested under RouterProvider so there is no context for it.

@matija2209 It's fine for context providers to be rendered within the RouterProvider component, the same React rules apply regarding Context providers and consumers, e.g. providers need only be rendered higher in the ReactTree than consumers.

[t-bello7]

The example below shows how to create protected routes using createBroweserRouter and using Loader to pass the authenticated data.
https://github.com/remix-run/react-router/tree/main/examples/auth-router-provider

[VariabileAleatoria]

The example below shows how to create protected routes using createBroweserRouter and using Loader to pass the authenticated data. https://github.com/remix-run/react-router/tree/main/examples/auth-router-provider

I do not understand the need for the root loader to check for user authentication if I can get the same infos from the AuthProvider object?

[alxvallejo]

@awreese My auth state provider is nested under RouterProvider so there is no context for it.

@matija2209 It's fine for context providers to be rendered within the RouterProvider component, the same React rules apply regarding Context providers and consumers, e.g. providers need only be rendered higher in the ReactTree than consumers.

But in your example, your parent component PrivateRoutes is also your consumer component. Shouldn't your parent component have the auth provider wrapped around PrivateRoutes?