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
0
720
Rethinking Auth for SPAs and Micro Frontends: Easy and Secure With Gateways
Manfred Steyer
PRO
May 18, 2022
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
61
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
130
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
280
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
180
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
84
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
170
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
94
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
72
Live Coding: Migrating an Application to Signals
manfredsteyer
PRO
0
180
Other Decks in Programming
See All in Programming
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
310
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
560
Claude Codeの使い方
ttnyt8701
1
130
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
A comprehensive view of refactoring
marabesi
0
970
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.9k
Create a website using Spatial Web
akkeylab
0
300
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
knih
11
2k
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
470
XP, Testing and ninja testing
m_seki
3
170
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
290
ReadMoreTextView
fornewid
1
460
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Visualization
eitanlees
146
16k
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
KATA
mclloyd
29
14k
Become a Pro
speakerdeck
PRO
28
5.4k
It's Worth the Effort
3n
185
28k
Agile that works and the tools we love
rasmusluckow
329
21k
A Tale of Four Properties
chriscoyier
160
23k
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