Authentication HOC

Build a higher-order component that adds authentication and role-based access control to React components.

Capabilities

Handles unauthenticated users

• Given a component wrapped with withAuth and user prop { isAuthenticated: false }, it displays "Please log in to access this content" @test

Enforces role-based access

• Given a component wrapped with withAuth requiring role "admin", user prop { isAuthenticated: true, role: "user" }, it displays "Access denied: insufficient permissions" @test
• Given a component wrapped with withAuth requiring role "admin", user prop { isAuthenticated: true, role: "admin" }, it renders the wrapped component @test

Forwards props correctly

• Given a component wrapped with withAuth (no role required), user prop { isAuthenticated: true }, it renders the wrapped component with all original props @test

Implementation

@generates

API

export interface AuthUser {
  isAuthenticated: boolean;
  role?: string;
}

export interface WithAuthConfig {
  requiredRole?: string;
}

export interface WithAuthProps {
  user: AuthUser;
}

export function withAuth<P extends object>(
  Component: React.ComponentType<P>,
  config?: WithAuthConfig
): React.ComponentType<P & WithAuthProps>;

Dependencies { .dependencies }

@types/react { .dependency }

Provides TypeScript type definitions for React including ComponentType, higher-order component patterns, and proper prop typing.

@satisfied-by