Global state management with useContext and useReducer

Scenario

Context An application has authentication state (user, token, role) that needs to be accessible across deeply nested components without prop drilling. The Problem The auth state is currently passed through 5 levels of component props, making every intermediate component unnecessarily coupled to auth logic. Constraints Create an AuthContext with useContext. Manage state transitions with useReducer (LOGIN, LOGOUT actions). Provide the context at the root level and consume it in leaf components. Expected Deliverable A React context + reducer architecture for authentication state, demonstrating clean separation between context provider, reducer logic, and consumer components.

Targeted skills