This is a POC for basic private (protected) routes and public route. With custom hooks to control login and logout events

Link to demo

This includes:

A provider for handling the user session, in sync with localStorage: <SessionProvider />
Custom Route components: <ProtectedRoute /> and <PublicRoute />
Two custom hooks: useLogin() and useLogout()
A form with validation featuring Formik and Yup: <Login />
Some scafolding I like to use
Some helpers

Libraries used:

• Formik
• React
• React Router Dom
• Yup

Language:

• Typescript

Application tree:

.
├── components
│   ├── Home.tsx
│   └── Login.tsx
├── lib
│   ├── hooks
│   │   ├── useLogin.ts
│   │   └── useLogout.ts
│   ├── providers
│   │   └── SessionProvider
│   │       ├── context.ts
│   │       └── provider.tsx
│   ├── constants.tsx
│   ├── helpers.ts
│   ├── router.tsx
│   ├── routes.ts
│   └── types.ts
├── index.css
├── index.tsx
└── react-app-env.d.ts

Hope you enjoy it!