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
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
Migration to Signals, Signal Forms, Resource API, and NgRx Signal Store @Angular Days 03/2026 Munich
manfredsteyer
PRO
0
210
AI Assistants for YourAngular Solutions @Angular Graz, March 2026
manfredsteyer
PRO
0
140
AI Assistants for Your Angular Solutions @ngVienna March 2026
manfredsteyer
PRO
0
66
AI Assistants for Your Angular Solutions
manfredsteyer
PRO
0
170
Nostalgia Meets Technology: Super Mario with TypeScript
manfredsteyer
PRO
0
120
Full Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
manfredsteyer
PRO
0
86
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios @OOP 2026, Munic
manfredsteyer
PRO
0
250
Beyond the Basics: Signal Forms
manfredsteyer
PRO
0
150
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
manfredsteyer
PRO
0
240
Other Decks in Programming
See All in Programming
20260315 AWSなんもわからん🥲
chiilog
2
180
Laravel Nightwatchの裏側 - Laravel公式Observabilityツールを支える設計と実装
avosalmon
1
300
今こそ押さえておきたい アマゾンウェブサービス(AWS)の データベースの基礎 おもクラ #6版
satoshi256kbyte
1
220
S3ストレージクラスの「見える」「ある」「使える」は全部違う ─ 体験から見た、仕様の深淵を覗く
ya_ma23
0
1.2k
GC言語のWasm化とComponent Modelサポートの実践と課題 - Scalaの場合
tanishiking
0
140
実践ハーネスエンジニアリング #MOSHTech
kajitack
7
5.3k
forteeの改修から振り返るPHPerKaigi 2026
muno92
PRO
3
110
ネイティブアプリとWebフロントエンドのAPI通信ラッパーにおける共通化の勘所
suguruooki
0
230
ファインチューニングせずメインコンペを解く方法
pokutuna
0
250
今年もTECHSCOREブログを書き続けます!
hiraoku101
0
210
コードレビューをしない選択 #でぃーぷらすトウキョウ
kajitack
3
1.2k
AIと共にエンジニアとPMの “二刀流”を実現する
naruogram
0
110
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
11
870
The SEO identity crisis: Don't let AI make you average
varn
0
430
Git: the NoSQL Database
bkeepers
PRO
432
67k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
120
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
260
How to Ace a Technical Interview
jacobian
281
24k
Raft: Consensus for Rubyists
vanstee
141
7.4k
Code Review Best Practice
trishagee
74
20k
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
90
Building Flexible Design Systems
yeseniaperezcruz
330
40k
Ethics towards AI in product and experience design
skipperchong
2
240
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
390
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