Picture QR Code Login

What it is

A password-gated, serverless photo album hosted on AWS. Users scan a QR code to access a web interface where they can authenticate via Google OAuth or username/password. Photos are uploaded directly from the browser to S3 using presigned URLs, ensuring the server never handles image bytes. Each upload is attributed to the logged-in user or 'Guest' if using the shared password.

Features

• Identity-aware login via Google OAuth or username/password
• Direct-to-S3 uploads using short-lived presigned URLs
• Client-side thumbnail generation and HEIC support
• Per-photo attribution tracking for logged-in users
• Password-gated access with separate owner delete controls
• Zero-maintenance serverless architecture on AWS

Quickstart

export ACCESS_PASSWORD="your-guest-password"
export OWNER_PASSCODE="your-private-passcode"
export TOKEN_SECRET="$(openssl rand -hex 32)"
./scripts/deploy.sh
python scripts/make_qr.py "<the-printed-url>" album-qr.png

Architecture

flowchart TD
    User[User Browser] -->|Scan QR| CF[CloudFront Distribution]
    CF -->|Proxy Request| LF[Lambda Function URL]
    LF -->|Verify Token/Auth| Auth[Auth Logic]
    LF -->|Generate Presigned URL| S3[(S3 Bucket)]
    User -->|Upload Photo Directly| S3
    User -->|GET Photos| LF
    LF -->|List Objects| S3
    S3 -->|HEIC Upload Trigger| ConvLambda[Converter Lambda]
    ConvLambda -->|Convert to JPG| S3

How it's built

Built as a single AWS Lambda function serving HTML/JSON via Function URL, backed by an S3 bucket for storage. Authentication uses stateless HMAC tokens for guest access and Google Identity Services for OAuth. Image processing (thumbnails) happens client-side via Canvas; HEIC conversion is handled by a secondary Lambda trigger. Infrastructure is managed via shell scripts and AWS CLI, isolated from other variants by specific naming conventions.

How it runs

sequenceDiagram
    participant U as User Browser
    participant CF as CloudFront
    participant L as Lambda Function
    participant S3 as S3 Bucket
    participant G as Google Auth

    U->>CF: GET / (Scan QR)
    CF->>L: Forward Request
    L->>U: Return Login Page
    U->>G: Sign in with Google
    G->>U: Return ID Token
    U->>L: POST /auth/google (ID Token)
    L->>L: Verify Token & Create Session
    L->>U: Return Authenticated State
    U->>L: Request Upload Permission
    L->>S3: Generate Presigned PUT URL
    S3-->>L: Return Signed URL
    L-->>U: Return Signed URL
    U->>S3: PUT Photo Data (Direct)
    S3-->>U: 200 OK
    U->>L: Notify Upload Complete
    L->>S3: Update Metadata/Attribution

How to apply & reuse

Deploy to AWS using the provided shell scripts after configuring environment variables for passwords and secrets. Generate a QR code pointing to the CloudFront distribution URL. Print the QR code for physical display at events. Users scan the code, log in, and upload photos directly from their mobile browsers without installing an app.

At a glance