I would like the ProtectedRoute to call server and get a response that indicates whether the user is logged in or not, on every render of a page that it protects. The server is sent a session cookie which it uses to make the decision.

I have verified that the server is indeed returning true in my use case, which I then update state, however the ProtectedRoute does not fire again once isAuth is re-assigned from false to true. It only runs once on first render but never updates again after I get the response from the server.

This seems like it should just work out of the box, what am I missing?

ProtectedRoutes

import { lazy, useEffect, useState } from 'react';
import { Navigate } from 'react-router';
import api from '@/api';

const Layout = lazy(() => import('./Layout'));

const ProtectedRoutes = () => {
  const [isAuth, setIsAuth] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      console.log('ProtectedRoutes useEffect fired');
      try {
        const rsp = await api.request({
          url: '/is-authorized',
          method: 'GET',
        });

        if (!rsp) {
          throw new Error('No response from server');
        }

        console.log(
          'ProtectedRoutes response:',
          rsp.data?.isAuthenticated
        );

        setIsAuth(rsp.data?.isAuthenticated ?? false);
      } catch (error) {
        console.error('Error fetching authorization status:', error);
        setIsAuth(false);
      }
    };

    fetchData();
  }, []);

  console.log('isAuth:', isAuth);

  if (isAuth === true) {
    return <Layout />;
  }

  return (
    <Navigate
      to="/login"
      replace
    />
  );
};

export default ProtectedRoutes;

The browser router configuration

import { lazy } from 'react';
import { createBrowserRouter, RouterProvider } from 'react-router';
import Error from './components/Error';

const ProtectedRoutes = lazy(() => import('./components/ProtectedRoute'));
const AuthenticatePage = lazy(() => import('./components/Authenticate'));
const LoginPage = lazy(() => import('./pages/Login.page'));
const HomePage = lazy(() => import('./pages/Home.page'));
const PeoplePage = lazy(() => import('./pages/People.page'));
const PersonPage = lazy(() => import('./pages/Person.page'));
const NotFoundPage = lazy(() => import('./pages/NotFound.page'));

const router = createBrowserRouter([
  {
    path: '/',
    element: <ProtectedRoutes />,
    errorElement: <Error msg="Application Error" />,
    children: [
      {
        path: '/',
        element: <HomePage />,
      },
      {
        path: '/people',
        element: <PeoplePage />,
      },
      {
        path: '/people/:id',
        element: <PersonPage />,
      },
    ],
  },
  {
    path: '/login',
    element: <LoginPage />,
    errorElement: <Error msg="Application Error" />,
  },
  {
    path: '/authorization-code/callback',
    element: <AuthenticatePage />,
  },
  {
    path: '*',
    element: <NotFoundPage />,
  },
]);

export function Router() {
  return <RouterProvider router={router} />;
}

I would like the ProtectedRoute to call server and get a response that indicates whether the user is logged in or not, on every render of a page that it protects. The server is sent a session cookie which it uses to make the decision.

I have verified that the server is indeed returning true in my use case, which I then update state, however the ProtectedRoute does not fire again once isAuth is re-assigned from false to true. It only runs once on first render but never updates again after I get the response from the server.

This seems like it should just work out of the box, what am I missing?

ProtectedRoutes

import { lazy, useEffect, useState } from 'react';
import { Navigate } from 'react-router';
import api from '@/api';

const Layout = lazy(() => import('./Layout'));

const ProtectedRoutes = () => {
  const [isAuth, setIsAuth] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      console.log('ProtectedRoutes useEffect fired');
      try {
        const rsp = await api.request({
          url: '/is-authorized',
          method: 'GET',
        });

        if (!rsp) {
          throw new Error('No response from server');
        }

        console.log(
          'ProtectedRoutes response:',
          rsp.data?.isAuthenticated
        );

        setIsAuth(rsp.data?.isAuthenticated ?? false);
      } catch (error) {
        console.error('Error fetching authorization status:', error);
        setIsAuth(false);
      }
    };

    fetchData();
  }, []);

  console.log('isAuth:', isAuth);

  if (isAuth === true) {
    return <Layout />;
  }

  return (
    <Navigate
      to="/login"
      replace
    />
  );
};

export default ProtectedRoutes;

The browser router configuration

import { lazy } from 'react';
import { createBrowserRouter, RouterProvider } from 'react-router';
import Error from './components/Error';

const ProtectedRoutes = lazy(() => import('./components/ProtectedRoute'));
const AuthenticatePage = lazy(() => import('./components/Authenticate'));
const LoginPage = lazy(() => import('./pages/Login.page'));
const HomePage = lazy(() => import('./pages/Home.page'));
const PeoplePage = lazy(() => import('./pages/People.page'));
const PersonPage = lazy(() => import('./pages/Person.page'));
const NotFoundPage = lazy(() => import('./pages/NotFound.page'));

const router = createBrowserRouter([
  {
    path: '/',
    element: <ProtectedRoutes />,
    errorElement: <Error msg="Application Error" />,
    children: [
      {
        path: '/',
        element: <HomePage />,
      },
      {
        path: '/people',
        element: <PeoplePage />,
      },
      {
        path: '/people/:id',
        element: <PersonPage />,
      },
    ],
  },
  {
    path: '/login',
    element: <LoginPage />,
    errorElement: <Error msg="Application Error" />,
  },
  {
    path: '/authorization-code/callback',
    element: <AuthenticatePage />,
  },
  {
    path: '*',
    element: <NotFoundPage />,
  },
]);

export function Router() {
  return <RouterProvider router={router} />;
}

• javascript
• reactjs
• react-hooks
• react-router
• react-router-dom

• 1 On the initial render you tell it to navigate to "/login". You would need to have a 3rd state (not just authed / not authed) which would be a checking / pending state that displayed either nothing or a throbber (dumb word for a loading animation). This would allow you to wait until you know whether the user is authed or not before redirecting. TLDR: You redirect and unmount the component before the request is finished. – Jacob Smit Commented 2 days ago
• You are a genius, I would have spun my wheels for some time before stumbling on that one. New issue, it wont recall the server when bouncing around between the protected routes, it only recalls the server when going from outside protected routes and back within. do you have an idea why? – user3146945 Commented 2 days ago
• 1 This is a feature of the nested/child routes and Outlet components. The Outlet components can load data / state that is used by all the child routes, this means as you navigate around the child routes the parent components won't remount. You could use some kind of value or metric to signify when your auth check should occur. i.e. for a quick solution you might get away with using useLocation provided by react router const location = useLocation() and then using location.pathname in the dependency array of your useEffect. – Jacob Smit Commented 2 days ago
• Another great suggestion, useLocation was the hook I needed to trigger internal re-renders. So I would have to change the state of the parent component in order to have it re-render without useLocation? that doesnt sound like a good idea. – user3146945 Commented 2 days ago
• 1 You might have luck making all the routes their own individual routes instead of nested child routes. This would require you to swap from using <Outlet /> to children. This "should" (it has been a while) make react see the routes as individual components which means on each route change the old ProtectedRoutes should unmount and a new ProtectedRoutes should mount. i.e. element: <ProtectedRoute><PeoplePage /></ProtectedRoute> – Jacob Smit Commented 2 days ago

1 Answer 1

I have verified that the server is indeed returning true in my use case, which I then update state, however the ProtectedRoute does not fire again once isAuth is re-assigned from false to true. It only runs once on first render but never updates again after I get the response from the server.

This seems like it should just work out of the box, what am I missing?

Issues

• The ProtectedRoutes component is mounted only once while on any of its nested routes.
• ProtectedRoutes starts out assuming the current user is not authenticated, so it immediately redirects to the "/login" route.
• ProtectedRoutes doesn't re-check the user's authentication when navigating between each nested route.

Solution Suggestions

• Initialize the isAuth state to something that is neither true for an authenticated user, and not false for an unauthenticated user. Use undefined to indicate the user's authentication status has not been verified yet.
• Add a loading state to handle post-initial-auth-verification checks, e.g. when a user is navigating around. Use React-Router's useLocation hook to access the current pathname value to be used as a useEffect hook dependency to trigger the side-effect to check the user's authentication status.
• Update ProtectedRoutes to conditionally render some loading UI when either the isAuth state is not set yet or there is a pending auth check.
• For Separation of Concerns, update ProtectedRoutes to render an Outlet, and render Layout separately as a nested route. In other words, one route component handles access control and the other handles UI layout.

Example:

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

const ProtectedRoutes = () => {
  const { pathname } = useLocation();

  const [isAuth, setIsAuth] = useState();
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      try {
        setIsLoading(true);
        const rsp = await api.request({
          url: "/is-authorized",
          method: "GET",
        });

        if (!rsp) {
          throw new Error("No response from server");
        }

        setIsAuth(!!rsp.data?.isAuthenticated);
      } catch (error) {
        setIsAuth(false);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, [pathname]);

  if (isLoading || isAuth === undefined) {
    return <h1>...Loading...</h1>;
  }

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

const ProtectedRoutes = lazy(() => import('./components/ProtectedRoute'));
const Layout = lazy(() => import('./components/Layout'));
const AuthenticatePage = lazy(() => import('./components/Authenticate'));
const LoginPage = lazy(() => import('./pages/Login.page'));
const HomePage = lazy(() => import('./pages/Home.page'));
const PeoplePage = lazy(() => import('./pages/People.page'));
const PersonPage = lazy(() => import('./pages/Person.page'));
const NotFoundPage = lazy(() => import('./pages/NotFound.page'));

const router = createBrowserRouter([
  {
    element: <ProtectedRoutes />,
    errorElement: <Error msg="Application Error" />,
    children: [
      {
        element: <Layout />,
        children: [
          { path: '/', element: <HomePage /> },
          { path: "/people", element: <PeoplePage /> },
          { path: "/people/:id", element: <PersonPage /> },
        ],
      },
    ],
  },
  {
    path: '/login',
    element: <LoginPage />,
    errorElement: <Error msg="Application Error" />,
  },
  {
    path: '/authorization-code/callback',
    element: <AuthenticatePage />,
  },
  { path: '*', element: <NotFoundPage /> },
]);