$30 off During Our Annual Pro Sale. View Details »

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

Manfred Steyer
PRO
September 26, 2022
Programming
0
150

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

Manfred Steyer
PRO

September 26, 2022
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
Import Maps: The Next Evolution Step for Micro Frontends?
manfredsteyer
PRO
0
64
Micro Frontends with Module Federation: Beyond the Basics
manfredsteyer
PRO
0
270
Import Maps: The Next Evolution Step for Micro Frontends?
manfredsteyer
PRO
0
130
Import Maps: The Next Evolution Step for Micro Frontends? @w-jax 2022
manfredsteyer
PRO
1
190
Angular's Future without NgModules: Architectures with Standalone Components
manfredsteyer
PRO
0
220
Reusable Components & Directives: Deep Dive
manfredsteyer
PRO
0
250
Import Maps: The Next Evolution Step for Micro Frontends?
manfredsteyer
PRO
0
490
Keynote: The Future of WebDev Manfred Steyer
manfredsteyer
PRO
0
120
Angular's Future without NgModules: Architectures with Standalone Components
manfredsteyer
PRO
0
300

Other Decks in Programming

See All in Programming
클라우드 시대에 맞는 사이트 신뢰성 엔지니어
outsider
0
510
SDPF ベアメタルサーバー / ハイパーバイザー開発における GitHub Actions を活用した CI 事例の紹介
yamy1114
0
110
JavaOne 2022 報告会（パターンマッチングとString Templatesの話）
takasyou
0
100
How To 脆弱性対応
cmkomuro
0
270
ビルドツールViteを10分で解説！
akitotsukahara
0
130
組織と技術の両輪で開発を加速させるkintoneチームの取り組み / JJUG CCC 2022 Fall Cybozu kintone
itchyny
0
270
2022 - 默默會 - 重新學習 MVC 的 Model
elct9620
1
210
Unleashing the power of lazy objects in PHP 🪄
nicolasgrekas
2
390
はてなブログ作成から投稿までをGitHub Actionsで自動化する
myamashii
1
350
redux使うのやめました
hirasa
1
140
Behat en 2022
pocky
1
140
やさしく入門するOAuth2.0/easy-entry-oauth
marchin1989
3
430

Featured

See All Featured
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.7k
The Invisible Customer
myddelton
111
12k
How To Stay Up To Date on Web Technology
chriscoyier
779
250k
Building Adaptive Systems
keathley
25
1.3k
The Language of Interfaces
destraynor
148
21k
Become a Pro
speakerdeck
PRO
3
3.1k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Bootstrapping a Software Product
garrettdimon
299
110k
Keith and Marios Guide to Fast Websites
keithpitt
405
21k
Docker and Python
trallard
27
1.8k
Code Reviewing Like a Champion
maltzj
508
38k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
182
15k

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