Managing authentication state in your React app is essential for ensuring that only authorized users can access sensitive content. Clerk provides hooks that allow you to easily determine a user's authentication state within your components. By leveraging these hooks, you can dynamically render content or redirect users based on whether they are signed in or not. This approach helps you build a secure and user-friendly authentication flow tailored to your application's needs.

To protect specific routes in your app, you can check the authentication state and redirect unauthenticated users to a sign-in page. This pattern ensures that only users who have successfully authenticated can access protected content, such as dashboards or personal profiles. The following example demonstrates how to implement this logic in a React component.

Suppose you want to protect a dashboard route so that only signed-in users can view it. You can use Clerk's authentication hooks to check if a user is signed in, and if not, redirect them to the sign-in page. Here is a simple pattern for protecting a route in a React component:

import { useAuth } from "@clerk/clerk-react";
import { Navigate } from "react-router-dom";

function Dashboard() {
  const { isSignedIn } = useAuth();

  if (!isSignedIn) {
    return <Navigate to="/sign-in" replace />;
  }

  return (
    <div>
      <h2>Welcome to your dashboard!</h2>
      {/* Protected content goes here */}
    </div>
  );
}

In this example, the useAuth hook provides the isSignedIn value. If the user is not signed in, the component redirects them to the /sign-in route. Otherwise, it renders the protected dashboard content.