Blobber is a simple yet powerful blob management application that allows authorized users to search for and delete blobs from Val Town's blob storage. It features secure authentication via LastLogin and role-based authorization to ensure only designated administrators can access the blob management interface.

Blobber provides a web interface for managing Val Town blob storage with the following features:

• 🔍 Search Blobs: Search for blobs by key prefix (case-sensitive)
• 📋 View Blob Metadata: See blob keys, sizes, and metadata in a clean JSON format
• 🗑️ Bulk Delete: Delete multiple blobs matching a prefix, with confirmation
• 🔒 Secure Access: Only authorized administrators can access the interface
• 📊 Real-time Results: See exactly how many blobs match your search criteria

• Clean up old or unused blobs from your Val Town storage
• Bulk delete blobs that you're using for a site cache
• Manage blobs across the Vals in your account

This app implements a two-layer security model:

• Provider: LastLogin - A simple, secure authentication service
• Method: Google OAuth via LastLogin's LoginWithGoogleButton component
• Flow:
  1. Unauthenticated users see a login page with Google sign-in button
  2. LastLogin handles the OAuth flow and returns user email
  3. The app receives the authenticated email via the X-LastLogin-Email header

• Role-Based Access: Only designated admin emails can access the blob management interface
• Admin List: Configured via the ADMIN_EMAILS environment variable
• Access Control:
  • ✅ Admin users: Full access to search and delete blobs
  • ❌ Authenticated non-admins: See "Access Denied" page with their email
  • ❌ Unauthenticated users: Redirected to login page

1. LastLogin Wrapper: The entire app is wrapped with lastlogin(handler) which:

   • Intercepts all requests
   • Handles the OAuth flow automatically
   • Adds the X-LastLogin-Email header for authenticated users

2. Middleware Authentication Check: Every route checks for the email header:

   const email = c.req.header("X-LastLogin-Email");
   if (!email) {
     // Show login page
   }

3. Authorization Validation: After authentication, check if user is an admin:

   const isAdmin = (email: string) => ADMIN_EMAILS.includes(email);
   if (!isAdmin(email)) {
     // Show access denied page
   }

4. Secure Logout: The /auth/logout route clears the LastLogin cookie and redirects home

To remix this Val and make it your own, you need to configure these environment variables:

What it does: Comma-separated list of email addresses that have admin access to the blob management interface.

Format: email1@domain.com,email2@domain.com,email3@domain.com

How to set it:

1. Go to your Val Town settings
2. Navigate to Environment Variables
3. Add a new variable named ADMIN_EMAILS
4. Set the value to your comma-separated list of admin emails
5. Save the configuration

1. Fork/Remix this Val in Val Town
2. Set Environment Variables:
   • Add ADMIN_EMAILS with your desired admin email addresses
   • Make sure to include your own email if you want access!
3. Test Authentication:
   • Visit your Val's URL
   • Sign in with Google using one of your admin emails
   • Verify you can access the blob management interface
4. Test Authorization:
   • Try signing in with a non-admin email to see the access denied page
   • Add/remove emails from ADMIN_EMAILS to test different access levels

• Email Matching: Admin email matching is case-sensitive and exact
• No Wildcards: You must specify complete email addresses (no domain wildcards)
• Environment Security: Environment variables are secure and not exposed to client-side code
• Session Management: LastLogin handles secure session management and cookie security

• main.tsx - Main application with full blob management interface
• debug.tsx - Simple debug tool to test LastLogin authentication
• README.md - This documentation

• LastLogin: https://esm.town/v/stevekrouse/lastlogin_safe - Authentication wrapper
• Hono: npm:hono@3.12.12 - Web framework for routing and middleware
• Val Town Blob: https://esm.town/v/std/blob - Blob storage operations
• React: Client-side rendering for the Google login button only

1. Access the App: Visit your Val's URL
2. Sign In: Click "Sign in with Google" and complete OAuth
3. Search Blobs: Enter a prefix to search for matching blob keys
4. Review Results: See the count and details of matching blobs
5. Delete Blobs: Use the delete button with confirmation for bulk operations
6. Logout: Click logout to end your session securely

Simply update the ADMIN_EMAILS environment variable with the new email addresses.

The HTML templates in main.tsx can be modified to change the appearance and functionality.

The Hono app structure makes it easy to add new routes and middleware for additional blob management features.