How to Protected Routes and Authentication in ReactJS | Complete guide on React Router authentication

Not every page should be open to the public in practical applications. Certain pages, such as the admin panel, settings, or user dashboard, ought to be available only once the user logs in. This is where ReactJS’s protected routes are useful.

Components known as protected routes limit access according to authentication status. This article will teach you how to use React Router to restrict routes and build a simple authentication system. State will be used to mimic the login status, and access will be managed via a new wrapper component called PrivateRoute.

When connecting login systems with Firebase, JWT, or bespoke auth APIs, this method is crucial.

✅ Example: Basic Protected Route Setup

🧩 App.js

   import React, { useState } FROM 'react';

import { BrowserRouter, Routes, Route, Navigate } FROM 'react-router-dom';

```
import Home FROM './Home';
```
```
import Dashboard FROM './Dashboard';
```
```
 
```

FUNCTION PrivateRoute({ isAuthenticated, children }) {

  RETURN isAuthenticated ? children : <Navigate TO="/" />;

```
}
```
```
 
```
```
FUNCTION App() {
```

  const [isAuthenticated, setIsAuthenticated] = useState(FALSE);

```
 
```
```
  RETURN (
```
```
    <BrowserRouter>
```
```
      <Routes>
```

        <Route path="/" element={<Home onLogin={() => setIsAuthenticated(TRUE)} />} />

```
        <Route
```
```
          path="/dashboard"
```
```
          element={
```

            <PrivateRoute isAuthenticated={isAuthenticated}>

```
              <Dashboard />
```
```
            </PrivateRoute>
```
```
          }
```
```
        />
```
```
      </Routes>
```
```
    </BrowserRouter>
```
```
  );
```
```
}
```
```
 
```
```
export DEFAULT App;
```

🧩 Home.js

```
  import React FROM 'react';
```

import { useNavigate } FROM 'react-router-dom';

```
 
```
```
FUNCTION Home({ onLogin }) {
```
```
  const navigate = useNavigate();
```
```
 
```
```
  const handleLogin = () => {
```
```
    onLogin(); // Simulate login
```
```
    navigate('/dashboard');
```
```
  };
```
```
 
```
```
  RETURN (
```
```
    <div STYLE={{ padding: '20px' }}>
```
```
      <h2>Welcome TO the Home Page</h2>
```

      <button onClick={handleLogin}>Login & GO TO Dashboard</button>

```
    </div>
```
```
  );
```
```
}
```
```
 
```
```
export DEFAULT Home;
```

🧩 Dashboard.js

```
  import React FROM 'react';
```
```
 
```
```
FUNCTION Dashboard() {
```

  RETURN <h2>🔒 Welcome TO the Protected Dashboard</h2>;

```
}
```
```
 
```
```
export DEFAULT Dashboard;
```

🧠 Summary

Only authorized users can access sensitive pages thanks to ReactJS’s protected routes. Building authentication flows for contemporary apps is simple with React Router’s Navigate and a PrivateRoute wrapper. Connect this to Firebase auth logic or JWT tokens for practical applications.

FAQ (Frequently Asked Questions)

Is the React Router secure?

React Router provides a straightforward way to handle routing in your application, and by combining it with authentication logic, you can create a secure environment for your users. In this tutorial, we'll explore how to implement secure routing in React. js using React Router and authentication logic.

What is the best way to handle authentication in React?

The best practice for React authentication is to take advantage of powerful encryption algorithms that offer a strong level of protection and use multi-factor authentication whenever possible.

What is useState and useEffect in React JS?

useState is a hook used to manage state in functional components, while useEffect is a hook used to manage side effects (like fetching data, setting up event listeners, or updating the DOM) in functional components.

Vijay Kumar

Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net

How to Protected Routes and Authentication in ReactJS | Complete guide on React Router authentication | What are Protected Routes in React JS