Secure Your React App: Private Routes with React Router and Nookies

In modern React applications, it’s crucial to secure sensitive routes like dashboards, profiles, and admin panels. Private routing ensures only authenticated users can access protected pages. In this guide, you’ll learn how to implement private routes in React using react-router and nookies for cookie-based token authentication. Step-by-step examples included.

✅ What is a Private Route in React?

A Private Route is a wrapper around your component or layout that checks if a user is logged in. If the user is authenticated, the component is rendered. Otherwise, they are redirected to the login page.

Get Rijan’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

This helps ensure that sensitive pages are protected from unauthorized access.

✅ Step-by-Step Guide to Implement Private Routing in React

We’ll walk through building a Private Layout and using it to guard protected pages.

📦 Step 1: Install Dependencies

npm intall react-router 
or
yarn add react-router

npm install nookies
or
yarn add nookies

react-router – for routing
nookies – for handling cookies in React (great for storing tokens)

🔐 Step 2: Create a Private Layout Wrapper

This layout wraps protected routes and checks authentication using a token stored in cook

// components/PrivateLayout.jsx
import { Navigate, Outlet } from "react-router";
import nookies from "nookies";
const PrivateLayout = () => {
  const cookies = nookies.get(null);
  const token = cookies?.auth_token;
if (!token) {
    return <Navigate to="/login" replace />;
  }
return (
    <div className="flex min-h-screen bg-gray-100">
      {/* ======== Navbar ======== */}
      {/* <Navbar /> */}
{/* ======== Sidebar ======= */}
      {/* <Sidebar /> */}
{/* ======= Main Content ===== */}
      <main className="flex-1 p-6 mt-16">
        <Outlet />
      </main>
    </div>
  );
};
export default PrivateLayout;

📁 Step 3: Create an Admin Dashboard Page

// pages/AdminDashboard.jsx
import React from "react";
const AdminDashboard = () => {
  return (
    <div>
      <h1 className="text-2xl font-bold">Admin Dashboard</h1>
      <p>Welcome to your protected dashboard.</p>
    </div>
  );
};
export default AdminDashboard;

🔑 Step 4: Set Up Routes

// App.jsx
import { BrowserRouter as Router, Routes, Route } from "react-router";
import PrivateLayout from "./components/PrivateLayout";
import AdminDashboard from "./pages/AdminDashboard";
import Login from "./pages/Login";

const App = () => {
  return (
    <Router>
      <Routes>
        {/* Public Routes */}
        <Route path="/login" element={<Login />} />

        {/* Protected Routes */}
        <Route element={<PrivateLayout />}>
          <Route path="/admin-dashboard" element={<AdminDashboard />} />
          {/* Add more protected routes here */}
        </Route>
      </Routes>
    </Router>
  );
};

export default App;

✅ Final Thoughts

Private Routing is an essential part of building secure React applications. By using wrappers like PrivateLayout and leveraging cookies for token storage, you can restrict access to sensitive routes and improve user experience.

Whether you’re building an admin panel, a dashboard, or any authenticated section, this pattern will help you build secure and scalable React applications.

🧪 Bonus: Extend with Role-Based Access

Want to go a step further? Enhance your PrivateLayout to check for user roles (admin, editor, etc.) before allowing access.