FeaturesTemplatesShowcaseTownie
AI
BlogDocsPricing
Log inSign up
glance
glanceBlobber
Remix of lightweight/Blobber
Public
Like
Blobber
Home
Code
3
README.md
debug.tsx
H
main.tsx
Branches
1
Pull requests
Remixes
History
Environment variables
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.
Sign up now
Code
/
Code
/
Search
main.tsx
https://glance--1f53f03a7aa44ea489772a445a83d0e5.web.val.run
README.md

LastLogin Authentication Demo

This is a demonstration of integrating LastLogin authentication into a Val Town HTTP handler.

Features

  • 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

How It Works

  1. Authentication Wrapper: The main HTTP handler is wrapped with lastlogin() which handles the authentication flow
  2. Email Detection: The server checks for X-LastLogin-Email header to determine if user is authenticated
  3. Conditional Rendering:
    • If authenticated: Shows welcome message with user email and logout button
    • If not authenticated: Shows placeholder for login button with LastLogin attribution
  4. Client-Side Login Button: The LoginWithGoogleButton is rendered client-side using React
  5. Logout Route: /auth/logout clears the session cookie and redirects to home

Key Components

  • 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

Usage

  1. Visit the app - you'll see the login screen with a loading placeholder
  2. The Google login button will appear once the client-side JavaScript loads
  3. Click "Sign in with Google" to authenticate via LastLogin
  4. After authentication, you'll see your personalized content
  5. Click "Logout" to end your session

Technical Details

  • 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

Files

  • main.tsx - Main HTTP handler with LastLogin integration
  • debug.tsx - Simple debug version to test LastLogin wrapper
  • README.md - This documentation
HTTP
  • main.tsx
    glance--1f…e5.web.val.run
Code
README.mddebug.tsx
H
main.tsx
Go to top
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Product
FeaturesPricing
Developers
DocsStatusAPI ExamplesNPM Package Examples
Explore
ShowcaseTemplatesNewest ValsTrending ValsNewsletter
Company
AboutBlogCareersBrandhi@val.town
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.