Public
Like
untitled-9454
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data β all from the browser, and deployed in milliseconds.
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 userPOST /api/register- Create new user accountPOST /api/logout- End user sessionGET /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
- Visit the login page
- Use demo credentials or create a new account
- Access the protected dashboard after authentication
- Sign out to return to the login page
- Frontend: React 18, TailwindCSS
- Backend: Hono, SQLite
- Platform: Val Town
- Authentication: Cookie-based sessions