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

Rethinking Auth for SPAs and Micro Frontends: ...

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
Human in the Loop Beyond Approval: Toward True Collaboration @FrontMania 2026 in Utrecht
Avatar for Manfred Steyer manfredsteyer
PRO
0
67
Agentic UI: Where the Agent meets the User @FrontMania 2026 in Utrecht
Avatar for Manfred Steyer manfredsteyer
PRO
0
69
A2UI as an Architecture Question: Agentic UI Between AI Freedom and Control
Avatar for Manfred Steyer manfredsteyer
PRO
0
96
AI-Ready Angular Architectures Architecture as Executable Contract
Avatar for Manfred Steyer manfredsteyer
PRO
0
260
Nostalgia Meets Technology: Super Mario with TypeScript @BASTA 2026 in Mainz, Germany
Avatar for Manfred Steyer manfredsteyer
PRO
0
65
Beyond Chatbots: Agentic UI with Open Standards @AGNTcon 2026 in Amsterdam
Avatar for Manfred Steyer manfredsteyer
PRO
0
150
Next-Level Frontends: Agentic Web UIs Under the Hood
Avatar for Manfred Steyer manfredsteyer
PRO
0
110
Agentic UI with Open Standards @ngGraz Sep 2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
120
Agentic UI with Open Standards @GDG Salzburg, Bgl & Prishtina
Avatar for Manfred Steyer manfredsteyer
PRO
0
100

Other Decks in Programming

See All in Programming
作って学ぶSpring BootのAuto Configuration / JJUG Night Seminar 2026-10-19
Avatar for Ryo Shindo rshindo
0
170
KiroのSpecで「五目並べ」を作ってみる
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
380
パズルゲームの作り方 / how to make puzzle games
Avatar for kaityo256 kaityo256
PRO
2
300
re:Inventに行く前に知っておきたい現地参加のノウハウ
Avatar for nokomoro3 nokomoro3
0
430
iOS 27でニュースアプリはどう変わる！？ 〜日経電子版の新機能対応と、開発事例から〜
Avatar for Kazuki Nakashima lynnswap
7
13k
機械に任せるテスト、人が見るテスト ⽣成AIで引き直した、運⽤保守フェーズの線引き
Avatar for KUSATAKE Daisuke dske104
0
190
作れる、でも消せるか？──安全に「枯らして消す」機能削除術 / Drain, Then Delete
Avatar for chobishiba chobishiba
2
780
[JA] Domain Modeling with Vanilla Rails: 「操作」から再考するRailsの設計論
Avatar for Yuichi Goto yasaichi
2
410
Kotlinの15年とServer-Side Kotlin
Avatar for Takehata Naoto n_takehata
1
150
APNsからLive Activityを開始する話
Avatar for Ryotaro Onoue yumnumm
0
170
Agents on Rails - Rails at Scale 2026
Avatar for Irina Nazarova irinanazarova
0
570
Event is what happens
Avatar for MOROHASHI Kyosuke moro
2
850

Featured

See All Featured
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
320
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
1
1.2k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
6
1.2k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
371
20k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
5.4M
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
520
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
550
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
600
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
370
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.3k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
306
120k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.5k

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