Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Rethinking Auth for SPAs and Micro Frontends: ...
Search
Manfred Steyer
PRO
May 18, 2022
Programming
790
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Rethinking Auth for SPAs and Micro Frontends: Easy and Secure With Gateways
Manfred Steyer
PRO
May 18, 2022
More Decks by Manfred Steyer
See All by Manfred Steyer
Generative UI & AI-Assistants for Your Angular Solutions
manfredsteyer
PRO
1
340
Generative UI & AI-Assistants for Your Angular Solutions
manfredsteyer
PRO
0
160
Nostalgia Meets Technology: Super Mario with TypeScript
manfredsteyer
PRO
0
240
Signal Forms: Details & Live Coding @enterJS 2026 in Mannheim
manfredsteyer
PRO
0
260
Strategic Design in the Frontend: Moduliths & Micro Frontends @DDDEurope
manfredsteyer
PRO
0
180
Agentic UI
manfredsteyer
PRO
0
260
Signal Forms: Beyond the Basics @ngBaguette 2026 in Paris
manfredsteyer
PRO
0
320
Agentic UI beyond Chats Architecture Patterns & Open Standards @ngMunich 05/2026
manfredsteyer
PRO
0
260
Agentic AI in the Frontend: Architectures with Open Standards @iJS London 2026
manfredsteyer
PRO
0
190
Other Decks in Programming
See All in Programming
the container ship “Apple Silicon”@WWDC26 Recap -Japan-\(region).swift
shingangan
0
120
AI時代に設計が 最大の生産性レバーになる 意図駆動開発とデータを消さない設計|Don't Delete Your Data or Your Intent — Design as the Deepest Lever in the AI Era
tomohisa
1
830
全PRの83%がAIレビューだけでマージできるようになった開発組織はその後どうなったか
athug
1
1.6k
Foundation Models frameworkで画像分析
ryodeveloper
1
610
AI時代のPHPer生存戦略 ~「言語、もうなんでもよくない?」に本気で向き合う~
vivion
0
320
Flow は今どうなっているか
mizdra
PRO
0
140
関東Kaggler会_NVIDIA_Nemotron_コンペ_振り返り
rick_ds
0
550
20260722_microCMSで考える、AI時代のコンテンツ運用設計
yosh1
0
390
Google Apps Script で Ruby を動かす
kawahara
0
200
yield再入門 #phpcon
o0h
PRO
0
1k
AIが無かった頃の素敵な出会いの話
codmoninc
1
420
生成AI導入の「期待外れ」を乗り越える ー 開発フロー改革が目指す、真の組織変革
starfish719
0
4.3k
Featured
See All Featured
Embracing the Ebb and Flow
colly
88
5.1k
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1.4k
Balancing Empowerment & Direction
lara
6
1.2k
How to Think Like a Performance Engineer
csswizardry
28
2.7k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
790
Agile that works and the tools we love
rasmusluckow
331
22k
Navigating Team Friction
lara
192
16k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
1
340
A designer walks into a library…
pauljervisheath
211
24k
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
280
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
auna
0
200
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
2
460
Transcript
@ManfredSteyer ManfredSteyer Manfred Steyer, ANGULARarchitects.io
@ManfredSteyer Folie▪ 2 Client Authorization-Server Resource-Server
@ManfredSteyer Folie▪ 3 Client Authorization-Server Resource-Server 1. Redirection 2. Redirect
w/ (Code for) Access-Token 3. Access-Token
@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)
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Several suggestions for using OAuth 2 in a more
secure way
@ManfredSteyer Example: Using Code Flow + PKCE instead of Implicit
Flow
@ManfredSteyer Remaining Problem: XSS -> Stealing Tokens
@ManfredSteyer
@ManfredSteyer Why Token Refresh? Short living Tokens increase Security Users
don't want to login over and over again
@ManfredSteyer Folie▪ 23 Client Authorization-Server Resource-Server 1. Redirection 2. Code
for Access-Token und Id-Token and Refresh-Token
@ManfredSteyer Folie▪ 24 Client Authorization-Server Resource-Server 3. Refresh-Token 4. Code
for Access-Token und Id-Token and new Refresh-Token
@ManfredSteyer * in specific situations …
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Client Gateway Authorization-Server Resource-Server Access-Token Id-Token Refresh-Token HTTP-only Cookie
Static Files (SPA) + XSRF Token SameSite +
@ManfredSteyer Client Gateway Authorization-Server Resource-Server 1 Access-Token Id-Token Refresh-Token HTTP-only
Cookie Static Files (SPA) Resource-Server 2 ⁉️
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer // 1. Register Services var builder = WebApplication.CreateBuilder(args); builder.Services.AddReverseProxy()
.LoadFromConfig(builder.Configuration.GetSection("ReverseProxy")); […] builder.Services .AddAntiforgery([…]) .AddSession([…]) .AddAuthentication([…]) .AddCookie([…]) .AddOpenIdConnect([…]); YARP 101
@ManfredSteyer // 2. Add Middleware app.UseSession(); app.UseAuthentication(); app.UseAuthorization(); app.UseCookiePolicy(); app.UseXsrfCookie();
app.UseGatewayEndpoints(); app.MapReverseProxy([…]); // 3. Start Sever app.Run("http://+:8080"); YARP 101
@ManfredSteyer
@ManfredSteyer DEMO
@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/
@ManfredSteyer Conclusion Browser: No Safe Place for Tokens Gateway: Generic
Implementation Token Refresh & Exchange Easier + More Secure
@ManfredSteyer d Slides & Examples Remote and In-House http://softwarearchitekt.at/workshops