Login Page

A complete authentication system with login and registration functionality built with React and Hono.

• 🔐 User authentication (login/logout)
• 📝 User registration
• 🍪 Session management with cookies
• 💾 SQLite database for user storage
• 🎨 Beautiful UI with TailwindCSS
• 📱 Responsive design
• ⚡ Real-time form validation

• Username: demo
• Password: demo123

├── backend/
│   └── index.ts          # Hono API server with auth endpoints
├── frontend/
│   ├── index.html        # Main HTML template
│   ├── index.tsx         # React app entry point
│   └── components/
│       ├── App.tsx       # Main app component
│       ├── LoginForm.tsx # Login/registration form
│       └── Dashboard.tsx # Protected dashboard
├── main.tsx              # HTTP trigger entry point
└── README.md

• POST /api/login - Authenticate user
• POST /api/register - Create new user account
• POST /api/logout - End user session
• GET /api/auth - Check authentication status

The app uses SQLite with a simple users table:

CREATE TABLE login_users_1 (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  username TEXT UNIQUE NOT NULL,
  password TEXT NOT NULL,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

• HTTP-only cookies for session management
• Secure cookie settings
• Input validation
• SQL injection protection with parameterized queries
• Password length requirements

1. Visit the login page
2. Use demo credentials or create a new account
3. Access the protected dashboard after authentication
4. Sign out to return to the login page

• Frontend: React 18, TailwindCSS
• Backend: Hono, SQLite
• Platform: Val Town
• Authentication: Cookie-based sessions