DEV Community

Dennis kinuthia
Dennis kinuthia

Posted on

15

Auth Guarding in react

After we authenticate we might want to guard certain routes and redirect to the login page if not authenticated

the most common way to do it is

import { Navigate } from 'react-router-dom';

export const ProtectedRoute = ({ user,children }) => {
  if (!user) {
   return <Navigate to="/login" replace />;
    }
  return children;
  };

Enter fullscreen mode Exit fullscreen mode

and wrap the childern with the component

          <Routes>
            <Route
              path="/"
              element={
                <ProtectedRoute user={user}>
                  <Home user={user} />
                </ProtectedRoute>
              }
            />
            </Routes>
Enter fullscreen mode Exit fullscreen mode

but with the react-router v6+ routes can be nested inside layouts which unlocks new patterns

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { PBUser } from '../../utils/types/types';

export const useAuthGuard = (user:PBUser,test_mode:boolean) => {
    const navigate = useNavigate();

    useEffect(() => {
        if (!user?.email && !test_mode) {
            navigate("/auth");
        }
    }, [user?.email]);
};
Enter fullscreen mode Exit fullscreen mode

and use the hook in the main layout or layout for whichever route you want to guard

import { Outlet} from 'react-router-dom';
import { Toolbar } from '../../components/toolbar/Toolbar';
import { PBUser } from '../../utils/types/types';
import { useAuthGuard } from './../../shared/hooks/useAuthGuard';

interface RootLayoutProps {
  user: PBUser;
  test_mode: boolean;
}

export const RootLayout = ({user,test_mode}: RootLayoutProps) => {

  useAuthGuard(user,test_mode)

  return (
    <div className="w-full h-full dark:bg-slate-900">
      <div
        className="h-14 w-full  bg-slate-700 dark:bg-slate-800
          bg-opacity-30 dark:bg-opacity-90 max-h-[50px] p-1
         sticky top-0 z-40"
      >
        <Toolbar user={user} />
      </div>
      <main className=" w-full h-[90%] fixed top-12 overflow-y-scroll">
        <Outlet />
      </main>
    </div>
  );
};

Enter fullscreen mode Exit fullscreen mode

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More