Auth Hub

The Challenge

Outside Inc. operates 20+ distinct domains (outsideonline.com, backpacker.com, climbing.com, etc.) that needed to share user authentication state. Traditional approaches using third-party cookies were becoming unreliable due to browser privacy changes.

The requirements were:

• Single sign-on — Log in once, be authenticated everywhere
• No third-party cookies — Work within modern browser restrictions
• Security — Keep sensitive tokens encrypted in transit
• SEO preservation — Search bots should access content without auth redirects
• WordPress compatibility — Work with both Next.js and legacy WordPress sites

Architecture

The Auth Hub implements a Backend-for-Frontend (BFF) pattern where authentication logic runs in Next.js middleware:

┌──────────┐     ┌──────────────┐     ┌─────────────────┐
│  Browser │     │   Auth Hub   │     │  Outside Auth   │
│          │     │  (Middleware)│     │    Server       │
└────┬─────┘     └──────┬───────┘     └────────┬────────┘
   │                  │                      │
   │ 1. Visit site    │                      │
   │─────────────────>│                      │
   │                  │                      │
   │ 2. No session,   │                      │
   │    redirect      │                      │
   │<─────────────────│                      │
   │                  │                      │
   │ 3. Redirect to auth server              │
   │─────────────────────────────────────────>
   │                  │                      │
   │ 4. User logs in  │                      │
   │<─────────────────────────────────────────
   │                  │                      │
   │ 5. Auth code     │                      │
   │─────────────────>│                      │
   │                  │ 6. Exchange code     │
   │                  │      for tokens      │
   │                  │─────────────────────>│
   │                  │                      │
   │                  │ 7. Access + ID token │
   │                  │<─────────────────────│
   │                  │                      │
   │ 8. Set encrypted │                      │
   │    cookies       │                      │
   │<─────────────────│                      │
   │                  │                      │

Technical Approach

Middleware Router

The Auth Hub acts as a router for authentication-related requests, handling login, logout, authorization callbacks, and token refresh operations. Each route is processed in Next.js middleware at the edge, ensuring fast response times regardless of geographic location.

Token Encryption

Sensitive tokens are encrypted using AES-GCM before being stored in cookies. This ensures that even if cookies are intercepted, the tokens remain protected. The encryption uses a random initialization vector for each token, preventing pattern analysis attacks.

Cookie Structure

The Auth Hub manages several cookies with different purposes:

• outside_access — Encrypted access token, refresh token, and user info (HttpOnly, Secure)
• _pid — Piano paywall integration token (readable by client JavaScript)
• au — Anonymous user flag to prevent repeated SSO checks (short-lived, 2 minutes)
• outside_state — CSRF protection during OAuth flow (HttpOnly)

Bot Detection

Search engine bots skip authentication to ensure content is indexable. The system verifies bot identity by checking both the user agent string and the request IP against known bot IP ranges, preventing spoofing.

WordPress Proxy

For legacy WordPress content, the Auth Hub proxies requests while handling authentication. It forwards user data to WordPress via headers and rewrites internal URLs in the response to maintain consistent navigation.

Key Features

Silent SSO Check

When a user visits any Outside property, the Auth Hub silently checks if they have an active session on the auth server using a prompt=none OAuth request. If a session exists, the user is silently logged in. If not, the anonymous user cookie prevents repeated checks for 2 minutes.

Token Refresh

Access tokens are automatically refreshed before expiration. The middleware checks token validity on each request and transparently obtains new tokens using the refresh token when needed.

Piano Integration

The Auth Hub integrates with Piano for paywall management by generating Piano-compatible JWTs containing user subscription and membership information.

Outcomes

The Auth Hub successfully:

• Eliminated third-party cookie dependency — SSO works reliably across all browsers
• Improved security — Tokens are encrypted and never exposed to client-side JavaScript
• Preserved SEO — Search bots index content without auth interference
• Unified authentication — Single implementation works across Next.js and WordPress
• Reduced complexity — Authentication logic is centralized in one package

The system handles millions of authentication flows daily across all Outside Inc. properties, with token refresh and session management happening transparently in the background.