Connections Directory #

A Progressive Web App for networking at ATmosphereConf 2026 using the AT Protocol.

Project Overview #

• Event: ATmosphereConf 2026 (March 26-29, Vancouver, BC)
• Domain: connections.directory
• Purpose: Connect with conference attendees by scanning QR codes containing DIDs
• Social Graph: Uses id.sifa.graph.follow lexicon (Sifa professional network)

Architecture #

• Frontend: React + Vite (static SPA)
• Backend: Cloudflare Workers (OAuth endpoints only)
• Storage: Cloudflare KV (sessions and state)
• Auth: AT Protocol OAuth with PKCE and DPoP

Setup Instructions #

Prerequisites #

• Node.js 20+ and npm
• Cloudflare account (for Workers deployment)
• Domain: connections.directory pointed to Cloudflare

Frontend Setup #

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

Workers Setup #

cd workers

# Install dependencies
npm install

# Create KV namespaces
wrangler kv namespace create "OAUTH_SESSIONS"
wrangler kv namespace create "OAUTH_STATE"

# Update wrangler.toml with the KV namespace IDs returned above

# Generate ECDSA P-256 private key
openssl ecparam -name prime256v1 -genkey -noout -out private.pem

# Store private key as secret
wrangler secret put OAUTH_PRIVATE_KEY
# Paste the contents of private.pem when prompted

# Run development server
npm run dev

# Deploy to Cloudflare
npm run deploy

Environment Configuration #

1. Client Metadata: Ensure public/client-metadata.json is accessible at https://connections.directory/client-metadata.json
2. Workers Routes: Configure Cloudflare Workers routes:
   • /api/auth/* → connections-directory worker
3. DNS: Point connections.directory to Cloudflare

Project Structure #

at-connect/
├── src/                      # Frontend React app
│   ├── lib/                  # Core utilities
│   │   ├── atproto/         # AT Protocol integration
│   │   ├── qr/              # QR code scanning/generation
│   │   └── storage/         # IndexedDB for offline
│   ├── components/          # React components
│   ├── pages/               # Route pages
│   └── store/               # Zustand state management
├── workers/                  # Cloudflare Workers backend
│   └── src/
│       ├── oauth/           # OAuth client and handlers
│       └── utils/           # Fetch wrapper for Cloudflare
└── public/                  # Static assets
    └── client-metadata.json # OAuth client metadata

Features #

• ✅ Scan QR codes to connect with people
• ✅ Display your QR code for others to scan
• ✅ View list of connections
• ✅ Works offline (queues and syncs)
• ✅ Installable as PWA
• ✅ OAuth authentication via Cloudflare Workers

Implementation Status #

• Frontend project structure
• Workers project structure
• Complete OAuth implementation
• QR code scanning
• QR code generation
• Connection management
• PWA features
• Deployment

Development #

The project is currently in Phase 1 (Setup & Authentication). Next steps:

1. Install Workers dependencies
2. Complete OAuth client implementation using @atproto/oauth-client-node
3. Implement frontend OAuth integration
4. Test OAuth flow end-to-end

References #

• AT Protocol OAuth Spec
• Cloudflare Workers OAuth Example
• ATmosphereConf 2026
• Sifa.id