Gary Archer's presentation at API Days London 2023 Learn more: https://curity.io/resources/learn/token-handler-overview/

1. Token Handler Pattern
API Driven OpenID Connect for Single Page Apps

2. Agenda
• Secured SPAs that call OAuth 2.0 Secured APIs
• Browser Security Threats, Concerns and Best Practices
• Using API-Driven SPA Security
• End-to-End Demo and Questions

3. Original SPA OpenID Connect Flow

4. Benefits
• Productive development, with a focus on the frontend
• Separation of concerns makes each part simple
• Deploy anywhere, such as to a content delivery network

5. Browser Cookie Changes
Same Site Cookies (updates to RFC6265):
• Considered to have stronger browser protection than tokens
• Tokens in the browser have more XSS threats and people concerns
Problems with the original SPA Flow:
• Third party SSO cookies used for token refresh are dropped
• JavaScript-only option requires a refresh token in local storage

6. Backend for Frontend (BFF)
• A backend component that issues cookies on behalf of the SPA
• Described in OAuth 2.0 for Browser Based Apps
• How to integrate one while retaining SPA benefits?

7. Token Handler Pattern

8. Differences to Alternative Solutions
• Separation of Web Host from Cookie Issuing
• API driven cookies best support micro-UI architectures
• SPA calls APIs via a high-performance API gateway
• SPA remains in control, for best usability

9. OAuth Agent: API Driven OpenID Connect
• POST /login/start
• POST /login/end
• POST /refresh
• GET /userinfo
• GET /claims
• POST /logout

10. OAuth Agent: Login Flow

11. SPA Cookie Properties
• HTTP-only
• SameSite=strict
• Secure
• Domain=api.product.com
• Path =/
• Encrypted

12. Example Cookie Sent to APIs
• cookie:at=AVyV7pq8ctwBYYcOqgSsrIHJJJEVTMLsobjATMYMBu70tWYKI
x1nQJTNanDXGexpX0Jx80SspeXIUi0e4htdroZkgj1cFL0WCyU
• Cookies are small when opaque access tokens are used
• Small API message credential, like a web session cookie
• Backend is stateless and easy to manage

13. OAuth Proxy: Web Security in the Gateway

14. Security Results
• Website Level Security
• Can use any Financial Grade Website options
• Does not solve Cross Site Scripting

15. Questions?

16. Deployment Example 1

17. Deployment Example 2

18. Pure SPA Development Setups

19. Scalability and Micro UIs
• Large SPAs can be split without double logins or cookie conflicts

20. End-to-End Demo

21. Questions?

22. Further Information
- https://curity.io/resources
- Token Handler Overview
- SPA Security Whitepaper
- https://github.com/curityio/spa-using-token-handler