Sequence Diagram of the Flow #2
Conversation
There was a problem hiding this comment.
Pull request overview
This pull request adds comprehensive documentation of the authentication and token handling flow using a Mermaid sequence diagram. The diagram illustrates the interactions between the React frontend, YARP proxy, Token Handler middleware, Hybrid Cache, Keycloak IdP, and Backend API.
Changes:
- Added a new "Sequence Diagram of the Flow" section to README.md
- Documents three main flows: Initial Authentication, Subsequent API Calls, and Token Refresh
- Provides detailed step-by-step visualization of the OAuth/OIDC authentication process
| TokenHandler->>API: 19. Proxied request with Bearer token | ||
| API->>API: 20. Validate JWT token | ||
| API->>TokenHandler: 21. API response | ||
| TokenHandler->>Browser: 22. Response #40;without tokens#41; |
There was a problem hiding this comment.
HTML entities are being used instead of regular parentheses. In Mermaid diagrams, you should use regular parentheses instead of HTML entities. Replace #40; with ( and #41; with ).
|
|
||
| Note over Browser,API: Token Refresh #40;if needed#41; | ||
|
|
||
| Browser->>YARP: 23. API request #40;expired token#41; |
There was a problem hiding this comment.
HTML entities are being used instead of regular parentheses. In Mermaid diagrams, you should use regular parentheses instead of HTML entities. Replace #40; with ( and #41; with ).
| ```mermaid | ||
|
|
||
| sequenceDiagram | ||
| participant Browser as Frontend #40;React#41; |
There was a problem hiding this comment.
HTML entities are being used instead of regular parentheses. In Mermaid diagrams, you should use regular parentheses instead of HTML entities. Replace #40; with ( and #41; with ).
| YARP->>Keycloak: 5. OIDC Authorization Request | ||
| Keycloak->>Browser: 6. Login page | ||
| Browser->>Keycloak: 7. Submit credentials | ||
| Keycloak->>YARP: 8. Authorization code #40;callback#41; |
There was a problem hiding this comment.
HTML entities are being used instead of regular parentheses. In Mermaid diagrams, you should use regular parentheses instead of HTML entities. Replace #40; with ( and #41; with ).
| Keycloak->>YARP: 8. Authorization code #40;callback#41; | ||
|
|
||
| Note over YARP,Keycloak: Token Exchange | ||
| YARP->>Keycloak: 9. Exchange code for tokens<br/>#40;OnAuthorizationCodeReceived#41; |
There was a problem hiding this comment.
HTML entities are being used instead of regular parentheses. In Mermaid diagrams, you should use regular parentheses instead of HTML entities. Replace #40; with ( and #41; with ).
| Keycloak->>YARP: 10. Access + Refresh tokens | ||
|
|
||
| Note over YARP,Cache: Token Storage | ||
| YARP->>Cache: 11. Store tokens with session-id<br/>#40;OnTokenValidated#41; |
There was a problem hiding this comment.
HTML entities are being used instead of regular parentheses. In Mermaid diagrams, you should use regular parentheses instead of HTML entities. Replace #40; with ( and #41; with ).
| API->>TokenHandler: 21. API response | ||
| TokenHandler->>Browser: 22. Response #40;without tokens#41; | ||
|
|
||
| Note over Browser,API: Token Refresh #40;if needed#41; |
There was a problem hiding this comment.
HTML entities are being used instead of regular parentheses. In Mermaid diagrams, you should use regular parentheses instead of HTML entities. Replace #40; with ( and #41; with ).
| participant YARP as BFF/YARP Proxy | ||
| participant TokenHandler as Token Handler Middleware | ||
| participant Cache as Hybrid Cache | ||
| participant Keycloak as Keycloak #40;IdP#41; |
There was a problem hiding this comment.
HTML entities are being used instead of regular parentheses. In Mermaid diagrams, you should use regular parentheses instead of HTML entities. Replace #40; with ( and #41; with ).
|
|
||
| Note over YARP,Cache: Token Storage | ||
| YARP->>Cache: 11. Store tokens with session-id<br/>#40;OnTokenValidated#41; | ||
| YARP->>Browser: 12. Set session-id cookie #40;HttpOnly, Secure#41; |
There was a problem hiding this comment.
HTML entities are being used instead of regular parentheses. In Mermaid diagrams, you should use regular parentheses instead of HTML entities. Replace #40; with ( and #41; with ).
| YARP->>TokenHandler: 15. AuthenticationHeaderSubstitutionMiddleware | ||
| TokenHandler->>Cache: 16. Retrieve tokens by session-id | ||
| Cache->>TokenHandler: 17. Return OAuthTokenResponse | ||
| TokenHandler->>TokenHandler: 18. Add Authorization: Bearer {#35;access_token{#35;} |
There was a problem hiding this comment.
HTML entity {#35;} is being used instead of a regular hash symbol. In Mermaid diagrams, you should use # directly instead of HTML entities.
| TokenHandler->>TokenHandler: 18. Add Authorization: Bearer {#35;access_token{#35;} | |
| TokenHandler->>TokenHandler: 18. Add Authorization: Bearer #access_token# |
A first draft of sequence diagram
