How to Handle Protected Routes in a React Clone Project

How to Handle Protected Routes in a React Clone Project

Protected routes keep unauthenticated users out of private features like uploading or watch later. Here is how to handle them in a React clone.

The ProtectedRoute Component

Create a ProtectedRoute component that checks auth state and redirects unauthenticated users to the login page. Wrap protected routes in it.

Use the Outlet for Layouts

Wrap a group of protected routes in a ProtectedRoute that renders an Outlet, so all child routes are protected without repeating the check on each one.

Where to Redirect

Redirect unauthenticated users to the login page, and ideally remember where they were trying to go so you can send them back after they log in. This is a nicer UX than a generic redirect.

Loading Auth State

While auth is loading, show a spinner instead of redirecting immediately. Otherwise, on a reload, you might briefly redirect a logged-in user because auth has not finished checking.

Public vs Protected Routes

Mix public routes like the homepage and watch page with protected routes like upload and watch later. Only protect what truly requires login; do not gate everything.

Test the Flow

Test that unauthenticated users are redirected, authenticated users see the page, and a reload preserves access without bouncing to login. Auth bugs are common, so test thoroughly.

The Takeaway

Handle protected routes with a ProtectedRoute component that checks auth and redirects to login, use an Outlet for groups of protected routes, remember where the user was going, handle loading auth state, and test the full flow including reloads.