Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rethinking Auth for SPAs and Micro Frontends: ...

Avatar for Manfred Steyer Manfred Steyer
PRO
September 26, 2022
Programming
0
270

Rethinking Auth for SPAs and Micro Frontends: Easy and Secure With Gateways

Avatar for Manfred Steyer

Manfred Steyer
PRO

September 26, 2022
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
Modern Angular with Signals and Signal Store: New Rules for Your Architecture @enterJS Advanced Angular Day 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
7
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
62
Your Architecture as a Crime Scene: Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
Rethinking Data Access: The New httpResource in Angular
Avatar for Manfred Steyer manfredsteyer
PRO
0
280
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
Avatar for Manfred Steyer manfredsteyer
PRO
0
180
JavaScript as a Crime Scene Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
85
Modern Angular with Signals and Signal Store: New Rules for Your Architecture @jax2025 in Mainz, Germany
Avatar for Manfred Steyer manfredsteyer
PRO
0
170
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
Avatar for Manfred Steyer manfredsteyer
PRO
0
94
Your Architecture as a Crime Scene Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
72

Other Decks in Programming

See All in Programming
Elixir で IoT 開発、 Nerves なら簡単にできる！？
Avatar for pojiro pojiro
1
150
技術同人誌をMCP Serverにしてみた
Avatar for 74th(Atsushi Morimoto) 74th
0
280
プロダクト志向ってなんなんだろうね
Avatar for RightTouch righttouch
PRO
0
150
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
Avatar for Takuya Katsusa takuyakatsusa
2
340
A2A プロトコルを試してみる
Avatar for azukiazusa azukiazusa1
2
1.1k
CursorはMCPを使った方が良いぞ
Avatar for taiga taigakono
1
170
「ElixirでIoT!!」のこれまでとこれから
Avatar for takasehideki takasehideki
0
370
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
Avatar for uutan1108 ohmori_yusuke
2
170
GoのGenericsによるslice操作との付き合い方
Avatar for syumai syumai
3
680
AIコーディング道場勉強会#2 君（エンジニア）たちはどう生きるか
Avatar for misaki.otb misakiotb
1
240
FormFlow - Build Stunning Multistep Forms
Avatar for Yonel Ceruto González yceruto
1
190
Azure AI Foundryではじめてのマルチエージェントワークフロー
Avatar for 瀬尾佳隆 seosoft
0
130

Featured

See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2.1k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.2k
Docker and Python
Avatar for Tania Allard trallard
44
3.4k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
71
4.9k
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.3k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.5k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
33
5.9k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
32
2.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
700

Transcript

  1. @ManfredSteyer ManfredSteyer Manfred Steyer, ANGULARarchitects.io

  2. @ManfredSteyer Folie▪ 2 Client Authorization-Server Resource-Server

  3. @ManfredSteyer Folie▪ 3 Client Authorization-Server Resource-Server 1. Redirection 2. Redirect

    w/ (Code for) Access-Token in Query String 3. Access-Token

  4. @ManfredSteyer Folie▪ 4 Client Authorization-Server Resource-Server 1. Redirection 2. Redirect

    w/ (Code for) Access-Token and Id-Token 3. Access-Token User Info Endpoint (OIDC)

  5. @ManfredSteyer

  6. @ManfredSteyer

  7. @ManfredSteyer Manfred Steyer

  8. @ManfredSteyer

  9. @ManfredSteyer

  10. @ManfredSteyer

  11. @ManfredSteyer Several suggestions for using OAuth 2 in a more

    secure way

  12. @ManfredSteyer Example: Using Code Flow + PKCE instead of Implicit

    Flow

  13. @ManfredSteyer Remaining Problem: XSS -> Stealing Tokens

  14. @ManfredSteyer

  15. @ManfredSteyer Why Token Refresh? Short living Tokens increase Security Users

    don't want to login over and over again

  16. @ManfredSteyer Folie▪ 23 Client Authorization-Server Resource-Server 1. Redirection 2. Code

    for Access-Token und Id-Token and Refresh-Token

  17. @ManfredSteyer Folie▪ 24 Client Authorization-Server Resource-Server 3. Refresh-Token 4. Code

    for Access-Token und Id-Token and new Refresh-Token

  18. @ManfredSteyer * with conditions …

  19. @ManfredSteyer

  20. @ManfredSteyer

  21. @ManfredSteyer Client Gateway Authorization-Server Resource-Server Access-Token Id-Token Refresh-Token HTTP-only Cookie

    Static Files (SPA) + XSRF Token SameSite +

  22. @ManfredSteyer Client Gateway Authorization-Server Resource-Server 1 Access-Token Id-Token Refresh-Token HTTP-only

    Cookie Static Files (SPA) Resource-Server 2 ⁉️

  23. @ManfredSteyer

  24. @ManfredSteyer

  25. @ManfredSteyer

  26. @ManfredSteyer

  27. @ManfredSteyer

  28. @ManfredSteyer DEMO

  29. @ManfredSteyer Demo • SPA: https://purple-flower-021fa1b03.azurestaticapps.net/home • SPA behind Security Gateway:

    https://demo-auth-gateway.azurewebsites.net/home • Source Code for Gateway: https://github.com/manfredsteyer/yarp-auth-proxy • Source Code for Auth in SPA: https://github.com/manfredsteyer/auth-gateway-client/

  30. @ManfredSteyer Conclusion Browser: No Safe Place for Tokens Gateway: Generic

    Implementation Token Refresh Easier + More Secure

  31. @ManfredSteyer d Slides & Examples Remote and In-House http://softwarearchitekt.at/workshops