Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Rethinking Auth for SPAs and Micro Frontends: ...

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

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

Avatar for Manfred Steyer

Manfred Steyer PRO

September 26, 2022

More Decks by Manfred Steyer

See All by Manfred Steyer
Beyond Chatbots: Agentic UI with Open Standards @AGNTcon 2026 in Amsterdam
Avatar for Manfred Steyer manfredsteyer
PRO
0
110
Next-Level Frontends: Agentic Web UIs Under the Hood
Avatar for Manfred Steyer manfredsteyer
PRO
0
77
Agentic UI with Open Standards @ngGraz Sep 2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
93
Agentic UI with Open Standards @GDG Salzburg, Bgl & Prishtina
Avatar for Manfred Steyer manfredsteyer
PRO
0
81
Generative UI & AI-Assistants for Your Angular Solutions
Avatar for Manfred Steyer manfredsteyer
PRO
1
520
Generative UI & AI-Assistants for Your Angular Solutions
Avatar for Manfred Steyer manfredsteyer
PRO
0
220
Nostalgia Meets Technology: Super Mario with TypeScript
Avatar for Manfred Steyer manfredsteyer
PRO
0
300
Signal Forms: Details & Live Coding @enterJS 2026 in Mannheim
Avatar for Manfred Steyer manfredsteyer
PRO
0
320
Strategic Design in the Frontend: Moduliths & Micro Frontends @DDDEurope
Avatar for Manfred Steyer manfredsteyer
PRO
0
220

Other Decks in Programming

See All in Programming
[Rails World 2026] Durable orchestration on Rails: from continuation to workflow
Avatar for Vladimir Dementyev palkan
1
310
Streamlitで実現する自然言語データアプリ開発
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
1
320
スマート反転とウェブアクセシビリティ
Avatar for KAMIHARA Takumi camiha
0
210
AHC070解法紹介
Avatar for eijirou eijirou
0
130
20260914 AIエージェント時代のPlatform Engineering　LLM基盤とプロダクトの責務境界線
Avatar for Taiki Kanzaki kanfab1
7
2.2k
The Good Stuff, Not the Slop: Engineering High-Quality Android Apps with Modern AI Tooling
Avatar for danybony danybony
1
260
モジュールの視点からSwiftを読み解く #iosdc
Avatar for Shigure Shimotori s_shimotori
0
190
海上で動くGoサーバー: goroutineとchannelでさばく航行データストリーム
Avatar for Atsuki Seo atsuki_seo
0
930
AI が書く Go コードの品質を劇的に向上させる Linter: “declscope”
Avatar for mpyw mpyw
0
400
SREの越境 / SRE Collaboration
Avatar for y-ohgi y0hgi
2
280
技術的負債を組織課題として解く-増えすぎたマイクロサービスとの戦い-
Avatar for reimaru reimaru
1
2.3k
すこし踏み込む CancellationToken
Avatar for tkym htkym
2
1k

Featured

See All Featured
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
310
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.5k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
240
Done Done
Avatar for chrislema chrislema
187
17k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
331
25k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
2
3.9k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
1
540
Between Models and Reality
Avatar for mayunak mayunak
4
470
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
2
440
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
192
12k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
390
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.4k

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