Rethinking Auth for SPAs and Micro Frontends: Easy and Secure With Gateways

@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 Manfred Steyer

@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 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 // 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

Rethinking Auth for SPAs and Micro Frontends: ...

Rethinking Auth for SPAs and Micro Frontends: Easy and Secure With Gateways

Manfred Steyer PRO

More Decks by Manfred Steyer

Other Decks in Programming

Featured

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

@ManfredSteyer Folie▪ 4 Client Authorization-Server Resource-Server 1. Redirection 2. Redirect

@ManfredSteyer

@ManfredSteyer

@ManfredSteyer Manfred Steyer

@ManfredSteyer

@ManfredSteyer

@ManfredSteyer

@ManfredSteyer Several suggestions for using OAuth 2 in a more

@ManfredSteyer Example: Using Code Flow + PKCE instead of Implicit

@ManfredSteyer Remaining Problem: XSS -> Stealing Tokens

@ManfredSteyer

@ManfredSteyer Why Token Refresh? Short living Tokens increase Security Users

@ManfredSteyer Folie▪ 23 Client Authorization-Server Resource-Server 1. Redirection 2. Code

@ManfredSteyer Folie▪ 24 Client Authorization-Server Resource-Server 3. Refresh-Token 4. Code

@ManfredSteyer * in specific situations …

@ManfredSteyer

@ManfredSteyer

@ManfredSteyer Client Gateway Authorization-Server Resource-Server Access-Token Id-Token Refresh-Token HTTP-only Cookie

@ManfredSteyer Client Gateway Authorization-Server Resource-Server 1 Access-Token Id-Token Refresh-Token HTTP-only

@ManfredSteyer

@ManfredSteyer

@ManfredSteyer

@ManfredSteyer

@ManfredSteyer // 1. Register Services var builder = WebApplication.CreateBuilder(args); builder.Services.AddReverseProxy()

@ManfredSteyer // 2. Add Middleware app.UseSession(); app.UseAuthentication(); app.UseAuthorization(); app.UseCookiePolicy(); app.UseXsrfCookie();

@ManfredSteyer

@ManfredSteyer DEMO

@ManfredSteyer Demo • SPA: https://purple-flower-021fa1b03.azurestaticapps.net/home • SPA behind Security Gateway:

@ManfredSteyer Conclusion Browser: No Safe Place for Tokens Gateway: Generic

@ManfredSteyer d Slides & Examples Remote and In-House http://softwarearchitekt.at/workshops