Second Screen Authentication

FOX CTV Activation Platform Modernization

System Context

Second Screen Authentication (SSA) is an activation flow powering FOX NOW, FOX Nation, and FOX Sports.

The original platform, built in 2016, had accumulated significant technical debt:

• Deprecated AWS infrastructure (ElasticBeanstalk + PHP < 7.3)
• Legacy PHP, jQuery, RequireJS, Zend Framework
• Difficult developer experience (hard to run locally)
• Monolithic deployments for multiple brands
• Increasing security & compliance pressure

FOX initiated a modernization effort. I led the architecture, refactor, and re-platform workstream.

• Next.js
• Gatsby
• AWS
• CI/CD
• React
• JavaScript

Structural Problems

1. Infrastructure & Security Debt

From the original SSA refactor deck, the existing stack was:

• ElasticBeanstalk & PHP < 7.3 (deprecated)
• No support for newer AWS infrastructure
• Needed a path towards static hosting and modern patterns

2. Legacy Codebase

• jQuery
• Zend Framework (deprecated)
• CommonJS/AMD
• Grunt
• Difficult to maintain
• Hard to onboard new engineers

3. Developer Experience

• "SSA is full of mystery." – internal engineer feedback
• Local dev required multiple services and dated tooling
• PHP experience mismatch across the broader engineering org

4. Deployment Blockers

• FOX NOW and FOX Nation built and deployed together
• No brand separation
• CI/CD pipeline was slow and brittle

Architecture & Tradeoffs

Choosing a Framework

We evaluated:

• Next.js
• Gatsby
• (React Static, Hugo, Nuxt, Hexo were considered but not chosen)

Two greenfield branches were created:

• NEXTJS/BASE
• GATSBY/BASE

Both prototypes demonstrated:

• Routing and navigation
• API communication with FOX/Adobe services
• Brand-separated styling
• Reg-code and activation logic
• MVPD picker and provider search
• Local development workflow

Why Next.js/Gatsby?

• Faster development
• Built-in routing
• Automatic code-splitting
• Static export support
• React-based (same ecosystem as FOX OTT apps)
• Future-proof for Delta and Sports integrations

Modernized Developer Experience

• Hot Module Reloading
• React Fast Refresh
• TypeScript support
• Internal API routes replacing PHP logic
• Hooks replacing jQuery libs (for example, cookie handling)

System Components

Brand Separation

We explored:

1. Three separate repos
2. Three instances in the same repo
3. Conditional rendering per brand

The chosen approach was separate deploy targets/branches with shared components and logic, giving each brand its own deployment lifecycle while keeping the codebase maintainable.

Core JS Refactors

Key scripts refactored from legacy JS to modern React/TypeScript modules:

• reg-code.js
• segment.js
• account-helper.js
• helper.js

Changes included:

• jquery.cookie → modern React-based cookie handling
• Legacy AJAX → fetch with async/await
• Global utilities → typed, modular helpers

Screens & UX

Pages Rebuilt

Key flows and pages moved into the new React-based platform:

• activate.js
• genregcode.js
• search-providers.js
• provider-list.js
• single-provider.js
• error.js
• success.js
• mvpd.js
• all-provider-list.js

These screens together handle the full second-screen activation journey across devices and providers.

CI/CD & Deployment

What Changed

• Introduced branch-specific builds
• Enabled static hosting via S3/CloudFront as an option
• Cleaner separation between FOX NOW and FOX Nation deployments
• Reduced risk around infra deprecations

Result

• Faster deployments
• Reduced operational cost
• Infra brought back into compliance and on supported runtimes

Operational Outcomes

Additional Wins

• Full compatibility path with Delta and Sports apps
• Modernized analytics and SDK integrations
• Clear foundation for future consolidated account/SSO flows
• Much easier onboarding for new engineers joining FOX OTT teams

Summary

The re-platform produced a modern, React-based second-screen system capable of scaling with FOX's streaming ecosystem.