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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Manfred Steyer
PRO
May 18, 2022
Programming
760
0
Share
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
Agentic UI with Angular @ngAir April 2025
manfredsteyer
PRO
0
140
Migration to Signals, Signal Forms, Resource API, and NgRx Signal Store @Angular Days 03/2026 Munich
manfredsteyer
PRO
0
300
AI Assistants for YourAngular Solutions @Angular Graz, March 2026
manfredsteyer
PRO
0
180
AI Assistants for Your Angular Solutions @ngVienna March 2026
manfredsteyer
PRO
0
91
AI Assistants for Your Angular Solutions
manfredsteyer
PRO
0
190
Nostalgia Meets Technology: Super Mario with TypeScript
manfredsteyer
PRO
0
140
Full Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
manfredsteyer
PRO
0
110
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios @OOP 2026, Munic
manfredsteyer
PRO
0
280
Beyond the Basics: Signal Forms
manfredsteyer
PRO
0
180
Other Decks in Programming
See All in Programming
第3木曜LT会 #28
tinykitten
PRO
0
110
GNU Makeの使い方 / How to use GNU Make
kaityo256
PRO
16
5.6k
2026_04_15_量子計算をパズルとして解く
hideakitakechi
0
110
PHPで TLSのプロトコルを実装してみるをもう一度しゃべりたい
higaki_program
0
210
Surviving Black Friday: 329 billion requests with Falcon!
ioquatix
0
370
ふりがな Deep Dive try! Swift Tokyo 2026
watura
0
230
Don't Prompt Harder, Structure Better
kitasuke
0
770
forteeの改修から振り返るPHPerKaigi 2026
muno92
PRO
3
290
検索設計から 推論設計への重心移動と Recall-First Retrieval
po3rin
1
360
AIベース静的検査器の偽陽性率を抑える工夫3選
orgachem
PRO
3
320
AWSコミュニティ活動は顧客のクラウド推進に効くのか / Do AWS community activities help customers adopt the cloud?
seike460
PRO
0
140
Vibe하게 만드는 Flutter GenUI App With ADK , 박제창, BWAI Incheon 2026
itsmedreamwalker
0
550
Featured
See All Featured
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
220
Building AI with AI
inesmontani
PRO
1
910
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
Accessibility Awareness
sabderemane
1
100
What's in a price? How to price your products and services
michaelherold
247
13k
Designing Powerful Visuals for Engaging Learning
tmiket
1
350
Color Theory Basics | Prateek | Gurzu
gurzu
0
290
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
680
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
[SF Ruby Conf 2025] Rails X
palkan
2
960
How to Think Like a Performance Engineer
csswizardry
28
2.6k
First, design no harm
axbom
PRO
2
1.2k
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