$30 off During Our Annual Pro Sale. View Details »
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
680
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
Your Architecture as a Crime Scene: Improvements with Forensic Analysis
manfredsteyer
PRO
0
7
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
160
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
150
Your Architecture as a Crime Scene: Improvements with Forensic Analysis @ijs Munich 2024
manfredsteyer
PRO
0
72
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
110
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives @w-jax 2024 München
manfredsteyer
PRO
0
100
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
110
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
65
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
260
Other Decks in Programming
See All in Programming
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
250
Djangoの開発環境で工夫したこと - pre-commit / DevContainer
hiroki_yod
1
460
Serverless苦闘史
mosh_inc
0
120
flutterkaigi_2024.pdf
kyoheig3
0
290
Arm移行タイムアタック
qnighy
0
380
Develop iOS apps with Neovim / vimconf_2024
uhooi
1
120
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
1.1k
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
490
Figma Dev Modeで変わる!Flutterの開発体験
watanave
0
3.4k
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
270
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
3
340
Creating a Free Video Ad Network on the Edge
mizoguchicoji
0
140
Featured
See All Featured
Facilitating Awesome Meetings
lara
50
6.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
0
38
Docker and Python
trallard
40
3.1k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
KATA
mclloyd
29
14k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
17k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
24k
Building Applications with DynamoDB
mza
90
6.1k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
740
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