This demonstrates authentication and protected routing in a modern React application using Context API, useReducer, and React Router. It also introduces a custom useLocalStorage hook to persist user login across page reloads.

• User credentials are mocked for simplicity.
• On login, user data is saved to:
  • React Context (for app-wide access)
  • localStorage (for persistence on refresh)

• Only accessible when a user is authenticated.
• Redirects to /login if user is not logged in.

src/
│
├── components/
│   ├── Login.tsx
│   └── Profile.tsx
│
├── context/
│   └── AuthContext/
│       ├── AuthContext.tsx
│       ├── AuthContextType.ts
│       └── authReducer.ts
│
├── hooks/
│   ├── useAuth.ts       ← Custom hook to access AuthContext
│   └── useLocalStorage.ts ← Custom hook to resue localStorage logic
│
├── routes/
│   ├── constant.ts
│   ├── publicRoutes.ts
│   └── privateRoutes.ts
│
├── styles/
│   ├── Login.ts
│   └── Profile.ts
│
├── types/
│   └── User.ts
│
└── App.tsx

• react
• react-router
• auth-context
• role-based-access
• localstorage
• context-api
• use-reducer
• protected-routes
• react-hooks

This project helps you understand React application with global state, and protected routes.

Feel free to fork and ⭐️ this repo if it helps!