Auth Protected Route example

app.jsx import AuthProvider from "./provider/authProvider"; import Routes from "./routes"; function App() { return ( ); } export default App; provider/authProvider.jsx import axios from "axios"; import { createContext, useContext, useEffect, useMemo, useState } from "react"; const AuthContext = createContext(); const AuthProvider = ({ children }) => { // State to hold the authentication token const [token, setToken_] = useState(localStorage.getItem("token")); // Function to set the authentication token const setToken = (newToken) => { setToken_(newToken); }; useEffect(() => { if (token) { axios.defaults.headers.common["Authorization"] = "Bearer " + token; localStorage.setItem("token", token); } else { delete axios.defaults.headers.common["Authorization"]; localStorage.removeItem("token"); } }, [token]); // Memoized value of the authentication context const contextValue = useMemo( () => ({ token, setToken, }), [token] ); // Provide the authentication context to the children components return ( {children} ); }; export const useAuth = () => { return useContext(AuthContext); }; export default AuthProvider; routes/ProtectedRoute.jsx import { Navigate, Outlet } from "react-router-dom"; import { useAuth } from "../provider/authProvider"; export const ProtectedRoute = () => { const { token } = useAuth(); // Check if the user is authenticated if (!token) { // If not authenticated, redirect to the login page return ; } // If authenticated, render the child routes return ; }; routes/index.jsx import { RouterProvider, createBrowserRouter } from "react-router-dom"; import { useAuth } from "../provider/authProvider"; import { ProtectedRoute } from "./ProtectedRoute"; import Login from "../pages/Login"; import Logout from "../pages/Logout"; const Routes = () => { const { token } = useAuth(); // Define public routes accessible to all users const routesForPublic = [ { path: "/service", element: Service Page, }, { path: "/about-us", element: About Us, }, ]; // Define routes accessible only to authenticated users const routesForAuthenticatedOnly = [ { path: "/", element: , // Wrap the component in ProtectedRoute children: [ { path: "", element: User Home Page, }, { path: "/profile", element: User Profile, }, { path: "/logout", element: , }, ], }, ]; // Define routes accessible only to non-authenticated users const routesForNotAuthenticatedOnly = [ { path: "/", element: Home Page, }, { path: "/login", element: , }, ]; // Combine and conditionally include routes based on authentication status const router = createBrowserRouter([ ...routesForPublic, ...(!token ? routesForNotAuthenticatedOnly : []), ...routesForAuthenticatedOnly, ]); // Provide the router configuration using RouterProvider return ; }; export default Routes; pages/login.jsx import { useNavigate } from "react-router-dom"; import { useAuth } from "../provider/authProvider"; const Login = () => { const { setToken } = useAuth(); const navigate = useNavigate(); const handleLogin = () => { setToken("this is a test token"); navigate("/", { replace: true }); }; setTimeout(() => { handleLogin(); }, 3 * 1000); return Login Page; }; export default Login; pages/Logout.jsx import { useNavigate } from "react-router-dom"; import { useAuth } from "../provider/authProvider"; const Logout = () => { const { setToken } = useAuth(); const navigate = useNavigate(); const handleLogout = () => { setToken(); navigate("/", { replace: true }); }; setTimeout(() => { handleLogout(); }, 3 * 1000); return Logout Page; }; export default Logout; "dependencies": { "axios": "^1.4.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.11.2" },

Apr 4, 2025 - 05:35

app.jsx

import AuthProvider from "./provider/authProvider";
import Routes from "./routes";

function App() {
  return (
    
      
    
  );
}

export default App;

provider/authProvider.jsx

import axios from "axios";
import { createContext, useContext, useEffect, useMemo, useState } from "react";

const AuthContext = createContext();

const AuthProvider = ({ children }) => {
  // State to hold the authentication token
  const [token, setToken_] = useState(localStorage.getItem("token"));

  // Function to set the authentication token
  const setToken = (newToken) => {
    setToken_(newToken);
  };

  useEffect(() => {
    if (token) {
      axios.defaults.headers.common["Authorization"] = "Bearer " + token;
      localStorage.setItem("token", token);
    } else {
      delete axios.defaults.headers.common["Authorization"];
      localStorage.removeItem("token");
    }
  }, [token]);

  // Memoized value of the authentication context
  const contextValue = useMemo(
    () => ({
      token,
      setToken,
    }),
    [token]
  );

  // Provide the authentication context to the children components
  return (
    {children}
  );
};

export const useAuth = () => {
  return useContext(AuthContext);
};

export default AuthProvider;

routes/ProtectedRoute.jsx

import { Navigate, Outlet } from "react-router-dom";
import { useAuth } from "../provider/authProvider";

export const ProtectedRoute = () => {
  const { token } = useAuth();

  // Check if the user is authenticated
  if (!token) {
    // If not authenticated, redirect to the login page
    return ;
  }

  // If authenticated, render the child routes
  return ;
};

routes/index.jsx

import { RouterProvider, createBrowserRouter } from "react-router-dom";
import { useAuth } from "../provider/authProvider";
import { ProtectedRoute } from "./ProtectedRoute";
import Login from "../pages/Login";
import Logout from "../pages/Logout";

const Routes = () => {
  const { token } = useAuth();

  // Define public routes accessible to all users
  const routesForPublic = [
    {
      path: "/service",
      element: Service Page,
    },
    {
      path: "/about-us",
      element: About Us,
    },
  ];

  // Define routes accessible only to authenticated users
  const routesForAuthenticatedOnly = [
    {
      path: "/",
      element: , // Wrap the component in ProtectedRoute
      children: [
        {
          path: "",
          element: User Home Page,
        },
        {
          path: "/profile",
          element: User Profile,
        },
        {
          path: "/logout",
          element: ,
        },
      ],
    },
  ];

  // Define routes accessible only to non-authenticated users
  const routesForNotAuthenticatedOnly = [
    {
      path: "/",
      element: Home Page,
    },
    {
      path: "/login",
      element: ,
    },
  ];

  // Combine and conditionally include routes based on authentication status
  const router = createBrowserRouter([
    ...routesForPublic,
    ...(!token ? routesForNotAuthenticatedOnly : []),
    ...routesForAuthenticatedOnly,
  ]);

  // Provide the router configuration using RouterProvider
  return ;
};

export default Routes;

pages/login.jsx

import { useNavigate } from "react-router-dom";
import { useAuth } from "../provider/authProvider";

const Login = () => {
  const { setToken } = useAuth();
  const navigate = useNavigate();

  const handleLogin = () => {
    setToken("this is a test token");
    navigate("/", { replace: true });
  };

  setTimeout(() => {
    handleLogin();
  }, 3 * 1000);

  return <>Login Page;
};

export default Login;

pages/Logout.jsx

import { useNavigate } from "react-router-dom";
import { useAuth } from "../provider/authProvider";

const Logout = () => {
  const { setToken } = useAuth();
  const navigate = useNavigate();

  const handleLogout = () => {
    setToken();
    navigate("/", { replace: true });
  };

  setTimeout(() => {
    handleLogout();
  }, 3 * 1000);

  return <>Logout Page;
};

export default Logout;

 "dependencies": {
    "axios": "^1.4.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.11.2"
  },