Picture QR Code Login

What it is

A web-based photo sharing application where users scan a QR code to access a password-gated album. It supports anonymous guest uploads via a shared password and authenticated uploads via Google Sign-In. Photos are attributed to the uploader, and deletion rights are enforced based on identity: Google users can delete their own photos, while an admin passcode allows deletion of any photo.

Features

• QR-code based access to a web-only photo album
• Dual login modes: shared guest password and Google Sign-In
• Direct-to-S3 photo uploads via presigned URLs
• Client-side thumbnail generation using Canvas
• Identity-aware deletion: users delete own, admin deletes all
• Per-photo attribution tracking for authenticated users

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[Mobile Browser] -->|Scan QR| CloudFront[CloudFront Distribution]
    CloudFront -->|Proxy Request| Lambda[Lambda Function]
    Lambda -->|Verify Token| Google[Google Identity Platform]
    Lambda -->|Generate Presigned URL| S3[S3 Bucket]
    User -->|Upload Image| S3
    User -->|Fetch Gallery| Lambda
    Lambda -->|List Objects| S3

How it's built

Built on AWS Serverless architecture using a single Lambda function (Node.js/Python runtime implied by context) serving HTML/JS and a JSON API. Images are uploaded directly from the browser to S3 using presigned URLs. Authentication is handled via Google OAuth2 tokens verified by the Lambda. State is stored in S3 metadata or a lightweight database (implied by attribution requirements). CloudFront distributes the frontend with caching disabled for instant updates.

How it runs

sequenceDiagram
    participant User as Mobile Browser
    participant CF as CloudFront
    participant Lambda as Lambda Function
    participant Google as Google Auth
    participant S3 as S3 Bucket
    User->>CF: GET / (Album Page)
    CF->>Lambda: Forward Request
    Lambda-->>User: Return HTML/JS
    User->>Google: Sign In / Enter Password
    Google-->>User: Return ID Token
    User->>Lambda: POST /auth/google or /login
    Lambda->>Google: Verify Token
    Google-->>Lambda: Valid User Info
    Lambda-->>User: Session Token
    User->>Lambda: GET /sign-upload
    Lambda->>S3: Generate Presigned URL
    S3-->>Lambda: Presigned URL
    Lambda-->>User: Return URL
    User->>S3: PUT Image Data
    S3-->>User: 200 OK

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, enter the guest password or sign in with Google, and upload photos directly from their mobile browsers.

At a glance