ProtectedRoute

Renders children only when authenticated. Shows fallback otherwise.

import { ProtectedRoute } from "@allem-sdk/auth";

Props

PropTypeDefaultDescription
children*ReactNodeContent to show when authenticated
fallback*ReactNodeContent to show when not authenticated
loadingFallbackReactNodeContent to show while loading

Usage

<ProtectedRoute
  fallback={<LoginPage />}
  loadingFallback={<Spinner />}
>
  <Dashboard />
</ProtectedRoute>

Tip

ProtectedRoute is a convenience wrapper. For more control over auth state, use useAuth() directly in your components.