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

Slide 1

Slide 1 text

@ManfredSteyer ManfredSteyer Manfred Steyer, ANGULARarchitects.io

Slide 2

Slide 2 text

@ManfredSteyer Folie▪ 2 Client Authorization-Server Resource-Server

Slide 3

Slide 3 text

@ManfredSteyer Folie▪ 3 Client Authorization-Server Resource-Server 1. Redirection 2. Redirect w/ (Code for) Access-Token 3. Access-Token

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

@ManfredSteyer

Slide 6

Slide 6 text

@ManfredSteyer

Slide 7

Slide 7 text

@ManfredSteyer Manfred Steyer

Slide 8

Slide 8 text

@ManfredSteyer

Slide 9

Slide 9 text

@ManfredSteyer

Slide 10

Slide 10 text

@ManfredSteyer

Slide 11

Slide 11 text

@ManfredSteyer Several suggestions for using OAuth 2 in a more secure way

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

@ManfredSteyer Remaining Problem: XSS -> Stealing Tokens

Slide 14

Slide 14 text

@ManfredSteyer

Slide 15

Slide 15 text

@ManfredSteyer Why Token Refresh? Short living Tokens increase Security Users don't want to login over and over again

Slide 16

Slide 16 text

@ManfredSteyer Folie▪ 23 Client Authorization-Server Resource-Server 1. Redirection 2. Code for Access-Token und Id-Token and Refresh-Token

Slide 17

Slide 17 text

@ManfredSteyer Folie▪ 24 Client Authorization-Server Resource-Server 3. Refresh-Token 4. Code for Access-Token und Id-Token and new Refresh-Token

Slide 18

Slide 18 text

@ManfredSteyer * in specific situations …

Slide 19

Slide 19 text

@ManfredSteyer

Slide 20

Slide 20 text

@ManfredSteyer

Slide 21

Slide 21 text

@ManfredSteyer Client Gateway Authorization-Server Resource-Server Access-Token Id-Token Refresh-Token HTTP-only Cookie Static Files (SPA) + XSRF Token SameSite +

Slide 22

Slide 22 text

@ManfredSteyer Client Gateway Authorization-Server Resource-Server 1 Access-Token Id-Token Refresh-Token HTTP-only Cookie Static Files (SPA) Resource-Server 2 ⁉️

Slide 23

Slide 23 text

@ManfredSteyer

Slide 24

Slide 24 text

@ManfredSteyer

Slide 25

Slide 25 text

@ManfredSteyer

Slide 26

Slide 26 text

@ManfredSteyer

Slide 27

Slide 27 text

@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

Slide 28

Slide 28 text

@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

Slide 29

Slide 29 text

@ManfredSteyer

Slide 30

Slide 30 text

@ManfredSteyer DEMO

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

@ManfredSteyer Conclusion Browser: No Safe Place for Tokens Gateway: Generic Implementation Token Refresh & Exchange Easier + More Secure

Slide 33

Slide 33 text

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