How to Create a Protected Route After Login in Reactjs

Creating a protected route in Reactjs ensures that certain pages are accessible only to authenticated users. If the user isn’t logged in, they get redirected to the login page.

Here’s a step-by-step guide on how to create a protected route in ReactJS using React Router.

Install React Router

Ensure React Router is installed in your project. If not, install it using:

codenpm install react-router-dom

Set Up React Router

Wrap your app in BrowserRouter and define routes.

codeimport React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from "./Login";
import Dashboard from "./Dashboard";
import ProtectedRoute from "./ProtectedRoute";

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/login" element={<Login />} />
        {/* Protected Route */}
        <Route
          path="/dashboard"
          element={
            <ProtectedRoute>
              <Dashboard />
            </ProtectedRoute>
          }
        />
      </Routes>
    </Router>
  );
};

export default App;

Create the ProtectedRoute Component

This component checks whether the user is authenticated. If not, it redirects them to the login page.

 codeimport React from "react";
import { Navigate } from "react-router-dom";

const ProtectedRoute = ({ children }) => {
  const isAuthenticated = localStorage.getItem("isAuthenticated"); // Example auth check

  return isAuthenticated ? children : <Navigate to="/login" />;
};

export default ProtectedRoute;

Handle Login Logic

Update the login component to set an authentication flag (e.g., in localStorage or state) after successful login.

codeimport React from "react";
import { useNavigate } from "react-router-dom";

const Login = () => {
  const navigate = useNavigate();

  const handleLogin = () => {
    // Simulate authentication
    localStorage.setItem("isAuthenticated", "true");

    // Redirect to the protected route
    navigate("/dashboard");
  };

  return (
    <div>
      <h2>Login</h2>
      <button onClick={handleLogin}>Log In</button>
    </div>
  );
};

export default Login;

Create the Dashboard Component

This is the protected page that only authenticated users can access.

codeimport React from "react";

const Dashboard = () => {
  return <h2>Welcome to your Dashboard!</h2>;
};

export default Dashboard;

Test the Flow

1. Run your app.
2. Try accessing /dashboard directly – you’ll be redirected to /login if not authenticated.
3. Log in using the button in the Login component.
4. After login, you’ll be redirected to /dashboard.

Summary

• ProtectedRoute: A wrapper that checks for authentication.
• Navigate: Redirects unauthenticated users to the login page.
• Login Component: Sets the authentication status.
• Dashboard Component: A protected route that requires authentication.

Code Folder Structure

Here’s a suggested structure:

code/src
  - App.js
  - Login.js
  - Dashboard.js
  - ProtectedRoute.js

This setup ensures smooth user authentication with React Router. Let me know if you’d like further assistance or enhancements!