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: Easy and Secure With Gateways
Search
Manfred Steyer
PRO
May 18, 2022
Programming
0
620
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
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
60
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
53
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
230
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
390
Micro Frontends with Web Standards
manfredsteyer
PRO
1
290
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
210
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
170
Modern State Management in Angular: The 3+n Flavors of the NGRX Signal Store
manfredsteyer
PRO
0
100
NGRX Signal Store
manfredsteyer
PRO
0
200
Other Decks in Programming
See All in Programming
脱・初心者!脱・マネコン!AWS CDKを使ってみませんか!?
har1101
0
310
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
130
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
What We Can Learn From OSS
inouehi
0
410
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
4
270
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
今の SmartHR にエンジニアで入社するとどうなるの?
daisukeshinoku
5
4.6k
Javaエンジニアのための Nodejs/Nuxt3入門
hidekatsu_izuno
0
280
ONE WEDGE_company_guide
1wedge_one
0
390
オブジェクト指向のリ・オリエンテーション~歴史を振り返り、AI時代に向きなおる~
hanyudaeiiti
10
5.7k
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
240
pixivアプリでマルチモジュールを実現するまで
gatosyocora
1
130
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Bash Introduction
62gerente
604
210k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Designing for Performance
lara
601
67k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Git: the NoSQL Database
bkeepers
PRO
422
63k
Become a Pro
speakerdeck
PRO
10
4.5k
Optimizing for Happiness
mojombo
370
69k
How to name files
jennybc
64
92k
Statistics for Hackers
jakevdp
789
220k
The Mythical Team-Month
searls
215
42k
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