Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Rethinking Auth for SPAs and Micro Frontends: ...
Search
Manfred Steyer
PRO
May 18, 2022
Programming
800
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
Human in the Loop Beyond Approval: Toward True Collaboration @FrontMania 2026 in Utrecht
manfredsteyer
PRO
0
80
Agentic UI: Where the Agent meets the User @FrontMania 2026 in Utrecht
manfredsteyer
PRO
0
84
A2UI as an Architecture Question: Agentic UI Between AI Freedom and Control
manfredsteyer
PRO
0
100
AI-Ready Angular Architectures Architecture as Executable Contract
manfredsteyer
PRO
0
270
Nostalgia Meets Technology: Super Mario with TypeScript @BASTA 2026 in Mainz, Germany
manfredsteyer
PRO
0
73
Beyond Chatbots: Agentic UI with Open Standards @AGNTcon 2026 in Amsterdam
manfredsteyer
PRO
0
150
Next-Level Frontends: Agentic Web UIs Under the Hood
manfredsteyer
PRO
0
110
Agentic UI with Open Standards @ngGraz Sep 2026
manfredsteyer
PRO
0
130
Agentic UI with Open Standards @GDG Salzburg, Bgl & Prishtina
manfredsteyer
PRO
0
110
Other Decks in Programming
See All in Programming
Workers Cache を知る
syumai
0
370
FactoryBotをやめればRSpecは速くなるのか?
yuta_onishi_97
0
990
🇪🇸 React Alicante 2026 (Workshop)
ythecombinator
PRO
0
100
Event is what happens
moro
2
1.2k
Augmenting AI with the Power of Jakarta EE
ivargrimstad
0
350
GemmaをJevのように使ってみる / Use Gemma like Jev
kishida
5
820
phperだってパンチカードでコーディングしたい
o0h
PRO
0
390
Performance Optimization With LLMs
xleitix
0
190
golang-bob.pdf
iwatsukayura
0
130
dotNET_vulnclicker_intro.pdf
deka_morita
0
150
當我們開始不讀 Code - AI Agent 時代,Code Review 與 Clean Code 還剩下什麼?
jame2408
1
300
AI-Powered Domain-Driven Design
ziobrando
0
240
Featured
See All Featured
BBQ
matthewcrist
90
10k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
helenjbeal
2
370
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
Exploring anti-patterns in Rails
aemeredith
4
540
How to train your dragon (web standard)
notwaldorf
96
6.9k
Site-Speed That Sticks
csswizardry
13
1.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.9k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
davidcarrasco
0
260
Agile that works and the tools we love
rasmusluckow
331
22k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
It's Worth the Effort
3n
188
29k
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