Lucia Auth Starter

A demonstration of Lucia, the guide, and magic link authentication using Val Town.

This uses Val Town SQLite and Val Town Email, so you can Remix & roll-your-own-auth in a single-click. Literally zero set up required.

Note: Sending emails to users besides yourself requires Val Town Pro.

• Magic link authentication
• Server-side rendering with client-side hydration
• User profile management (username editing)
• Session management with secure cookies
• 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:Val Town SQLite for storing users, sessions, and magic link tokens
• Frontend: React with Tailwind CSS
• Backend: Hono.js for API routes and middleware
• Authentication: Built by following the Lucia guide

Provided by the Auth Middleware in backend/auth.ts:

• 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

In the app's API, in backend/index.ts:

• 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
• Session tokens are automatically rotated when 50% of their lifetime remains (15 days)
• Sessions expire after 30 days

• 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 Strict isn't working.