Blobber
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.
This is a demonstration of integrating LastLogin authentication into a Val Town HTTP handler.
- LastLogin Integration: Uses the
lastlogin
wrapper to handle authentication - Google OAuth: Login with Google via the
LoginWithGoogleButton
component - Protected Content: Shows personalized content for authenticated users
- Logout Functionality: Secure logout with proper cookie clearing
- Client-Side Rendering: LoginWithGoogleButton is rendered client-side for better compatibility
- Authentication Wrapper: The main HTTP handler is wrapped with
lastlogin()
which handles the authentication flow - Email Detection: The server checks for
X-LastLogin-Email
header to determine if user is authenticated - Conditional Rendering:
- If authenticated: Shows welcome message with user email and logout button
- If not authenticated: Shows placeholder for login button with LastLogin attribution
- Client-Side Login Button: The
LoginWithGoogleButton
is rendered client-side using React - Logout Route:
/auth/logout
clears the session cookie and redirects to home
- LastLogin Wrapper:
lastlogin(handler)
- Handles authentication flow - LoginWithGoogleButton: Pre-built Google OAuth button component (client-side rendered)
- Authentication Check: Server checks
X-LastLogin-Email
header - Logout Handler: Clears cookies and redirects
- Visit the app - you'll see the login screen with a loading placeholder
- The Google login button will appear once the client-side JavaScript loads
- Click "Sign in with Google" to authenticate via LastLogin
- After authentication, you'll see your personalized content
- Click "Logout" to end your session
- Styling: TailwindCSS via Twind CDN
- Authentication: LastLogin service with Google OAuth
- Client-Side Rendering: React 18.2.0 for the login button only
- Server-Side Logic: Pure HTML generation for authenticated content
main.tsx
- Main HTTP handler with LastLogin integrationdebug.tsx
- Simple debug version to test LastLogin wrapperREADME.md
- This documentation