Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Manfred Steyer
PRO

July 03, 2023
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. @ManfredSteyer
    ManfredSteyer
    Manfred Steyer, ANGULARarchitects.io

    View Slide

  2. @ManfredSteyer
    @ManfredSteyer

    View Slide

  3. @ManfredSteyer

    View Slide

  4. @ManfredSteyer

    View Slide

  5. @ManfredSteyer
    OAuth2
    Folie▪ 5
    Client
    Authorization-Server
    Resource-Server

    View Slide

  6. @ManfredSteyer
    OAuth2
    Folie▪ 6
    Client
    Authorization-Server
    Resource-Server
    1. Redirection
    2. Redirection
    w/ Access-Token
    3. Access-Token
    One central user account
    Only Auth-Svr. sees the Password
    Auth. decoupled from Client
    Tokens provide flexibility
    No Cookies: No XSRF

    View Slide

  7. @ManfredSteyer

    View Slide

  8. @ManfredSteyer

    View Slide

  9. @ManfredSteyer
    Manfred Steyer

    View Slide

  10. @ManfredSteyer

    View Slide

  11. @ManfredSteyer
    @ManfredSteyer

    View Slide

  12. @ManfredSteyer
    Implicit Flow
    Folie▪ 12
    Client
    Authorization-Server
    Resource-Server
    1. Redirection
    2. Access-Token
    3. Access-Token

    View Slide

  13. @ManfredSteyer
    OpenId Connect
    Folie▪ 13
    Client
    Authorization-Server
    Resource-Server
    1. Redirection
    2. Access-Token
    and Id-Token
    3. Access-Token
    User Info Endpoint
    (OIDC)
    Format:
    JSON Web Token (JWT)

    View Slide

  14. @ManfredSteyer

    View Slide

  15. @ManfredSteyer
    @ManfredSteyer

    View Slide

  16. @ManfredSteyer
    @ManfredSteyer

    View Slide

  17. @ManfredSteyer
    Current Best Practices Documents
    Advice Against Implicit Flow

    View Slide

  18. @ManfredSteyer
    Implicit Flow
    Folie▪ 18
    Client
    Authorization-Server
    Resource-Server
    1. Redirection
    2. Access-Token
    3. Access-Token

    View Slide

  19. @ManfredSteyer

    View Slide

  20. @ManfredSteyer

    View Slide

  21. @ManfredSteyer
    Code Flow
    w/ OIDC
    Folie▪ 21
    Client
    Authorization-Server
    Resource-Server
    1. Redirection
    2. Redirection
    w/ Code

    View Slide

  22. @ManfredSteyer
    Code Flow
    w/ OIDC
    Folie▪ 22
    Client
    Authorization-Server
    Resource-Server
    3. AJAX
    Code
    4. Redirection
    w/ Access-Token
    and Id-Token
    5. Access-Token

    View Slide

  23. @ManfredSteyer
    Code Flow + PKCE
    w/ OIDC
    Folie▪ 23
    Client
    Authorization-Server
    Resource-Server
    1. Redirection
    + Hash(verifier)
    2. Redirection
    w/ Code
    Hash(verifier)

    View Slide

  24. @ManfredSteyer
    Code Flow + PKCE
    w/ OIDC
    Folie▪ 24
    Client
    Authorization-Server
    Resource-Server
    3. AJAX
    Code + verifier
    4. Response
    w/ Access-Token
    and Id-Token
    5. Access-Token
    Hash(verifier)

    View Slide

  25. @ManfredSteyer
    @ManfredSteyer

    View Slide

  26. @ManfredSteyer
    DEMO

    View Slide

  27. @ManfredSteyer

    View Slide

  28. @ManfredSteyer
    @ManfredSteyer

    View Slide

  29. @ManfredSteyer
    Why Token Refresh?
    Short living tokens
    increase security
    Users don't want to
    login over and over
    again

    View Slide

  30. @ManfredSteyer
    Refresh w/ Cookie
    Folie▪ 30
    Client
    Authorization-Server
    Resource-Server
    1. Redirection
    2. Redirection
    w/ Code

    View Slide

  31. @ManfredSteyer
    Alternative: Silent Refresh
    Folie▪ 31
    Client
    Authorization-Server
    Resource-Server
    1. Redirection in
    hidden iframe
    2. Redirection
    w/ Code

    View Slide

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

    View Slide

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

    View Slide

  34. @ManfredSteyer
    * in specific situations …

    View Slide

  35. @ManfredSteyer
    Refresh-Token and Browsers
    • OAuth 2.0 Security Best Current Practice allows it under specific
    circumstances
    • Security Audit (XSS!)
    • Refresh Token needs to be one-time token
    • After Refresh: Client gets new refresh toke

    View Slide

  36. @ManfredSteyer
    DEMO

    View Slide

  37. @ManfredSteyer

    View Slide

  38. @ManfredSteyer

    View Slide

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

    View Slide

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

    View Slide

  41. @ManfredSteyer

    View Slide

  42. @ManfredSteyer

    View Slide

  43. @ManfredSteyer

    View Slide

  44. @ManfredSteyer

    View Slide

  45. @ManfredSteyer
    // 1. Register Services
    var builder = WebApplication.CreateBuilder(args);
    […]
    builder.Services
    .AddAntiforgery([…])
    .AddSession([…])
    .AddAuthentication([…])
    .AddCookie([…])
    .AddOpenIdConnect([…]);
    YARP 101

    View Slide

  46. @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

    View Slide

  47. @ManfredSteyer

    View Slide

  48. @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/blob/main/apps/flight-app/src/app/shared/auth.service.ts

    View Slide

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

    View Slide

  50. @ManfredSteyer

    View Slide

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

    View Slide