A demonstration of magic link authentication using Val Town.

• Magic link authentication
• Server-side rendering with client-side hydration
• User profile management (username editing with validation)
• Session management with secure cookies and token rotation
• Responsive UI with Tailwind CSS

1. User enters their email address on the login page
2. A magic link is sent to the user's email
3. User clicks the magic link in their email
4. The server validates the token, creates a session, and sets a secure cookie
5. User is redirected to the authenticated home page

• Database: SQLite for storing users, sessions, and magic link tokens
• Frontend: React with Tailwind CSS
• Backend: Hono.js for API routes and middleware
• Authentication: Custom implementation with secure cookies
• Session Security: Sliding + rotating sessions (new token generated when 50% of session lifetime remains)
• Input Validation: Username validation enforces 3-50 printable characters and prevents XSS

• POST /auth/magic-link - Request a magic link
• GET /auth/magic-link/:token - Validate a magic link token
• POST /auth/logout - Log out the current user
• POST /api/user/username - Update the user's username

• Email sending requires Val Town Pro subscription for sending to addresses other than your own
• Magic links expire after 15 minutes
• Sessions expire after 30 days
• Session tokens are automatically rotated when 50% of their lifetime remains (15 days)
• Username validation rules: 3-50 printable characters, no "</>" sequences to prevent XSS

• When I tried to make the magic link token single-use, it caused issues. I think the best practice there is something a bit more complicated, ie a GET request to an HTML page that makes a POST request.
• When I tried to make the SameSite=Strict, the cookie stopped working. It's currently Lax, which I think is OK, but it'd be nice to know why.