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

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