sessionize-auth/demo/README.md

A flexible session management library for React, Next.js, Angular, and React Native

# Sessionize Auth Demo

This is a demonstration application showcasing the new Sessionize Auth v2.0 features.

## Features Demonstrated

- ✅ **React Integration**: Using `AuthProvider` and `useAuth` hook
- ✅ **Return-to Functionality**: Automatic redirection after login
- ✅ **Protected Routes**: Route protection with `ProtectedRoute` component
- ✅ **Multiple Storage Types**: localStorage, sessionStorage, cookies
- ✅ **TypeScript Support**: Full type safety
- ✅ **Modern UI**: Beautiful, responsive design

## Getting Started

### Prerequisites

- Node.js 16+ 
- npm, yarn, or pnpm

### Installation

1. Install dependencies:
```bash
npm install
# or
yarn install
# or
pnpm install
```

2. Start the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```

3. Open [http://localhost:3000](http://localhost:3000) in your browser

## How to Test

1. **Home Page**: View the landing page with feature overview
2. **Login**: Click "Login" and use any email/password (demo credentials provided)
3. **Protected Routes**: Try accessing `/dashboard` or `/profile` without being logged in
4. **Return-to**: Access a protected route, get redirected to login, then login to return to the original page
5. **Session Management**: Test logout and session persistence

## Demo Credentials

- **Email**: demo@example.com
- **Password**: password

*Note: Any email/password combination will work in this demo*

## Project Structure

```
demo/
├── src/
│   ├── components/
│   │   ├── Navbar.tsx          # Navigation with auth state
│   │   └── ProtectedRoute.tsx  # Route protection component
│   ├── pages/
│   │   ├── Home.tsx            # Landing page
│   │   ├── Login.tsx           # Login form
│   │   ├── Dashboard.tsx       # Protected dashboard
│   │   └── Profile.tsx         # Protected profile page
│   ├── App.tsx                 # Main app with routing
│   └── main.tsx                # App entry point
├── package.json
└── README.md
```

## Key Implementation Details

### AuthProvider Setup
```tsx
<AuthProvider<User>
  config={{
    storageType: 'localStorage',
    redirectPath: '/login',
    returnToParam: 'returnTo'
  }}
>
  <YourApp />
</AuthProvider>
```

### Protected Routes
```tsx
<Route 
  path="/dashboard" 
  element={
    <ProtectedRoute>
      <Dashboard />
    </ProtectedRoute>
  } 
/>
```

### Authentication Hook
```tsx
const { account, isAuthenticated, login, logout } = useAuth();
```

## Technologies Used

- **React 18**: Modern React with hooks
- **React Router**: Client-side routing
- **TypeScript**: Type safety
- **Vite**: Fast build tool
- **CSS3**: Modern styling with gradients and animations

## Learn More

- [Sessionize Auth Documentation](../README.md)
- [React Documentation](https://reactjs.org/)
- [TypeScript Documentation](https://www.typescriptlang.org/)